How to redirect to generated staging links (with Vercel)?

I’m building a Nextjs app deployed with Vercel. Vercel is unique in that it generates preview links for every commit you make so you can see your changes live before they get rolled into production.

The challenge I’m facing is that logins do not work on these preview links because I’m unable to allow list them in my application settings. These unique links have the following URL structure:

"https://${project}-${randomGeneratedString}-${org}.vercel.app/"

// so for example
"https://myproject-n30zkjlc5-myorg.vercel.app/"

In my auth0 application settings I tried setting Allowed Callback URLs/CORS/origins to the following, but it doesnt seem to work.

https://mproject-*-myorg.vercel.app

Is there any way to get wild card callbacks like this to work? Otherwise it makes testing on staging Vercel links difficult since we can’t login successfully.

1 Like

After some googling I found the solution. I was on the right track with the wild card, but I also needed to set my Vercel AUTH0_ISSUER_BASE_URL to

https://${VERCEL_GIT_REPO_SLUG}-${VERCEL_GIT_COMMIT_REF}-${VERCEL_GIT_REPO_OWNER}.vercel.app
2 Likes

Glad you have figured it out and thanks for sharing with the rest of community!

1 Like