This tutorial demonstrates how to add user login to a React application using Auth0. We recommend you to Log in to follow this quickstart with examples configured for your account.
I want to integrate with my app15 minutes
I want to explore a sample app2 minutes
Get a sample configured with your account settings or check it out on Github.
Get Your Application Keys
When you signed up for Auth0, a new application was created for you, or you could have created a new one.
You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
You need the following information:
- Client ID
Configure Callback URLs
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated.
You need to whitelist the callback URL for your app in the Allowed Callback URLs field in your Application Settings. If you do not set any callback URL, your users will see a mismatch error when they log in.
Configure Logout URLs
A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the
returnTo query parameter.
You can set the logout URL for your app in the Allowed Logout URLs field in your Application Settings. If you don't set a logout URL, your users will be unable to log out of the application and will get an error.
Configure Allowed Web Origins
You need to whitelist the URL for your app in the Allowed Web Origins field in your Application Settings. If you don't whitelist your application URL, the application will be unable to automatically refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.
Integrate Auth0 in your Application
You need the auth0.js library to integrate Auth0 into your application. You can either install the library locally in your application or load it from CDN.
Loading via dependencies
Install auth0.js using npm or yarn.
Once you install auth0.js, add it to your build system or bring it in to your project with a script tag.
Loading it from CDN
If you do not want to use a package manager, you can retrieve auth0.js from Auth0's CDN.
Authentication with Auth0
Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security and the fullest array of features. This guide will use it to provide a way for your users to log in to your React application.
When a user logs in, Auth0 returns three items:
access_token: to learn more, see the Access Token documentation
id_token: to learn more, see the ID Token documentation
expires_in: the number of seconds before the Access Token expires
You can use these items in your application to set up and manage authentication.
Create an Authentication Service
Create a service to manage and coordinate user authentication. You can give the service any name. In the examples below, the service is
Auth and the filename is
In the service add an instance of the
auth0.WebAuth object. When creating that instance, you can specify the following:
- Configuration for your application and domain
- Response type, to show that you need a user's Access Token and an ID Token after authentication
- Audience and scope, specifying that you need an
access_tokenthat can be used to invoke the /userinfo endpoint.
- The URL where you want to redirect your users after authentication.
login method that calls the
authorize method from auth0.js.
Try to import the
Auth service from somewhere in your application. Call the
login method from the service to see the login page.
Handle Authentication Tokens
Add more methods to the
Auth service to handle authentication in the app.
The example below shows the following methods:
handleAuthentication: looks for the result of authentication in the URL hash. Then, the result is processed with the
parseHashmethod from auth0.js
setSession: sets the user's Access Token, ID Token, and the Access Token's expiry time
logout: removes the user's tokens and expiry time from browser storage
isAuthenticated: checks whether the expiry time for the user's Access Token has passed
Provide a Login Control
Provide a component with controls for the user to log in and log out.
Depending on whether the user is authenticated or not, they see the Log In or Log Out button. The
click events on the buttons make calls to the
Auth service to let the user log out or log in. When the user clicks the Log In button, they are redirected to the login page.
Add a Callback Component
When you use the login page, your users are taken away from your application. After they authenticate, the users automatically return to your application and a client-side session is set for them.
You can select any URL in your application for your users to return to. We recommend creating a dedicated callback route. If you create a single callback route:
- You don't have to whitelist many, sometimes unknown, callback URLs.
- You can display a loading indicator while the application sets up a client-side session.
Create a component named
CallbackComponent and add a loading indicator.
After authentication, your users are taken to the
/callback route. They see the loading indicator while the application sets up a client-side session for them. After the session is set up, the users are redirected to the
Process the Authentication Result
When a user authenticates at the login page, they are redirected to your application. Their URL contains a hash fragment with their authentication information. The
handleAuthentication method in the
Auth service processes the hash.
handleAuthentication method after you render the
Callback route. The method processes the authentication hash fragment when the
Callback component initializes.