# How to Deploy a React App Secured By Auth0 to Vercel

**URL:** <https://community.auth0.com/t/how-to-deploy-a-react-app-secured-by-auth0-to-vercel/106408>\
**Category:** Developer Hub\
**Tags:** react, authentication\
**Created:** [May 8, 2023, 2:19pm UTC](https://community.auth0.com/t/how-to-deploy-a-react-app-secured-by-auth0-to-vercel/106408 "2023-05-08T14:19:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![byron.motoche](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/byron.motoche/32/34458_2.png) [@byron.motoche](https://community.auth0.com/u/byron.motoche)\
**Post date:** [May 8, 2023, 2:19pm UTC](https://community.auth0.com/t/how-to-deploy-a-react-app-secured-by-auth0-to-vercel/106408/1 "2023-05-08T14:19:05Z")

</div>

This [guide](https://developer.auth0.com/resources/guides/spa/react/vercel-deployment) helps you learn how to deploy a React application secured by Auth0 to Vercel.

---

<div class="post-metadata">

**Author:** ![cdaringe](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/cdaringe/32/49431_2.png) [@cdaringe](https://community.auth0.com/u/cdaringe)\
**Post date:** [July 29, 2023, 7:40pm UTC](https://community.auth0.com/t/how-to-deploy-a-react-app-secured-by-auth0-to-vercel/106408/2 "2023-07-29T19:40:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cdaringe](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/cdaringe/32/49431_2.png) [@cdaringe](https://community.auth0.com/u/cdaringe)\
**Post date:** [July 29, 2023, 7:55pm UTC](https://community.auth0.com/t/how-to-deploy-a-react-app-secured-by-auth0-to-vercel/106408/3 "2023-07-29T19:55:05Z")

</div>

i hacked it to function by doing the following:

1. Create new file:

```ts
// 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

```ts
// 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`

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [July 31, 2023, 8:59am UTC](https://community.auth0.com/t/how-to-deploy-a-react-app-secured-by-auth0-to-vercel/106408/4 "2023-07-31T08:59:58Z")

</div>

Thanks for sharing it with the rest of community!

---

<div class="post-metadata">

**Author:** ![byron.motoche](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/byron.motoche/32/34458_2.png) [@byron.motoche](https://community.auth0.com/u/byron.motoche)\
**Post date:** [December 9, 2024, 10:53pm UTC](https://community.auth0.com/t/how-to-deploy-a-react-app-secured-by-auth0-to-vercel/106408/5 "2024-12-09T22:53:18Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.