Setting cookies in next server components while working with external api

[saimarshadsaim31]

Summary

I am working with external api that has token based auth. When i login using server action the server responds with the token which i save in http only cookies. And when i need to fetch the data in server components i get the token from cookies and send the token with the request. Just to let you know i am not using route handlers to proxy requests i am using fetching data directly in server components. Now every thing works till now until unless i need to handle the case of token expiry or when my server responds with 401 or 403 now in this case i need to logout the user and clear the cookies but as i am in server components i cannot do that since we can only modify the cookies in server actions and route handlers. So now i feel stuck and dont know what to do.

Additional information

No response

Example

No response

[maral]

Hi @saimarshadsaim31,

you are correct that you cannot modify cookies directly in your normal response. First question - is the logged in status fully dependent on the validity of the token you are getting from a 3rd party API?

If so, I would always first check the validity, ideally in the root of the component tree, i.e. in the page.tsx. If the token is expired, redirect the user to a route where you clear the cookie (e.g. /logout) and redirect them to /login or / or wherever you want.

export default async function ProtectedPage() {
  const token = await cookies().get('token')?.value

  if (!token || isTokenExpired(token)) {
    redirect('/logout') // Triggers cookie clear and redirects to /login
  }

  // Continue rendering...
}

// app/logout/route.ts
export async function GET() {
  const response = NextResponse.redirect('/login')
  response.cookies.set('token', '', {
    path: '/',
    maxAge: 0,
    httpOnly: true,
    secure: true,
  })
  return response
}

[saimarshadsaim31]

hey @maral thanks for the reply. I have a confusion, Are you suggesting to redirect to a route(page) /logout and then the call the api route /logout or to directly redirect to api route /logout?

[saimarshadsaim31]

Here are the response headers of the orignal login server action:

and here are the response headers of the login action after the redirect from logout:

but in second case the cookies does not appear in the applications tab under cookies, until i reload and try again.

By the wayI have also tried the middleware approach where i check if token is expired in the middleware itself and if it is i delete the cookie and redirect to login which seems to work without any issues is this a valid an acceptable approach?

[maral]

I think having it in the middleware is much cleaner option, so definitely go for that. The behavior of the logout/login thing is pretty weird, though. I guess there is some other factor coming in - but if you don't need to go that way, we don't need to debug this.

[saimarshadsaim31]

i think this is something similar to this #49442 (comment).

By the way i also tried to implement the solution where we redirect to /logout page that is client side and remove the cookie using server action which worked very well just there was one problem what if the user manually goes to /logout route. There is no way of knowing if it was redirected internally or the user manually went to the /logout page other wise every thing was working.

I think I will be goiing with the middlware route that seems to be working. Only problem is that middleware runs every time and we are making an api call whenever it runs but i thinks that ok the next-auth as far as i know also does the same with sessions. Here is the code that works:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";

export async function middleware(request: NextRequest) {
  const token = request.cookies.get("auth_token");
  const { pathname } = request.nextUrl;

  // Public routes that don't require authentication
  const publicRoutes = ["/login", "/register"];
  const isPublicRoute = publicRoutes.includes(pathname);

  // If user is trying to access protected route without token
  if (!token && !isPublicRoute) {
    console.log("\n\n\n===== > No Token present and it is not a Public Route");
    console.log("===== > redirecting to login \n\n\n");
    return NextResponse.redirect(new URL("/login", request.url));
  }

  // If user has token but is trying to access auth pages, redirect to dashboard
  if (token && isPublicRoute) {
    console.log("\n\n\n===== > Token is present and it is a Public Route");
    console.log("===== > redirecting to dashboard \n\n\n");
    return NextResponse.redirect(new URL("/dashboard", request.url));
  }

  // For protected routes with token, validate the token
  if (token && !isPublicRoute) {
    console.log("\n\n\n===== > Token is present and it is a Protected Route");
    console.log("===== > checking token validity");
    try {
      const response = await fetch(`${API_BASE_URL}/api/user`, {
        headers: {
          Authorization: `Bearer ${token.value}`,
          "Content-Type": "application/json",
        },
        cache: "no-store",
      });

      console.log("=====> response in middleware", response.status);
      console.log("=====> response in middleware \n", await response.json());

      // If token is invalid, remove it and redirect to login
      if (response.status === 401 || response.status === 403) {
        const loginUrl = new URL("/login", request.url);
        const redirectResponse = NextResponse.redirect(loginUrl);

        // Remove the invalid token
        redirectResponse.cookies.delete("auth_token");

        return redirectResponse;
      }

      // If API is unreachable, let the request continue
      // Server components will handle the error appropriately
      if (!response.ok && response.status >= 500) {
        return NextResponse.next();
      }
    } catch (error) {
      // If there's a network error, let the request continue
      // This prevents blocking the app if the API is temporarily down
      console.error("Middleware auth check failed:", error);
      return NextResponse.next();
    }
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|public).*)"],
};

Last question can i also store the user information in normal (not http only) cookies in the middleware itself to use every where in my app in this way i dont have to call my backend user route any where in the server components and can use the user information in both client and server components?

Again Thanks for taking the time to reply and debug with me @maral.

[maral]

Hi, sure you can cache it to a cookie or even to local storage, whatever is more comfortable. However if it changes, you might display deprecated information, so you need to implement some kind of cache invalidation or update it after while.

You're welcome :) Make sure to mark your question as answered.