State Mismatch After Passwordless Authentication

Problem statement

This error occurs when attempting to login using the email passwordless connection:

*HandlerError [BadRequestError]: state mismatch, expected eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC9wcm9maWxlIn0, got: hKFo2SBNcy10dmNlSFhsa2ptc2t4SFptUE5MajR6bzlPVkhHeKFupWxvZ2luo3RpZNkgMWh6ZU5CTW9rMmg3dFpXNXA5eTFzRzRHLU9MR2tJWmOjY2lk2SBjTXhxb09STDFkUTZuTEo2S3pnc2dtNE8zRjd3V2dSOA*

Symptoms

Email Passwordless authentication with link throws “state mismatch” error after the user clicks the link in the verify email.

The client is a Next.js app using nextjs-auth0 sdk.

Cause

This error can occur if the login flow was initiated with the canonical domain but the email link was sent for the custom domain.

Solution

To use a custom domain throughout this flow:

  1. Go to Auth0 Dashboard > Branding > Custom Domains.
  2. Enable the Use Custom Domain in Emails toggle.

Then initiate the flow with the custom domain in the /authorize request.

Related References: