Unable to Set Cookies from Express.js to Next.js SSR Component (app router) #153971

giorgi225 · 2025-03-14T12:36:01Z

giorgi225
Mar 14, 2025

Select Topic Area

General

Body

I have an Express.js backend running on http://localhost:8000 and a Next.js frontend (App Router) running on http://localhost:3000.

What Works: • When making a request from a Next.js client component (browser) to the Express backend, cookies are set successfully. • When checking the response headers in a server component (SSR) or API route, I can see the Set-Cookie header coming from Express.

What I Tried: • Setting credentials: "include" in the fetch request. • Making a Next.js API route as a proxy and forwarding the Set-Cookie header. • Using different SameSite policies (Lax, Strict, None with Secure). • Ensuring CORS is properly configured on Express (Access-Control-Allow-Credentials: true). • Manually setting a cookie in the Next.js response (nextResponse.cookies.set("key", "value")).

This is my SSR function on NextJS to fetch request on ExpressJS API. To get info if user is authenticated or not I am sending access token. If access token is expired and refresh token is valid then I am refreshing the access token but new access token is not adding to browser cookies.

        "use server";
    import { User } from "@/components/providers/user.provider";
    import { cookies } from "next/headers";
    import { fetcher } from "./fetcher";

    interface invalidSession {
        ok: false, message: string, code: "unauthorized" | "invalid-or-expired-token"
    }

    interface successSession {
        ok: true, message: string, data: User;
    }


    export async function getSession() {
        const accessToken = (await cookies()).get("accessToken")?.value;
        const refreshToken = (await cookies()).get("refreshToken")?.value;

        const res = await fetcher<invalidSession | successSession>("/user/info", {
            headers: {
                Cookie: `accessToken=${accessToken}`
            }
        });

        if (!res.ok) {

            if (res.code === "invalid-or-expired-token") {
                console.log("Invalid or expired access token");
                console.log("refreshing token");


                const refreshTokenRes = await fetcher<invalidSession | successSession>("/user/refresh-token", {
                    method: "POST",
                    headers: {
                        Cookie: `refreshToken=${refreshToken}`
                    }
                });


                if (!refreshTokenRes.ok) {
                    console.log("refresh token is invalid or expired!");
                    return null;
                } else {
                    console.log("refresh token is valid & generated new access token!");

                    return refreshTokenRes.data
                }
            }

            console.log("No access Token is provided!");
            return null;
        }

        console.log("access token is valid!");
        return res.data;

    }

this is my expressjs refreshToken function where i setting new accessToken but it not working as i say above. it only works when request comes from nextjs client component but not when request comes from nextjs ssr

         public async refreshToken(req: Request, res: Response) {
            const refreshToken = req.cookies.refreshToken;

            if (!refreshToken) {
                res.clearCookie("accessToken")
                res.clearCookie("refreshToken")
                return ResponseHandler.unauthorized(res, "unauthorized");
            };

            try {
                const decoded = jwt.verify(refreshToken, authConfig.auth_refresh_secret) as { id: number };
                const user = await prisma.user.findUnique({ where: { id: decoded.id }, include: { user_verifications: true } });

                if (!user) {
                    res.clearCookie("accessToken")
                    res.clearCookie("refreshToken")
                    return ResponseHandler.unauthorized(res, "unauthorized")
                };

                const verifications = user.user_verifications as user_verifications;

                const newAccessToken = jwt.sign({ id: user.id }, authConfig.auth_secret, {
                    expiresIn: `${authConfig.auth_secret_expires_in as any}m`
                })

                res.cookie("accessToken", "asd", {
                    httpOnly: true,
                    secure: process.env.NODE_ENV === "production" ? true : false,
                    sameSite: "strict",
                });

                return ResponseHandler.success(res, {
                    accessToken: newAccessToken,
                    user: {
                        firstname: user.firstname,
                        lastname: user.lastname,
                        email: user.email,
                        email_verified: verifications.email_verified,
                        email_verified_at: verifications.email_verified_at,
                        phone: user.phone,
                        phone_verified: verifications.phone_verified,
                        phone_verified_at: verifications.phone_verified_at,
                    }
                })
            } catch (error) {
                res.clearCookie("accessToken")
                res.clearCookie("refreshToken")
                return ResponseHandler.unauthorized(res, "unauthorized", "Invalid refresh token");
            }
        }

