How to Deploy a React App Secured By Auth0 to Vercel

[byron.motoche]

This guide helps you learn how to deploy a React application secured by Auth0 to Vercel.

[cdaringe]

My next.js application uses the auth0 sdk in the middleware. Vercel deploys middleware to the edge. By default, we use AUTH0_BASE_URL for the baseUrl, but Vercel loads this up in VERCEL_URL.

How does one map these two values in middleware deploymentments?

[cdaringe]

i hacked it to function by doing the following:

1. Create new file:

// middleware-normalize-env.ts
process.env.AUTH0_BASE_URL =
  process.env.AUTH0_BASE_URL || `https://${process.env.VERCEL_URL}`;

2. Import env mapper in middlewares and api routes

// organize-imports-ignore
import "../../../../middleware-normalize-env";

Thus, auth0 picks up on the vercel dynamic deploy URL.

now… to figure out how to get auth0 to accept dynamic preview URLs from my deployments…

• A wildcard may be prefixed and/or suffixed with additional valid hostname characters. https://prefix-*-suffix.example.com will work.

Cool. For those on vercel who want their preview deploys to work, I used: https://MYAPP-*-cdaringe.vercel.app/api/auth/callback

[konrad.sopala]

Thanks for sharing it with the rest of community!