How to Deploy a React App Secured By Auth0 to Vercel

Developer Hub
, ,
1

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

2

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?

3

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}`;
  1. 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

1 Like
4

Thanks for sharing it with the rest of community!