Forem: Rakib Ahsan

Building a Robust Next.js Quiz App: My Journey

Rakib Ahsan — Tue, 09 Jul 2024 17:17:35 +0000

The Challenge
Recently, I embarked on an exciting project: building a Next.js app with dynamic client-server interactions and static site generation. The initial implementation was seamless, especially with token-based authentication for the login page. Everything was running smoothly until my client threw in a new requirement—a feature to create a quiz app.

This new feature demanded server-side rendering (SSR) to expose an API endpoint. The backend, built with Laravel, included authentication routes. The critical part was ensuring that the quiz questions were tailored to the user’s profile, requiring secure access to the authenticated user's data.

The Roadblocks
Token Access: The token needed for authentication was stored in local storage, inaccessible from the server side. Conversely, the client side couldn't use cookies.
Data Transmission: Although server-side data can be passed to the client via props, my component structure didn't allow for this straightforward transmission.
The Solution
Innovation and a bit of clever engineering helped me overcome these obstacles. Here's how:

Token in URL: By encoding the token as a URL parameter, I could access it server-side. This approach allowed me to retrieve the token and use it as a Bearer token in the header.
Seamless Integration: This method was not only secure but also adaptable, working flawlessly for infinite loading scenarios via server actions.
Final Thoughts
This project was a rewarding challenge, showcasing the power of combining Next.js with Laravel for a robust, full-stack solution. The ability to seamlessly integrate SSR with token-based authentication opened new doors for secure and dynamic user interactions.

Thanks for joining me on this journey! If you have any questions or need assistance with similar projects, don't hesitate to reach out.

Attach jwt with fetch for next js 14 server action

Rakib Ahsan — Mon, 18 Mar 2024 16:21:06 +0000

We're all aware of how crucial JWT is in preventing cross-site API actions. However, dealing with attaching and handling the token every time can become quite cumbersome. That's why I've taken the initiative to enhance the fetch function within Next.js 14. Let's delve into this modification and see how it streamlines our workflow!

Let's create a new file for this updated fetch function and export it as follows:

import { cookies } from "next/headers";

const baseURL = process.env.NEXT_PUBLIC_BACKEND_URL;

export async function fetchWithAuth(
  url: string,
  options: RequestInit = {}
): Promise<any> {
  try {
    const token = getTokenFromCookie();

    const headers = new Headers(options.headers);

    if (token) {
      headers.set("Authorization", `Bearer ${token}`);
    }
    const response = await fetch(baseURL + url, { ...options, headers });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();

    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

function getTokenFromCookie(): string | undefined {
  const cookieStore = cookies();
  const tokenAll = cookieStore.get("token");
  return tokenAll?.value;
}

When it comes to setting the JWT token from the backend, assuming I'm using Laravel for the API, and setting the cookie for the login route:

import { unstable_noStore as noStore } from "next/cache";
export async function Login(data: { email: string; password: string }) {
  try {
    noStore();
    const res = await fetch(`${baseURL}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        cache: "no-store",
      },
      body: JSON.stringify(data),
    });
    const responseData = await res.json();

    if (responseData.token) {
      cookies().set("token", responseData.token, {
        httpOnly: true,
        expires: new Date("2030-01-01"),
      });
    }

    return responseData;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

// HttpOnly ensures security against cross-attack

"Cachec - no store" Bug Next Js 14

Rakib Ahsan — Mon, 18 Mar 2024 16:04:29 +0000

Recently, I attempted to log in using JWT authentication. However, I encountered an issue where, upon logging in and storing the JWT in a cookie, sometimes the system would return an outdated token. This proved to be problematic as I had already deleted the previous token.

Despite employing techniques such as using a fetch request with no cache, I still encountered unsatisfactory results. Subsequently, I delved into their documentation further and explored potential solutions.

`export async function Login(data: { email: string; password: string }) {
  try {
    noStore();//this work as force dynamic and no store
    const res = await fetch(`${baseURL}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        cache: "no-store",
      },
      body: JSON.stringify(data),
    });
    const responseData = await res.json();

    console.log(responseData);

    if (responseData.token) {
      cookies().set("token", responseData.token, {
        httpOnly: true,
        expires: new Date("2030-01-01"),
      });
    }

    return responseData;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}`

next js doc here