ERR_CALLBACK_HANDLER_FAILURE

zgababa commented 1 year ago

Checklist

[X] I have looked into the Readme and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] I agree to the terms within the Auth0 Code of Conduct.

Description

Hello,

I download the sample configured with my application setting https://auth0.com/docs/quickstart/webapp/nextjs/01-login?download=true

SignIn/Login work, but when I'm redirected I receive

CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
[0]     at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:60:19)
[0]     at async eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:59:24)
[0]     at async /Users/fabien/Downloads/sample-01/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:1:66877 {
[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 eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:19:19)
[0]       at async eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:57:13)
[0]       at async eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:59:24)
[0]       at async /Users/fabien/Downloads/sample-01/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:1:66877 {
[0]     status: 400,
[0]     statusCode: 400
[0]   },
[0]   status: 400
[0] }

I had the same problem when I follow the tutorial https://auth0.com/docs/quickstart/webapp/nextjs/01-login?download=true, with my own code (no the sample), with Google Chrome (+ incognito mode) + Safari.

My .env.local is properly configured, as my application setting ; ALLOWED_CALLBACK: http://localhost:3000/api/auth/callback

I checked this issue https://github.com/auth0-samples/auth0-nextjs-samples/issues/112

But my urls, starts always by http://localhost:3000/

I attached an HAR file.

chromewebdata.har.zip

Thank you, to explain me what I missed !

Reproduction

Run npm run dev
Login on http://localhost:3000
Fail on /api/auth/callback with 400

Additional context

No response

jLynx commented 1 year ago

I am having the exact same issue, I can login but then it fails on the callback. I also checked #112, but sadly that did not help

zgababa commented 1 year ago

Hey !

I think I found a fix, I just updated node to the latest version, I upgraded it from 18.0.0 to 18.18.0.

Hope @jLynx that will work for you !

jLynx commented 1 year ago

@zgababa still not solved for me. I am on version 20.5.1. Are you able to please re open this issue? Edit: Just updated to v20.7.0 and still having this issue.

zgababa commented 1 year ago

Ok, I re open. Btw I changed also my localhost:3000, to an host (example.local.io:3000), not sure if it could work because the nodejs bumped was the fix for me.

In addition if you downgrade to v18.8.0 do you have the same problem ?

grandrepublic commented 1 year ago

I ran into this issue following the Nextjs Quickstart guide for an existing project and with the sample app. Upgrading to Node v18.18.0 fixed the issue in both cases (I was using v18.1.0). I think the only spot I saw where it mentions upgrading to the latest LTS release is if you choose to download the preconfigured sample application. It might be helpful to include it in the Quickstart guide for those that are using their own project.

auth0-samples / auth0-nextjs-samples