This guide helps you learn how to deploy to Vercel a React application secured with Auth0 by Okta. This guide assumes that you have secured your React application using the Auth0 React SDK, which provides developers with a high-level API to handle many authentication implementation details.
Get the Auth0 Domain and Client ID
Start by logging in to your Auth0 account and open the Applications section of the Auth0 Dashboard. Then, select the Auth0 application registration associated with your React application.
Click on the "Settings" tab and locate the "Basic Information" section. Under this section, you'll find the "Domain" and "Client ID" values.
These variables let your React application identify itself as an authorized party to interact with the Auth0 authentication server.
When you enter a value in the input fields present on this page, any code snippet that uses such value updates to reflect it. Using the input fields makes copying and pasting code as you follow along easy.
As such, enter the "Domain" and "Client ID" values in the following fields, as you will use them when configuring the environment variables for your project in Vercel in the next sections:
Don't close this page since you'll need to come back and configure the "Application URIs" section after importing your project on Vercel.
Import Your React Project to Vercel
Start by logging in to the Vercel Dashboard to import your React project.
Click the "Add New" drop-down and select the "Project" option. A Vercel page to import an existing Git repository loads up.
Select the project you want to import by clicking the "Import" button. During this step, Vercel will try to infer the framework preset of your repository and, based on it, set default build and output settings. A Vercel page for configuring your project page loads up. Modify the default configuration settings as needed.
Next, click the "Environment Variables" options within the "Configure Project" section to define environment variables related to Auth0. You need the Auth0 Domain and Auth0 Client ID to connect your React application once deployed to Vercel with the Auth0 Authentication Server.
Start by defining the Auth0 Domain by entering the following information in the environment variable field:
REACT_APP_AUTH0_DOMAIN
AUTH0-DOMAIN
Click the "Add" button.
Next, define the Auth0 Client ID as follows:
REACT_APP_AUTH0_CLIENT_ID
AUTH0-CLIENT-ID
Once again, click the "Add" button.
With these Auth0 environment variables in place, click the "Deploy" button to kickstart the Vercel deployment process for React Single-Page Applications (SPAs).
While your React application runs on Vercel, it will redirect users to Auth0 whenever they trigger an authentication request. Auth0 will present your users with the Auth0 Universal Login page. Once your users log in, Auth0 will redirect them to your React application. For that redirecting to happen securely, you must specify in your Auth0 Application Settings the URLs to which Auth0 can redirect users once it authenticates them. That is, you need to define the Vercel production deployment URL of your React application as an "Auth0 Allowed Callback URL".
Use Your Vercel Production URL in Auth0
Let's start by getting your Vercel production deployment URL.
Select your project from the Vercel Dashboard.
Click on the "Settings" tab and then the "Domains" option on the sidebar. This section uses tags to show the domains that Vercel has assigned to your production and preview deployments.
Locate the domain with the "Production" tag. Copy and paste that domain value into the following field:
Head back to the "Settings" section of your Auth0 application registration in the Auth0 Dashboard and locate the "Application URIs" section. Fill in the following values:
https://VERCEL-PRODUCTION-DOMAIN
The above value is the URL that Auth0 can use to redirect your users after they successfully log in.
https://VERCEL-PRODUCTION-DOMAIN
The above value is the URL that Auth0 can use to redirect your users after they log out.
https://VERCEL-PRODUCTION-DOMAIN
Using the Auth0 React SDK, your React application will make requests under the hood to an Auth0 URL to handle authentication requests. As such, you need to add your React application origin URL to avoid Cross-Origin Resource Sharing (CORS) issues.
Scroll down and click the "Save Changes" button.
This completes the configuration of your React application to work with Auth0 while it is running on Vercel. Now, you can log in to your React application using your Vercel production URL.
Use Your Deployed React Application
Visit your React application using your Vercel production URL. Assuming that you created authentication buttons, click the login button.
React takes you to the Auth0 Universal Login page. You can use the form to log in with a username and password or a social identity provider like Google.
Once you have signed in using the Universal Login page, Auth0 will redirect you to the React application deployed on Vercel. The Auth0 React SDK tracks the authentication state of your users through the isAuthenticated value. You can use this value to render UI elements conditionally based on the authentication state of your users.
Finally, click the logout button. This will clear the application session and redirects you to the Auth0 /v2/logout endpoint to clear the Auth0 session and redirect back to your application.
Next Steps
You have learned to deploy a React application secured with Auth0 to Vercel. Auth0 is an extensible and flexible identity platform that can help you achieve even more. If you have a more complex use case, check out the Auth0 Architecture Scenarios to learn more about the typical architecture scenarios we have identified when working with customers on implementing Auth0.
Let us know in the comments below what you think of this tutorial or if you have any issues following this guide for deploying your React application secured by Auth0 to Vercel.
