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

[giorgi225]

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 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]

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!