shinybrightstar · 2025-03-14T14:01:00Z

shinybrightstar
Mar 14, 2025
Maintainer

Welcome to the GitHub Community, @giorgi225, we're happy you're here! You are more likely to get a useful response if you are posting your question(s) in the applicable category and are explicit about what your project entails--giving a few more details might help someone give you a nudge in the right direction. I've gone ahead and moved it for you. Good luck!

0 replies

raza-h · 2026-02-18T08:11:51Z

raza-h
Feb 18, 2026

This happens because Next.js server components cannot access browser cookies directly. The cookies.get() method reads cookies from the incoming server request, not the browser. When your Express backend returns a Set-Cookie header, it works in the browser (client components) because the browser automatically handles it, but server-side fetches don’t automatically propagate it to the client.

To handle this in SSR, you need to manually extract the Set-Cookie header from the Express response and then use cookies.set() in Next.js to set it for the outgoing response. This ensures the new cookie reaches the browser correctly.

Here's my implementation for reference: https://github.com/raza-h/blog-fe/blob/master/lib/server-utils.ts

0 replies

AbhishekKTech · 2026-02-18T09:17:23Z

AbhishekKTech
Feb 18, 2026

Hey! I see exactly what's happening here.

The reason this works in the browser but not in SSR is because your getSession function is making a server-to-server request. When Express sends the Set-Cookie header during this fetch, it goes straight to your Next.js server instead of the user's browser. The browser completely misses it!

Since your getSession function is a Server Action (indicated by "use server"), you can fix this by explicitly telling Next.js to set the cookie using the new token Express returns in its JSON response.

Just update the success block in your getSession function to manually set the cookie like this:

TypeScript
if (!refreshTokenRes.ok) {
console.log("refresh token is invalid or expired!");
return null;
} else {
console.log("refresh token is valid & generated new access token!");

// Manually set the cookie in Next.js so the browser receives it
const cookieStore = await cookies();

// Note: You may need to update your successSession interface to include the accessToken property
cookieStore.set("accessToken", (refreshTokenRes.data as any).accessToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "strict",
});

return refreshTokenRes.data;

}
This grabs the new access token directly from your Express response body and ensures Next.js manually forwards it down to the client. Hope this helps you get it working!

0 replies

vishwateja231 · 2026-02-18T12:51:19Z

vishwateja231
Feb 18, 2026

From what I’ve run into, this usually happens because when a request is made from a Next.js server component, it’s basically a server-to-server call. The browser isn’t directly involved in that exchange, so even if Express sends a Set-Cookie header, it just reaches the Next.js server and stops there instead of being stored in the user’s browser.

In client components it works because the browser automatically handles cookies, but with SSR you have to pass things along yourself. One approach that worked for me was to read the Set-Cookie (or the token in the response body) from the backend response and then explicitly set it using the cookies API in Next.js so it becomes part of the outgoing response to the browser.

It feels a bit awkward the first time you deal with it, because you expect cookies to “just work,” but once you think of SSR as one server talking to another server, it makes more sense why the browser never sees the cookie unless you forward it manually.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Unable to Set Cookies from Express.js to Next.js SSR Component (app router) #153971

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

GitHub Community

Unable to Set Cookies from Express.js to Next.js SSR Component (app router) #153971

Uh oh!

giorgi225 Mar 14, 2025

Select Topic Area

Body

Replies: 4 comments

Uh oh!

shinybrightstar Mar 14, 2025 Maintainer

Uh oh!

raza-h Feb 18, 2026

Uh oh!

AbhishekKTech Feb 18, 2026

Uh oh!

vishwateja231 Feb 18, 2026

giorgi225
Mar 14, 2025

shinybrightstar
Mar 14, 2025
Maintainer

raza-h
Feb 18, 2026

AbhishekKTech
Feb 18, 2026

vishwateja231
Feb 18, 2026