Login attempt with GoogleProvider in next-auth returns OAUTH_CALLBACK_ERROR and message: checks.state argument is missing

Question

I'm on a project for my JS FullStack course and I'm running into some issues with Google Provider of next-auth (version 4.18.8).

Everything worked fine ONE SINGLE TIME this morning. After successfuly login with google provider and use "useSession()" to get the Google credentials in a console.log, I committed everything and went to the gym. After I get back (and took a shower, of course), I was going to get those google credentials to show the user name on the page's header, but to my surprise I started getting this callback error.

FYI, env.local is correcty setup with GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET. I even deleted my credentials on Google and created another one to test, but no luck.

When trying to login, I get this error:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing {
  error: TypeError: checks.state argument is missing
      at Client.callback (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\openid-client\lib\client.js:387:13)
      at oAuthCallback (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next-auth\core\lib\oauth\callback.js:127:29)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)    
      at async Object.callback (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next-auth\core\routes\callback.js:52:11)
      at async AuthHandler (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next-auth\core\index.js:201:28)
      at async NextAuthHandler (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next-auth\next\index.js:23:19)
      at async C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next-auth\next\index.js:59:32
      at async Object.apiResolver (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next\dist\server\api-utils\node.js:363:9)
      at async DevServer.runApi (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next\dist\server\next-server.js:487:9)
      at async Object.fn (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next\dist\server\next-server.js:749:37)
      at async Router.execute (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next\dist\server\router.js:253:36)
      at async DevServer.run (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next\dist\server\base-server.js:384:29)
      at async DevServer.run (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next\dist\server\dev\next-dev-server.js:741:20)
      at async DevServer.handleRequest (C:\João\Dropbox\Pessoal\Projetos Webdesign\trading-center\node_modules\next\dist\server\base-server.js:322:20) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'checks.state argument is missing'

There are some things I noticed after clicking in my Google account, on Network tab of my DevTools:

First, it will make a request that returns status code 302 on "consent?authuser=0&part=......." After that, another request to "google?state=......" returns 302 also. Then I get an error on request to http://127.0.0.1:3000/api/auth/error?error=OAuthCallback also with 302 status code. Finally, I get an error on request to http://127.0.0.1:3000/api/auth/signin?error=OAuthCallback that returns 404

I don't understand this very much, but I'm pretty sure I was not meant to get a 302 error on those requests.

Here's my code.

I have a button that calls this function:

const handleGoogleLogin = async () => {
    await signIn('google', {
        redirect: true,
        callbackUrl: 'http://127.0.0.1:3000/user/dashboard'
    })
}

My [...nextauth].js file:

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    })

  ],

  session: {
    strategy: "jwt",
  }, 

  jwt: {
    secret: process.env.JWT_TOKEN
  },

  adapter: MongooseAdapter(process.env.MONGODB_URI),

}
export default NextAuth(authOptions)

See entire code in my GitHub.

Feel free to ask me any more questions if you feel the need.

Greatly appreciated.
João Textor

Answer 1

Fixed.

callbackUrl should not be like this 'http://127.0.0.1:3000/user/dashboard, but like this: '/user/dashboard'

Simple fix, simple mistake, A LOT OF HEADACHE!