Login flow with two browser tabs produces a state mismatch error

[SantiMA10]

Description

If you open two browser tabs going and try to log in at the same time it results in a state mismatch error.

Reproduction

• Open https://nextjs-auth0-api-example.now.sh/ and click login in tab 1
• Open https://nextjs-auth0-api-example.now.sh/ and click login in tab 2
• Go to tab 1 and log in
• 💥

Environment

• Version of this library used: 0.15.0
• Version of the platform or framework used, if applicable: NEXT.js 9.4.0

[adamjmcgrath]

Hi @SantiMA10 - thanks for raising this.

This is because the Middleware stores some transient state (nonce, state, code_verifier) to verify the callback request from the authorization server in cookies. When you open tab 1 to login some state is stored, when you open tab 2 some more state is stored which overwrites tab 1's state. When you then go back to tab 1 to complete login, the state in your callback won't match the state in your cookies.

There are various approaches to resolving this but we find the simplest and most effective is to recommend clients handle the error and prompt the user to attempt login again, as they have an active sso session they won't be prompted to enter their credentials again on the authorization server.