Next-auth: Keep getting invalid state for Github

[weyert]

Your question
I am wondering what I am doing wrong, each time when I try to sign into my application using GitHub OAuth I am getting the oAuthCallback-error back in the application logs it suggests invalid state or code. Only I am not sure why

What are you trying to do
I am trying to add Next Auth.js to my application using GitHub only it's not working. I have copied the [...nextAuth].js file from the nextauthjs-example-repository. I have checked that environment variables are correctly loaded and have the expected client id and client secret for my GitHub OAuth app.

My steps:

• Click on Sign in with GitHub button
• GitHub application consent screen shows up
• GitHub redirects back to my application using the following url: https://domain.com/api/auth/callback/github
  This redirect url that GitHub generates has has for state-query parameter the same value that NextAuthjs used for the authorise url
• NextAuthjs receives then in this endpoint redirects me to https://domain.com/api/auth/error?error=oAuthCallback

What am I doing wrong? Do I have something misconfigured?

2020-09-02T11:54:35.333652091Z [next-auth][error][callback_oauth_error] Error: Invalid state returned from oAuth provider 2020-09-02T11:54:35.334625656Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:46:27 
2020-09-02T11:54:35.334643224Z at Generator.next (<anonymous>) 
2020-09-02T11:54:35.334652461Z at asyncGeneratorStep (/app/node_modules/next-auth/dist/server/lib/oauth/callback.js:26:103) 
2020-09-02T11:54:35.334660647Z at _next (/app/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:194) 2020-09-02T11:54:35.334668432Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:364 2020-09-02T11:54:35.334676358Z at new Promise (<anonymous>) 
2020-09-02T11:54:35.334684131Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:97 
2020-09-02T11:54:35.334691717Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:143:17 
2020-09-02T11:54:35.334699495Z at /app/node_modules/next-auth/dist/server/routes/callback.js:58:31 
2020-09-02T11:54:35.334707086Z at Generator.next (<anonymous>)  
2020-09-02T11:54:35.334714901Z https://next-auth.js.org/errors#callback_oauth_error 
2020-09-02T11:55:42.985580265Z [next-auth][error][callback_oauth_error] Error: Invalid state returned from oAuth provider 2020-09-02T11:55:42.985660897Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:46:27 
2020-09-02T11:55:42.985671530Z at Generator.next (<anonymous>) 
2020-09-02T11:55:42.985680560Z at asyncGeneratorStep (/app/node_modules/next-auth/dist/server/lib/oauth/callback.js:26:103) 
2020-09-02T11:55:42.985688649Z at _next (/app/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:194) 
2020-09-02T11:55:42.985696543Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:364 
2020-09-02T11:55:42.985704220Z at new Promise (<anonymous>) 
2020-09-02T11:55:42.985789502Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:97 
2020-09-02T11:55:42.985796001Z at /app/node_modules/next-auth/dist/server/lib/oauth/callback.js:143:17 
2020-09-02T11:55:42.985800349Z at /app/node_modules/next-auth/dist/server/routes/callback.js:58:31 
2020-09-02T11:55:42.985804681Z at Generator.next (<anonymous>)  
2020-09-02T11:55:42.985809012Z https://next-auth.js.org/errors#callback_oauth_error

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• [ ] Found the documentation helpful
• [ ] Found documentation but was incomplete
• [X] Could not find relevant documentation
• [X] Found the example project helpful
• [ ] Did not find the example project helpful

[iaincollins]

Hmm this works on the example site.

The format of your callback URL looks right, so I'd double check the Client ID and Client Secret for GitHub.

Is this happening locally or in production or both?

You should be able to get it running on locahost too, but the way GiHub OAuth works, you'll need to create a second application to test locally (with a localhost callback URL and different ID/Secret) as unlike most providers, you can't specify multiple callback URLs on GitHub.

[weyert]

I have tried it out looks locally now and it's working fine but fails on the internet.
I am wondering if something gets removed from the query string on the way reaching my Next.js application. I will have to do some digging. Need to find a way to easy dump all headers and query parameters of incoming requests.

Thanks for helping me :)

[iaincollins]

Ah no worries, if it's working locally that's good!

I could guess it's possibly the ID / Secret values, maybe missing a character or something (or extra whitespace like a space at the end after copy/pasting). If deploying to Vercel you could try deleting them and re-adding the environment variables in the control panel. I always manage to do this somehow, even though I try to be super careful.

[weyert]

I will try to hard-code the values first :))

[weyert]

Got it working, sadly, not sure what did the trick

[timcash]

Having the same problem. Works locally, have two oauth applications on github one for local and one for production. Not really sure how to debug this. I set debug to true but the logs on vercel only give me minimal information. Already tried resetting the env a few times.

[timcash]

looks like it adds some spaces in front of the key and secret, paste them into a text editor first and remove.

[iaincollins]

Thanks for the follow up!

I almost wonder if we should trim() them or warn if they are found as it's such an annoying thing and common to trip up on.