Missing state cookie from login request

[subnetmarco]

I am currently getting the following error (Node v18.15.0, Next.js v13.1.0).

[0] CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
[0]     at CallbackHandlerError.AuthError [as constructor] (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:34:16)
[0]     at CallbackHandlerError.HandlerError [as constructor] (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:111:24)
[0]     at new CallbackHandlerError (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:140:28)
[0]     at Object.<anonymous> (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:42:31)
[0]     at step (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:144:27)
[0]     at Object.throw (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:125:57)
[0]     at rejected (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:116:69)
[0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[0]   code: 'ERR_CALLBACK_HANDLER_FAILURE',
[0]   cause: MissingStateCookieError: Missing state cookie from login request (check login URL, callback URL and cookie config).
[0]       at new MissingStateCookieError (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/auth0-session/utils/errors.js:39:16)
[0]       at Object.<anonymous> (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:30:58)
[0]       at step (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:144:27)
[0]       at Object.next (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:125:57)
[0]       at fulfilled (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:115:62)
[0]       at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[0]     expose: true,
[0]     statusCode: 400,
[0]     status: 400
[0]   },
[0]   status: 400
[0] }

[adamjmcgrath]

Hi @subnetmarco - thanks for raising this

This is caused when the /callback page can't access the cookie dropped by the /login page. You should check that the login url's host/protocol matches the callback url's host/protocol, that you haven't set a restrictive cookie option or your browser isn't configured to have restrictive cookie options.

If you want to share a HAR file (secrets redacted) I could probably tell you what it is

[subnetmarco]

To clarify, this error happens with the current codebase, after a fresh git clone. The only changes I have done are:

• Renaming .env.local.example to .env.local
• Adding the following properties to the file:

AUTH0_SECRET='REDACTED'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='REDACTED'
AUTH0_CLIENT_ID='REDACTED'
AUTH0_CLIENT_SECRET=REDACTED'
AUTH0_AUDIENCE='REDACTED'
AUTH0_SCOPE='openid profile email'

And yarn install && yarn dev.

[subnetmarco]

You should check that the login url's host/protocol matches the callback url's host/protocol

@adamjmcgrath this was the problem.

I was debugging my local application on 127.0.0.1:3000 while the callback URL configured on Auth0 was localhost:3000. Sure enough after switching locally to localhost:3000 everything works properly.