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

[giorgi225]

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 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");
            }
        }

[vedas-dixit]

I believe you're running into an issue because SSR requests in Next.js don’t automatically persist cookies like a browser does. When you fetch from Express in an SSR component, even if Express sends the Set-Cookie header, it won’t be applied to future SSR requests.

Basically client side requests work because the browser handles cookies automatically.
SSR requests don’t persist cookies since Next.js doesn’t manage Set-Cookie headers internally.

I think you can fix it by manually set cookies in SSR:

const setCookieHeader = refreshTokenRes.headers.get("set-cookie");
if (setCookieHeader) {
    cookies().set("accessToken", extractToken(setCookieHeader));
} 

other then that you can also try:

res.cookie("accessToken", newAccessToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    path: "/",
});

Instead of calling Express from the SSR component, call a Next.js API route.
That API route can forward requests, capture Set-Cookie, and apply it properly.

I believe this will solve the issue :)

[TheLermanator]

I think you can fix it by manually set cookies in SSR:

const setCookieHeader = refreshTokenRes.headers.get("set-cookie");
if (setCookieHeader) {
    cookies().set("accessToken", extractToken(setCookieHeader));
} 

This is exactly what I needed! Thank you so much 🤝