Nextjs-auth0: "state mismatch" on nextjs example

[kylemac]

Description

When attempting to follow the directions in the nextjs auth0 example readme.md (link), i get a state mismatch error locally. i've verified that all the credentials in my .env are appropriate and up-to-date, and i still receive the error.

it seems like there was a recent fix that centered around a similar error where that user saw it resolve their issues, however i'm still seeing state mismatch error persisting. (reference to previous issue) that @sandrinodimattia addressed.

Reproduction

• npx create-next-app --example auth0 auth0
• cd auth0
• npm install
• cp .env.template .env
• fill in the details for the ENV variables with the data from the auth0 dashboard
• npm run dev
• open localhost:3000
• click on "login" link in top nav
• use google auth to login (same issue with github auth - haven't tried all others)
• land on /api/callback?code=XXX&state=XXX and see state mismatch error in view

Environment

• "@auth0/nextjs-auth0": "0.4.0", per example repo - same issue persisted with 0.5.0.
• mac / chrome:
• package.json...

{
  "name": "nextjs-auth0-example",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@auth0/nextjs-auth0": "0.4.0",
    "dotenv": "^8.1.0",
    "isomorphic-unfetch": "^3.0.0",
    "next": "latest",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

[sandrinodimattia]

I just tried all steps you described and everything worked as expected:

Could you verify the following:

1. When the user is redirect to /api/login, what state is being returned in the cookie?

1. What state is persisted in the cookie?

1. When the user is redirected from Auth0 to /api/callback, what state is being returned there?

They should all be the same. If that is not the case in your case we need to take it from there and understand why that is.

[kylemac]

@sandrinodimattia - i re-ran the following steps and the same issue is occurring for me 🤷‍♂️

1. screenshot - the cookie state on /api/login is a0:state=lTyeiey8EZh5Q4TSsP5HkX-hK8vthCf7p_ZrMVGZQwBKbJiDBHo236I9j5f6qbM7

2. screenshot - the persisted cookie state is: lTyeiey8EZh5Q4TSsP5HkX-hK8vthCf7p_ZrMVGZQwBKbJiDBHo236I9j5f6qbM7 same as #1

3. screenshot - the persisted cookie on /api/callback is lTyeiey8EZh5Q4TSsP5HkX-hK8vthCf7p_ZrMVGZQwBKbJiDBHo236I9j5f6qbM7 which is the same as #1 & #2

maybe another thing to mention is that the /api/callback?code=XXX request 500's (screenshot).

[kylemac]

for what it's worth, i noticed there were some small differences between your personal example (https://github.com/sandrinodimattia/nextjs-auth0-example.git) and the zeit/nextjs example (https://github.com/zeit/next.js/tree/master/examples/auth0) so i tried setting up your personal example and still got the state mismatch error.

[kgoggin]

FWIW I'm seeing the same issue @kylemac describes, with a pretty much identical setup. I first followed the instructions in the README to set up my existing nextjs app, and then tweaked it to match the example app - in both scenarios I get the state mismatch error.

[sandrinodimattia]

@kylemac @kgoggin I still haven't been able to reproduce this issue.

Would it be possible to show the following for /api/login and /api/callback:

• The full URL
• The request and response cookies
• The persisted cookie under application state

[sandrinodimattia]

Can you also test signing in here: https://nextjs-auth0-demo.now.sh/

Does that work for you or are you getting the same error?

[sandrinodimattia]

To speed things up you can also record a HAR file and send it to me at sandrino at auth0.com. Please make sure to reproduce this issue with non-production credentials since the HAR file will record every step of the sign in process.

[kylemac]

@sandrinodimattia signing in with this demo worked: https://nextjs-auth0-demo.now.sh/

Additionally, I had filed a support request with support.auth0.com and sent along a HAR file there. the ticket number is #00440286. I'd love if you could take a look because I believe the most recent response had an idea as to what is causing the issue and at first glance it was at the library-level, not at my implementation level.

[sandrinodimattia]

@kylemac thanks for the update. I reached out to my colleague who worked on the ticket and he mentioned that you are actually using a custom domain. When that is the case, you should use that in the domain setting.

So instead of:

export default initAuth0({
  domain: 'acme.auth0.com',
  clientId: '<AUTH0_CLIENT_ID>'

You need to use the custom domain:

export default initAuth0({
  domain: 'login.acme.com',
  clientId: '<AUTH0_CLIENT_ID>'

(This just serves as an example, replace it with your actual custom domain).

Let me know if that helps.

[sandrinodimattia]

I also updated the guidance here: https://github.com/auth0/nextjs-auth0/commit/afaca845573a47c8980307e59570712abfc0f72d

[ian-speers]

Closing as done — please feel free to re-open this, or create a new issue if you need anything else. Thanks for your contribution!

[mkhoussid]

I'm not sure if this would help someone coming here in the future, but after hours of bashing my head, trying to figure out why I was able to login with Gmail but not Facebook, Github, etc, I entered https://dev-tenant99.geo.auth0.com/login/callback as my callback URL for Facebook and Github, and it started working. Might've been wrong on my part, but I understood the docs to be saying, 'Enter http://localhost:3000/api/callback (or https://YOUR-app.com/api/callback) as the callback URL', when I was supposed to be indicating my above tenant callback URL.