Vercel + Next.js + Auth0 Configuration: Static AUTH0_BASE_URL in production leads to 'checks.state argument is missing'

[treygilliland]

Description

Following the guide in the documentation here, I was successfully able to integrate Auth0 with NextJS deployed on Vercel by setting AUTH0_BASE_URL=$VERCEL_URL in my .env.production file for preview deployments and setting the AUTH0_BASE_URL environment variable on Vercel to the static base URL of our production site for production deployments.

However, when accessing a production deployment from a URL that is not the static base URL (ex: the Vercel URL assigned to the production deployment or the git branch URL), the user is redirected back with a 400 error showing a blank screen saying 'checks.state argument is missing` after attempting to login.

Example login flow:
Navigate to production site through Vercel URL -> User is redirected to third-party login on Auth0 -> User is redirected back to the site through the static production URL set in AUTH0_BASE_URL which causes a 'checks.state argument is missing' error because the AUTH0_BASE_URL does not match the Vercel URL it originally navigated through.

I came across many forums + threads regarding the issue of having the Base URL misconfigured on Vercel or the Callback URIs on Auth0, but none that mentioned a way to fix this issue specifically.

Is there anyway to define multiple AUTH0_BASE_URL values or enable navigating to the production version of the site through the VERCEL_URL and the static production URL we assign to the site?

Reproduction

Deploying preview with AUTH0_BASE_URL=$VERCEL_URL in the .env.production file works perfectly fine.
Current production deployment with the AUTH0_BASE_URL set to the static base production URL for my site also works perfectly fine.
If I try to redeploy my site, I reach a 'checks.state argument is missing' when navigating through the Vercel URL that Vercel assigns before assigning the static production URL. This causes my Checkly integration to fail because it will be redirected to the static production site URL instead of the Vercel URL it originally navigated to.
However, if I manually skip the checks it redeploys fine.

Environment

Please provide the following:

• Version: latest
• Vercel CLI: latest

[adamjmcgrath]

Hi @treygilliland - thanks for raising this

This is expected behaviour, if you start your login on the git branch URL you will drop a state cookie on the git branch URL domain but your redirect_uri will be the AUTH0_BASE_URL domain. So, when you return to the AUTH0_BASE_URL domain after login, there will be no state cookie (because it's been set on a different domain) so you will get the checks.state argument is missing error.

Essentially, you need to use the AUTH0_BASE_URL to login. Alternatively, you could look at overriding the the redirect_uri at runtime, see #298 for more info

[treygilliland]

Hey @adamjmcgrath

Thanks for the response! Great tip on overriding the redirect_uri at runtime. Since AUTH0_BASE_URL really only makes sense as one value, I think that overriding at runtime is the best solution for getting the setup that I want. I will close for now.

[treygilliland]

Just wanted to link in an older issue, this is what I ended up going with as the solution: #108