Setting a cookie works localhost, some vercel deployment domains, but not all

[lambo81]

UPDATE:

On localhost, I have no problems. I tried with http and https on localhost, the result is the same.

On Vercel, it is another story. It actually seems to set the cookie the first time I visit the domain. However, even this first time the expiration is "When the browser session ends" even though I set 'max-age'. After I close the browser, the cookies disappear and , I am not able to set cookies again.

I set my cookies like this:

res.setHeader("set-cookie", [serialisedAT, serialisedRT]);

Here is the value of the serialized cookies that I print out right after I set via res.getHeaders()

["AccessToken=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI4ODhhZDY3Ni0zNDFhLTQ4YzQtOWQxMi0wMTE5M2Q3ZDJlZDAiLCJpYXQiOjE2NTEwMDk0ODEsImV4cCI6MjU5MjAwMDAwMH0.VkbkHaOcf2ou0A40FNTg3zI8quA9bLBpn2PJRBxuYDA; Max-Age=2592000; Path=/; HttpOnly; Secure; SameSite=Strict","RefreshToken=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI4ODhhZDY3Ni0zNDFhLTQ4YzQtOWQxMi0wMTE5M2Q3ZDJlZDAiLCJpYXQiOjE2NTEwMDk0ODEsImV4cCI6NTE4NDAwMDAwMH0.vVhmjnpTYTknAnkHXAHtA_yVeIGiYvOpsCg0E6nSB5s; Max-Age=5184000; Path=/; HttpOnly; Secure; SameSite=Strict"]

[icyJoseph]

Hi,

A couple of follow up questions:

• Where are you setting this cookie? api/route, page getServerSideProps, middleware?
• Are you perhaps doing some redirect/cross-domain actions?
• Could you describe the flow that leads to the cookie being set? For example, you go from A.com to B.com and back to A.com?

[lambo81]

Hello. Thanks for your assistance. So I figured out one part.

There are no cross-domain issues and I have middleware but I am setting the cookie in the API route. The reason the cookie was being set the first time and not subsequent times is because of caching. I was using a GET request to get access tokens, and apparently that causes a 304 cached request to be sent without cookies. I changed my code to use POST and now I don't have that issue.

However, one other issue remains, the max-age of the cookie is not respected by the browser (Chrome and Safari on Mac). I can now see the header response that sets cookies, and I can see Max-Age=2592000; (30 days given in seconds) just as I have in my code.

But my browser seems to ignore that. On Chrome when I look at the cookies via the Settings, the expiration is "When the browsing session ends".

Another thing is that my nextjs app can clearly read the cookie value. But on Chrome when looking at the cookie, the content is blank.

Here is the response from the Chrome browser's developer view as I login. This cookie header looks normal to me.

set-cookie: AccessToken=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI4ODhhZDY3Ni0zNDFhLTQ4YzQtOWQxMi0wMTE5M2Q3ZDJlZDAiLCJpYXQiOjE2NTEwNzIzNzgsImV4cCI6MjU5MjAwMDAwMH0.dCxtBjl1hIfrl34-OXhcd2v87TLaOdDOitg0WKo7YmI; Max-Age=2592000; Path=/; HttpOnly; Secure; SameSite=Strict

I should mention that on localhost, the cookie max age is set and I can see the values in Chrome browser without issue

[icyJoseph]

There must be something else here, I deployed a test branch on one of my apps with that exact cookie you posted, and it works. Tested in Chrome, Safari, and Firefox.

Is it possible to take a look at the app, somehow? Is there any authentication library wrapping your app?

[lambo81]

yes i believe you are right because i copied and pasted a lot of this code from another codebase I deployed on vercel without issue
no auth library. just my own stuff. i'll add you as a contributor.

the login id admin / password

[lambo81]

This is very weird. Normally Chrome doesn't show the value or expiration for the cookie, but then the cookie is available to nextjs for use.

