nextjs-auth0: Bad error handling - `checks.state argument is missing`

Describe the problem

Error handling doesn’t seem that graceful - simply ending up on a blank page on /callback that just says checks.state argument is missing.

What was the expected behavior?

Probably needs to be passed back to some sort of error handling

Reproduction

Disable signups in Auth0
Add api following api route called /signup:

import { handleLogin } from '@auth0/nextjs-auth0';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function registerHandler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  handleLogin(req, res, {
    authorizationParams: {
      screen_hint: 'signup',
    },
  });
}

Go to /api/signup

Environment

Version of this library used: 1.2.0
Which framework are you using, if applicable: next.js
Other modules/plugins/libraries that might be involved:
Any other relevant information you think would be useful:

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (6 by maintainers)

Most upvoted comments

We were given a bug report and, while trying to reproduce that bug report, were able to land on this page frequently when visiting it through a stale auth callback link (/api/auth/callback?code=_____&state=_____). We are not sure how/why the reporter kept visiting the auth link, just that they did. Googling for “checks.state argument is missing” was very unhelpful and did not lead us to the right solution, or to documentation for customizing the error handler.

It was NOT clear that this was the default error handler <-- this is the crux of the issue.

Suggestion for improved experience

In development: A React Overlay style error message would help a lot. When NODE_ENV != production, we should see a default error handling template. The template should state clearly that it is a template, and that the error originated deep in the stack. It would be amazing to show the stack itself and provide more info.

See screenshot below from React.

In production: Using Auth0’s own styling, but with the user’s organization’s logo (if set), simply explain that an unknown error has occurred. This will save face for many service firms like ours who are using Auth0.

I hope this helps 😃

monarchwadia on Jul 12, 2021

Hi guys. Thank you for making an awesome service.

Just some developer experience feedback, and how this issue impacted us. I don’t know how many developers this affects, or how much it impacts others.

A client pointed out this issue on their app . It took my team ~7 days and 2 developers (on-and-off… so total maybe 10 hours to 20 hours) to diagnose and fix this error. Maybe a better error message could have pointed us in the right direction OR by default redirected back to the login page in an attempt to save the user’s login experience.

Just feedback to help you improve your developer experience. Thank you for explaining how to fix this issue

🙏

monarchwadia on Jul 9, 2021

Oh I just clear cookies or localstorage manually

On Thu., Feb. 3, 2022, 2:30 p.m. Spencer Kaiser, @.***> wrote:

Invalidate the session server side or client side? I’m struggling to find docs about how to do that…

— Reply to this email directly, view it on GitHub https://github.com/auth0/nextjs-auth0/issues/391#issuecomment-1029328020, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFBY4BIG6XRAC5BJ2ABVGDUZLJVLANCNFSM44JU7BAQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

monarchwadia on Feb 3, 2022

@SpencerKaiser I’m glad I was able to save you & others from this painful, painful issue 😄

I can’t remember now… but I think what we did was actually invalidate or maybe ignore the session somehow, and then redirect to the login page intelligently, thus side-stepping this issue without inconveniencing the user? Don’t quote me on that.

monarchwadia on Feb 1, 2022

@KATT

When you visit /api/auth/login the SDK drops a state cookie (amongst others), and redirects you to the authorization server to login. When login completes the authorization server redirects you to /api/auth/callback and the SDK picks up the state cookie and verifies it matches the state parameter in the callback request before logging you in.

If the SDK can’t find the state cookie when it goes to pick it up, it throws checks.state argument is missing. This can happen due to a login concurrency issue (see this FAQ) or because the cookie can’t be read for some other reason (it’s set on the wrong path, domain, with SameSite=Strict)

adamjmcgrath on May 11, 2021

@adamjmcgrath would like to keep it open - I’ve had this happen in production a few times but I don’t know the cause

KATT on May 11, 2021