nextjs-auth0: CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie

Checklist

Description

Getting the now infamous:

CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
    at /Users/jamessherry/sites/auth0-base-case/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:74:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Users/jamessherry/sites/auth0-base-case/node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:79:13 {
  code: 'ERR_CALLBACK_HANDLER_FAILURE',
  cause: MissingStateCookieError: Missing state cookie from login request (check login URL, callback URL and cookie config).
      at /Users/jamessherry/sites/auth0-base-case/node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:17:19
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async /Users/jamessherry/sites/auth0-base-case/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:71:16
      at async /Users/jamessherry/sites/auth0-base-case/node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:79:13 {
    status: 400,
    statusCode: 400
  },
  status: 400
}

Reproduction

Demo Repo

bare bones version of the sample app: (https://github.com/jmsherry/auth0-base-case) CodeSandbox (using that repo): https://codesandbox.io/p/github/jmsherry/auth0-base-case/draft/festive-dan?file=/.env.local:7,21&workspaceId=a7a0b083-be25-46b2-a16c-f0ff761d57bf

Steps

  1. Follow the documentation and create a project
  2. Wire it up to an auth0 instance of a regular web app (as per ^^ documentation)
  3. Go to the login route
  4. Get 400 (and confirm that on the Auth0 side login was successful)

Additional context

My ticket on the help forums: https://community.auth0.com/t/missing-state-cookie-from-login-request-yes-another-one/115032 (details of versions and debug attempts can be found there)

There are plenty of other tickets too:

(There are lots of ‘it just fixed itself’ which suggests to me a reload triggering cookies to be cleared or reset for a domain.)

nextjs-auth0 version

3.1.0

Next.js version

13.4.19

Node.js version

18.1.0

About this issue

  • Original URL
  • State: closed
  • Created 10 months ago
  • Comments: 35 (9 by maintainers)

Most upvoted comments

Yep - @jmsherry - apologies, I never tested your app in Node v18.1.0 (I was using v18.17). I’ve tested your application in 18.1.0 and can reproduce the issue. The issue is a problem with Next.js (I think more specifically it’s this issue https://github.com/nodejs/undici/issues/1262 that is affecting Next.js). You can’t set cookies in api routes in Next with Node 18.0.0 - 18.2.0 (18.3.0 works)

You can confirm this by creating a simple API route and observing that the response does not include the set cookie header, eg

// pages/api/hello.js
export default function handler(req, res) {
  res.setHeader('Set-Cookie', 'foo=bar')
  res.status(200).json({ name: 'John Does' })
}

The response of /api/hello doesn’t have a Set-Cookie header when running on Node v18.2.0, but does have the correct Set-Cookie header when running on Node v18.3.0 (which includes @nodejs/undici@5.4.0 - which includes https://github.com/nodejs/undici/issues/1262)

Will see if I can raise a bug on Next.js or at least add an advisory to this SDK

I had the same issue, but I fixed it by upgrading from Node 18.0.0 to 20.6.1

For the record, here’s the behavior I observed:

  • From the chrome network tab, it was clear that the login handler is not setting the auth_verification cookie, so there was no way for the callback handler to pick it up
  • Tracing through the code, it was clear that the loginHandler was adding auth_verification to the returned NextRequest, but that did not result in a Set-Cookie header being added - the SendRequest method was ignoring the cookie collection
  • I suspect the production build behavior may have been different, but I was not able to build my app locally, that’s what led me to realize Node was the problem. But it would also explain why only local development was affected

Just posting here in case it helps - upgrading node was the fix for me

Will close - thanks for raising this @jmsherry!

From my testing, this looks like it was fixed in next@13.4.20-canary.24 (although I can’t see anything that might suggest this in the changelog https://github.com/vercel/next.js/releases/tag/v13.4.20-canary.24)

So the affected Node/Next combinations are:

Node 18.0.0-18.3.0 (19.6.1 throws error when you try to set cookies)
Next 13.4.13-13.4.20-canary.23

Works on node 18.17.1 (latest LTS as of now) but fails with reported error on 18.2.0 (what I had on hand). Also works on 20.x.y as suggested.

thanks @jmsherry for reporting this and @pkpjpm a solution.

@pkpjpm Thank you!

Yes, I just realised why mine worked and then didn’t (a reset of terminal changed my node version back to 18). Odd thing is that on vercel it runs on 18 (although I’ve not dared log out!).

I’ve also switched to turbopack to avoid the Ensure error listed above!

Hey, I reproduced the nextjs-auth0 sample app, but it seems to work fine on my end. I see that problem on your end started occurring after adding middleware. Can you provide the code you think caused this issue?

Probably unrelated, but getSession in middleware in one of my projects was deleting cookies, so looking at getSession and utilizing the response from it might help.