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

Checklist

• The issue can be reproduced in the sample app (or N/A).
• I have looked into the README and have not found a suitable solution or answer.
• I have looked into the examples 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

Hi there,

Having issues deploying nextjs-auth0 to deployment on Vercel.

On the /callback phase, I’m receiving a 400 ERROR CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).. This does not happen when I run the app in development mode on a local server.

I looked into the issue and it seems like it’s similar to the checks.state argument is missing error found in an older API version. None of the solutions worked.

The app is set up using the exported name handleAuth. I followed the instructions on the Next.js docs, including the README on deploying a sample app on Vercel, browsed the API docs to see if creating a custom auth0 instance would help, but was not able to find a solution.

We don’t have a custom domain, so the base URL is set to https://my_app.vercel.app/ I am not using any development or preview deployments.

All env vars appear to be set correctly:

AUTH0_SECRET=
AUTH0_BASE_URL=https://my_app.vercel.app
AUTH0_ISSUER_BASE_URL=
AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=
AUTH0_SCOPE=openid email profile
AUTH0_AUDIENCE=

The error from Vercel Function Logs

[GET] /api/auth/callback?code=ABC&state=EFG

info  - Loaded env from /var/task/frontend/.env.production
2023-02-12T06:37:40.878Z	94461eef-0f3c-4191-81ce-1c1217fd93b0	ERROR	CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
    at CallbackHandlerError.AuthError [as constructor] (/var/task/frontend/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:34:16)
    at CallbackHandlerError.HandlerError [as constructor] (/var/task/frontend/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:110:23)
    at new CallbackHandlerError (/var/task/frontend/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:138:28)
    at /var/task/frontend/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:42:31
    at step (/var/task/frontend/node_modules/tslib/tslib.js:193:27)
    at Object.throw (/var/task/frontend/node_modules/tslib/tslib.js:174:57)
    at rejected (/var/task/frontend/node_modules/tslib/tslib.js:165:69) {
  code: 'ERR_CALLBACK_HANDLER_FAILURE',
  cause: MissingStateCookieError: Missing state cookie from login request (check login URL, callback URL and cookie config).
      at new MissingStateCookieError (/var/task/frontend/node_modules/@auth0/nextjs-auth0/dist/auth0-session/utils/errors.js:39:16)
      at /var/task/frontend/node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:30:63
      at step (/var/task/frontend/node_modules/tslib/tslib.js:193:27)
      at Object.next (/var/task/frontend/node_modules/tslib/tslib.js:174:57)
      at fulfilled (/var/task/frontend/node_modules/tslib/tslib.js:164:62) {
    expose: true,
    statusCode: 400,
    status: 400
  },
  status: 400
}

Thanks! Let me know if I’m doing anything wrong.

Reproduction

1. Deploy app on Vercel
2. Apply the environment variables specified in the docs. Use the preassigned production URL as the AUTH0_BASE_URL
3. Re-deploy site to apply new env vars
4. Visit Production site and sign in
5. Sign in with Google
6. User is redirected to /api/auth/callback with a HTTP 400 error

SDK version

2.2.1

Next.js version

13.1.6

Node.js version

18.13.0