`req.session.destroy()` does not remove cookies with the latest version of NextJS when hosting on Vercel

Question

`req.session.destroy()` does not remove cookies with the latest version of NextJS when hosting on Vercel

dpyzo0o opened this issue 4 years ago · 17 comments

Hi, I have come across a very annoying bug recently. If you upgrade nextjs to the latest version, which is 10.0.3, and deploy the application on Vercel, the method req.session.destroy() does not remove the cookies.

Here is a repo to reproduce this issue, it's just a redeployment of the next-icon-session's nextjs example but with nextjs upgraded to 10.0.3.

Steps to reproduce:

login
logout (first time it will succeed with a 200 return)
login again
logout (this time it will fail to remove the cookie with a 304 return)

next-iron-session's nextjs example:

after upgrading nextjs to 10.0.3:

Additional information: This issue only happens when deploying on vercel, it works correctly when I run it locally.

Edit: After downgrading nextjs to 10.0.0, it works correcly on vercel.

Answer 1 · 2020-12-09T13:26:50.000Z

Thanks for the detailed bug report and first analysis.
The failing version is 10.0.2. Now we need to:

understand if they fixed a bug, which in turn made our code buggy (and we should update our code)
or if they introduced a bug (and we need to find it, and they/we need to fix it)
find/identity the right change here: https://github.com/vercel/next.js/releases/tag/v10.0.2
or maybe the change in on the Vercel platform itself

I am doing some tests right now, let me know how it goes on your side

Answer 2 · 2020-12-09T13:41:33.000Z

More info on the issue: this is because of the caching mechanism. Now why has it changed on the latest Next.js versions: I don't know and I think you should write to the Vercel support to know more.

A possible workaround for now would be to manually set caching headers (informing not to cache) on all your API routes that are setting up cookies like login and logout.

Answer 3 · 2020-12-09T13:45:20.000Z

More info on the issue: this is because of the caching mechanism. Now why has it changed on the latest Next.js versions: I don't know and I think you should write to the Vercel support to know more.

A possible workaround for now would be to manually set caching headers (informing not to cache) on all your API routes that are setting up cookies like login and logout.

I have tried to manually set the headers res.setHeader('cache-control', 'public, max-age=0, must-revalidate') and it does not seem to work. I'm not an expert on the http caching so I don't know if I'm doing the right way...

Answer 4 · 2020-12-09T14:14:18.000Z

This might be the related change https://github.com/vercel/next.js/pull/18986/files

Answer 5 · 2020-12-09T14:51:28.000Z

Hey there @dpyzo0o there's definitely something strange that changed between Vercel/Next.js, in the meantime you can set res.setHeader("cache-control", "no-store, max-age=0"); on your logout route and that should do it, even on Vercel.

Let me know!

Answer 6 · 2020-12-09T15:13:29.000Z

@vvo Thanks, it works.

Answer 7 · 2020-12-09T15:40:52.000Z

@dpyzo0o I just updated the next-iron-session repository and now recommend another solution: just make sure to call any route that uses destroy via a POST request. Most proxies and browsers (100%?) will never cache POST requests unless badly or weirdly configured.

The two solutions have the same effect, but using POST for logout is more common practice I think.

Thanks!

Answer 8 · 2021-02-10T09:35:20.000Z

🎉 This issue has been resolved in version 4.1.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

Answer 9 · 2021-02-11T20:54:37.000Z

🎉 This issue has been resolved in version 4.1.11 🎉

The release is available on:

npm package (@latest dist-tag)

GitHub release

Your semantic-release bot 📦🚀

Everything works on:
Google Chrome Version 88.0.4324.150 (Official Build) (64-bit) with
"next": "^10.0.6",
"next-iron-session": "^4.1.11"
on development and production on Vercel. Also sometimes it takes two clicks to login.

Does not work on Vercel with:
Firefox 85.0.2 (64-bit);
Firefox developer edition 86.0b8 (64-bit);

Answer 10 · 2021-02-11T21:24:34.000Z

hey @Deivaras I believe this notification was long due sorry about that.

Are you using POST requests for logout routes now? I do have that double clicks to logout issue yup, did not investigate (not login though, login is always OK).

Answer 11 · 2021-02-12T08:31:37.000Z

hey @Deivaras I believe this notification was long due sorry about that.

Are you using POST requests for logout routes now? I do have that double clicks to logout issue yup, did not investigate (not login though, login is always OK).

Yes, I'm doing POST request on logout fetch and also on Chrome sometimes when trying to login (after first click) I see the cookie and then you have to click login the second time, while cookie being replaced and only then you got logged in.
`

} onClick={async (e) => { e.preventDefault(); await mutateUser(fetchJson('/api/logout'), { method: 'POST' }); }} > Logout `

Answer 12 · 2021-02-16T21:46:18.000Z

Hey there, I believe this is now fixed, have a look at the updated example: 7ffc8bb

I cannot reproduce this bad behavior anymore.

Answer 13 · 2022-07-27T20:09:58.000Z

Facing this issue now.

import { NextApiRequest, NextApiResponse } from 'next';
import { withSessionRoute } from '@utils/iron-router';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    req.session.destroy();
    res.send({ ok: true });
};

export default withSessionRoute(handler);

We receive ok response but the session isn't destroyed when we try another api route straight after. Locally this works fine. On Vercel it doesn't for some reason.

Answer 14 · 2022-07-28T00:46:21.000Z

Changing my endpoint to POST seems to have fixed it now

Answer 15 · 2022-08-16T16:36:31.000Z

work out with this

// ...
await new Promise<void>((resolve, reject) => {
      req.session.destroy((err) => {
        if (err) {
          reject(err)
        } else {
          res.clearCookie('ACCESS_TOKEN', {
            domain: '.xxx.com'
          })
          res.clearCookie('REFRESH_TOKEN', {
            domain: '.xxx.com'
          })
          res.clearCookie('connect.sid', {
            domain: '.xxx.com'
          })

          resolve()
        }
      })
    })
// ...

Answer 16 · 2023-03-06T14:29:06.000Z

The problem is not solved yet?!

UPDATE:
the request should be POST to solve the problem.

Answer 17 · 2023-04-13T00:13:00.000Z

Version 13:
After 3 hours, changing the request to POST solved the problem. Shouldn't this have been more explicit?