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.
The callback URL for your app must be whitelisted in the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
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.
The logout URL for your app must be whitelisted in the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from 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-spa-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
auth0-spa-js using npm or yarn.
auth0-spa-js is installed, reference it using an import statement (if you're using a build system such as Webpack):
Loading it from CDN
If you do not want to use a package manager, you can retrieve
auth0-spa-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 a Sample Application
If you don't already have an existing application, you can create one using the Create React App CLI tool. Using the terminal, find a location on your drive where you want to create the project and run the following commands:
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
Install initial dependencies
After creating a new React app using
react-router, which doesn't come as standard with the boilerplate project. The Auth0 Client SDK should also be added.
Install these two packages using the following command in the terminal:
Install the Auth0 React wrapper
Create a new file in the
src directory called
react-auth0-wrapper.js and populate it with the following content:
This is a set of custom React hooks that enable you to work with the Auth0 SDK in a more idiomatic way, providing functions that allow the user to log in, log out, and information such as whether the user is logged in.
The next few sections will integrate these hooks into the various components that make up the app.
Users who are logged in with username/password will be silently reauthenticated automatically when the application reloads. No further action is needed for this type of login.
If you are using the classic Universal Login experience and would like users to authenticate using social identity providers (such as Google, Apple, Facebook, etc.), then you will need to configure those connections in your Auth0 Dashboard.
In the navigation menu, choose Connections - Social, and select the social connection you’d like to support. In the connection’s settings, click “How to obtain a Client ID?“ and follow the instructions to set up your own ID and secret.
If you are using the new Universal Login experience, the default enabled social connections will silently reauthenticate without additional configuration. However, you should still set up your own keys and avoid using default Auth0 development keys in a production app.
Create a new folder inside the
src folder called
components. This is where you will house all the components for this application.
Create a new component in the
components folder called
Navbar.js. This component will be responsible for showing the login and logout buttons:
Here the component renders two buttons, for logging in and logging out, depending on whether the user is currently authenticated.
Notice the use of
useAuth0 — provided by the wrapper you created in the previous section — which provides the functions needed in order to log in, log out, and determine if the user is logged in through the
Integrate the SDK
In order for the authentication system to work properly, the application components should be wrapped in the
Auth0Provider component that is provided by the SDK wrapper created earlier in the tutorial. This means that any components inside this wrapper will be able to access the Auth0 SDK client.
src/index.js file and replace its contents with the following:
Notice that the
App component is now wrapped in the
Auth0Provider component, where the details about the Auth0 domain and client ID are specified. The
redirect_uri prop is also specified here. Doing this here means that you don't need to pass this URI to every call to
loginWithRedirect, and it keeps the configuration in one place.
Also notice the function
onRedirectCallback, which tries to route the user to the right place once they have logged in. For example, if the user tries to access a page that requires them to be authenticated, they will be asked to log in. When they return to the application, they will be forwarded to the page they were originally trying to access thanks to this function.
Next, create a new file
auth_config.json in the
src folder, and populate it with the following:
Next, open the
App.js file in the
src folder, populate it with the following content:
This replaces the default content created by
create-react-app and simply shows the
NavBar component you created earlier.
Checkpoint: At this point, you should be able to go through a complete authentication cycle, logging in and loggin out. Start the application from the terminal using
yarn startand browse to http://localhost:3000 (if the application does not open automatically). From there, clicking the Log in button should redirect you to the Auth0 Login Page where you will be given the opportunity to log in. Once you are logged in, control returns to your application and you should see that the Log out button is now visible. Clicking this should log you out of the application and return you to an unauthenticated state.
Read the User Profile
When a user is logged in, the associated user profile information can be retrieved. Typically this is used to display their name and profile picture.
To display this information to the user, create a new file called
Profile.js inside the
components folder and populate it with the following content:
Notice here that the
useAuth0 hook is again being used, this time to retrieve the user's profile information (through the
user property) and a
loading property that can be used to display some kind of "loading" text or spinner graphic while the user's data is being retrieved.
In the UI for this component, the user's profile picture, name, and email address is being retrieved from the
user property and displayed on the screen.
To access this page, modify the
App.js file to include a router so that the profile page may be displayed on the screen. The
App.js file should now look something like this:
Notice that a
BrowserRouter component has been included, and that two routes have been defined — one for the home page, and another for the profile page.
To complete this step, open the
Navbar.js file and modify the navigation bar's UI to include a link to the profile page. In addition, import the
Link component at the top of the file.
NavBar component should now look something like this:
Checkpoint: Go ahead and run the project one more time. Now if the user is authenticated and you navigate to the
/profilepage, you will see their profile data. See how this content disappears when you log out.
Secure the Profile Page
The profile page should be protected in such a way that if the user tries to access it directly without logging in, they will be automatically redirected to Auth0 to log in. Currently the user would just see a blank page.
To fix this, a Higher-Order Component can be created that will wrap any component to check if is authenticated.
Start by creating a new component
components/PrivateRoute.js that can wrap another component. Populate it with the following content:
This component takes another component as one of its arguments. It makes use of the
useEffect hook to redirect to the user to the login page if they are not yet authenticated.
If the user is authenticated, the redirect will not take place and the component that was specified as the argument will be rendered instead. In this way, components that require the user to be logged in can be protected simply by wrapping the component using
Protect application routes
PrivateRoute component in place, the application router can now be modified to secure the
/profile route, ensuring that users must log into the application in order to see it.
App.js once again, import the
PrivateRoute component, and update the router so that the
Profile component is wrapped by the
Checkpoint: Run the project again. Now if the user is not authenticated and you navigate to the
/profilepage through the URL bar in the browser, you will be sent through the authentication flow, and will see the Profile page upon your return.