Debugging "checks.state argument is missing" error AUTH0

Question

I just deployed my new NextJs blog application https://blog.devdeveloper.ca/ to Vercal and I am having trouble getting auth0 to work. When clicking on the login button on the top right of the screen, users are redirected to auth0 to complete the authentication flow.

On redirect back to my app after authenticating, I receive an error (checks.state argument is missing) and I can't seem to find where it is happening.

the error

I came across this article describing an update made by google chrome in 2020 for the sameSite attribute. It seems it may have something to do with it because in my console I get the following warnings.

sameSite attribute errors

I am wondering if there are some configuration options that I may be missing in my login handler.

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';

export default handleAuth({
    async login(req, res) {
        try {
            await handleLogin(req, res, {
                authorizationParams: {
                    audience: `http://localhost:5000/`, // or AUTH0_AUDIENCE
                    // Add the `offline_access` scope to also get a Refresh Token
                    scope: 'openid profile email create:category delete:category update:category create:post update:post delete:post create:comment delete:comment', // or AUTH0_SCOPE
                    response_type: "code"
                },

            });

        } catch (error) {
            res.status(error.status || 400).end(error.message);
        }
    }
});

Maybe I am overlooking something completely obvious.

Answer 1

I had the same issue.

For me this error occured only sometimes. I was not able to find the solution, but I found a workaround.

Like said, this error occured really randomly, so I just added a custom handler for redirect callbacks that redirects user to / when this error occurs.

Here's my pages/api/auth/[...auth0].js file:

import auth0 from 'src/util/auth0'

export default auth0.handleAuth({
  // other stuff here...
  async callback(req, res) {
    try {
      await auth0.handleCallback(req, res)
    } catch (error) {
      res.redirect('/')
    }
  }
})