A second ago, I saw Chrome listed the value and expiration for the cookie, but then the cookie was not available for nextjs to use. A lot of buggy stuff that doesn't make sense.

The one difference between this code and the code I copied from (that works), is that from the authentication page, I forward to the next page via the nextjs router, whereas my other website that works I forward using location.href

almost seems like a timing issue is at play with writing cookies to disk.

[icyJoseph]

What happens if you redirect from /api/tokens to observe, while also setting the headers? I think you need to update the form submission to use <form action="/api/tokens" method="POST">, and the submit button should just be type="submit". Please do try with this change.

Basically, let the good old form submission do its job, and redirect to `observer, if the user is correct, otherwise, just fail with a 400 or something like that.

[lambo81]

Ok I figured out the issue. I think this must be a bug. The page I forward to after I authenticate has a link to logout:

<div className="pl-5"><Link href="/logout"><a><Image className="ml-5 mt-5" src={signOutArrow} width="36" height="29" /></a></Link></div>

For some reason nextjs is causing the browser to load that link in the background, thus logging the person out which results in clearing cookie values and setting the max-age to 0. That's why when I looked at my cookies they had no value and the expire time was "when browser session ends".

I discovered this by looking at my _middleware.js output statements and seeing that the path /logout was being executed automatically!

Of course this only happens on vercel and not my local host. When I remove the link tag it has no issue.

I did some quick googling and this seems to be the reason:

https://web.dev/route-prefetching-in-nextjs/

[icyJoseph]

Ah darn, yeah that could totally be the problem. Pass prefetch false. Does it also happen if you build and start the application locally?

[lambo81]

nope not at all. where do i specify prefetch to false?

[icyJoseph]

Weird if it doesn't happen when you run production locally, but I guess it's worth the try, from the docs:

prefetch - Prefetch the page in the background. Defaults to true. Any that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch={false}. When prefetch is set to false, prefetching will still occur on hover. Pages using Static Generation will preload JSON files with the data for faster page transitions. Prefetching is only enabled in production.

<Link href="/some-path" prefetch={false} />

Strange though, I didn't see, but I guess the logout page uses getServerSideProps or something like that?

[lambo81]

So according to the docs, "prefetching will still occur on hover.". So if the user's mouse hover's over then it still gets fetched. Actually the logout action happens in middleware, because that's the only way I can clear http only cookies--through the server. I assume if I had code in getServerSideProps the same thing would happen.

The docs also say "Prefetching is only enabled in production.", which is my it doesn't happen for me in dev.

Funny no one else experienced this issue and this isn't a well known thing to avoid with logging out. Am I doing logout in a weird way by handling cookie deletion server side? how else is it done?

[icyJoseph]

I use a form that points to api/logout and from there I can even make the browser follow my redirect, useful when using SSO providers that need you to navigate to a dummy domain.

The form uses the POST method and only has a submit button.

I'd argue that a logout link, is odd because I could right click on it and open it on another tab. What behaviour should we expect then? Users could also accidentally navigate to it, and it might even be indexed. If you wanted to logout a user, you could just share https://domain.com/api/logout and it'll do the same as a page.

const Logout = () => {
    return (
        <form
            method="POST"
            action="/api/logout"
            onSubmit={(ev) => {
                // show some UI flair or w.e.
                return ev;
            }}
        >
            <button type="submit">Get out</button>
        </form>
    );
};

[fdorantesm]

I have the same issue. I'm setting a cookie in an isolated API, in localhost the cookie is created succesfully but it doesn't work in vercel app. I'm using next version 12.5.

I set http only and secure cookie and all is working in secure environments.

[Aryan-Kohli]

Bhai solution Mila ?

[raselinfo]

have you found any solution?

[amitvishwa19]

Use POST route insted of GET route for logout, issue will be resolved

[lambo81]

so for me, it was a while since i got back into webdev. i was authorizing using GET instead of POST, and as a result the responses were cached with GET resulting in no cookie being set at all

[yusuf-9]

Thank you for sharing your solution. I had been stuck with this problem for a while but now after trying your solution, it has finally worked.

[LarissaDornelas]

@yusuf-9 @lambo81 Can you show how you did that?

[yusuf-9]

@LarissaDornelas I was trying to send an http-only cookie from the server to the client when the client was making a GET request to the server. However, this cannot be done because cookies cannot be sent to clients upon GET requests. The type of request ought to be a POST request. Only then would the cookie be sent to the client from the server.

[iamrosada]

have you found any solution?

[pierratono]

I had the same problem but once deployed both backend and client to use HTTPS it worked fine.
It seems like Vercel can't' allow credentials to be shared with localhost or non-secured protocol even when you enable it.

[amey09]

I'm facing similar yet strange issue. Even after correctly configuring cors to allow credentials in res, and my rtk query to include credentials. The COOKIE is being set only on my browser. If some other person tries to access it. He doesn't receive the cookie.

[michael777-3333]

have you found any solution?

[daniel-nagy]

This ended up being a caching issue for me as well. I was letting Vercel cache the page which was preventing the cookie from reaching my server if the cookie was set after the page was already cached.

[ntonjsgo]

Hi Daniel, how did you solve this? because I've the same same problem with a cookie consent external script and vercel is not setting the cookie

[amitvishwa19]

Use POST route insted of GET route for logout, issue will be resolved

[nbtmik]

guys , so if you are using cookies in production , need to change some of the things in the products code. given below
//creating token and saving in cookie
const sendToken = (user,statusCode,res)=>{
const token = user.getJWTTOKEN();
//options for cookie
const options = {
expires:new Date(
Date.now() + process.env.COOKIE_EXPIRE * 24 * 60 * 60 * 1000 // calucate in milisec
),
secure: true,//use this when the code is in production for https cookie request
httpOnly:true,
sameSite: 'None',//dealing with cross-site requests and the usage of third-party cookies
};
res.status(statusCode).cookie("token",token,options).json({
success:true,
user,
//token,
});
};

---

this thing should be their in the code and make sure both the client and server side code is in production
that's why we need to use this secure and samesite for Https protocols .
secure: true,//use this when the code is in production for https cookie request
httpOnly:true,
sameSite: 'None' //dealing with cross-site requests and the usage of third-party cookies

---

and also make sure the cors should be added in the backend code example given below-

app.use(cors({credentials: true,origin:${process.env.FRONTEND_URL},methods:['GET','POST','PUT','DELETE']})); // added by to avoid the cors related issue

[safi50]

this worked! thanks.

[ppreetii]

I did this thing for generating and using httpOnly Cookie

app.set('trust proxy', 1);
app.use(
cors({
origin: ["http://localhost:5173"],
credentials: true
})
);
app.use(helmet());
app.use(bodyParser.json());

app.use(
cookieSession({
signed: false,
secure: true, // false for localhost
sameSite: 'none' // 'lax' for localhost
})
);

[zezo1895]

My problem is that the browser sees that my cooike as third party cooike how can i solve it without change in browser setting

[AssafMeidan]

If you're hitting this issue — cookies work on localhost but disappear in production — check if you have a <Link href="/logout"> (or any link to a cookie-clearing route) in your layout/sidebar.

Root cause: Next.js <Link> prefetches its target on page load in production (not in dev). If the target is a GET route handler that clears cookies, the prefetch silently wipes your session before the user clicks anything. curl works fine because it doesn't prefetch.

The fix: Make logout POST-only (not GET). prefetch={false} is a band-aid — the proper fix is ensuring cookie-clearing routes are never GET, since GET must be idempotent.

// POST only — never GET
export async function POST(request: Request) {
  const res = NextResponse.redirect(new URL('/login', request.url), 303);
  clearSessionCookie(res);
  return res;
}

// <form> instead of <Link>
<form action="/logout" method="POST">
  <button type="submit">Logout</button>
</form>

Full write-up with debugging timeline: #60581 (comment)