CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config)

[exchai93]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

To continue from my comment in this closed issue .

Using firebox, I am getting this consistent error locally when starting the server and navigating to the root login page.
When inspecting the login request there are items missing from the state cookie as seen in the attached HAR file, specifically cookies, the nonce, state, code_verifier. I have a HAR file to supply but not able to attach it here as its not a supported type?

• auth0 env variables are all correct

Tried fixes:

• Deleting node modules and installing all packages again
• Restarting laptop

Reproduction

1. Start server and navigate to the root - http://localhost:3000/ which redirects to callback url http://localhost:3000/api/auth/callback?code=U9L4nV-14qfV2WeHlkDLHiAQVmtIwXNMOAZZp45mz-IsS&state=eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC8ifQ
2. Page does not render - we expect to see the auth0 tenant. There is this error in the server logs

CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
    at CallbackHandlerError.AuthError [as constructor] (/Users/emilychai/platform-frontend/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:34:16)
    at CallbackHandlerError.HandlerError [as constructor] (/Users/emilychai/platform-frontend/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:110:23)
    at new CallbackHandlerError (/Users/emilychai/platform-frontend/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:138:28)
    at /Users/emilychai/platform-frontend/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:49:31
    at step (/Users/emilychai/platform-frontend/node_modules/tslib/tslib.js:195:27)
    at Object.throw (/Users/emilychai/platform-frontend/node_modules/tslib/tslib.js:176:57)
    at rejected (/Users/emilychai/platform-frontend/node_modules/tslib/tslib.js:167:69)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'ERR_CALLBACK_HANDLER_FAILURE',
  cause: MissingStateCookieError: Missing state cookie from login request (check login URL, callback URL and cookie config).
      at new MissingStateCookieError (/Users/emilychai/platform-frontend/node_modules/@auth0/nextjs-auth0/dist/auth0-session/utils/errors.js:39:16)
      at /Users/emilychai/platform-frontend/node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:30:63
      at step (/Users/emilychai/platform-frontend/node_modules/tslib/tslib.js:195:27)
      at Object.next (/Users/emilychai/platform-frontend/node_modules/tslib/tslib.js:176:57)
      at fulfilled (/Users/emilychai/platform-frontend/node_modules/tslib/tslib.js:166:62)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    expose: true,
    statusCode: 400,
    status: 400
  },
  status: 400
}

Try calling localhost:3000/api/auth/logout and back to localhost:3000/ but the error consistenly persists

Additional context

• When I visit an incognito window in firefox, the page loads however the issue still occurs when I try to log in.

• In chrome the page immediately shows an ereror

• The packages I added prior to getting these errors

"@mui/base": "^5.0.0-alpha.87",

"@mui/system": "^5.14.7",

"@mui/x-date-pickers": "^6.12.1",

nextjs-auth0 version

2.7.0

Next.js version

13.0.0

Node.js version

18.1.0

[exchai93]

When reverting to a previous commmit it seems that things work again. The key changes were the addition of material ui packages and day.js

"@mui/base": "^5.0.0-alpha.87",

"@mui/system": "^5.14.7",

"@mui/x-date-pickers": "^6.12.1",

[exchai93]

Update: downgrading to node v16.16.0 fixed this