How to add Auth0 authentication to a React app

Historical reference — not current setup instructions. These steps use Create React App, auth0-js, the implicit flow, and older React Router APIs. Their commands and screenshots have not been re-tested, and the original ReactDOM.render snippet is incomplete. Use the updated walkthrough above for a new app.

How to set up the React app#

In a terminal window, execute the following commands:

npx create-react-app auth0-authentication  cd auth0-authentication  npm i react-router react-router-dom

The first command will create a new React app for you while the second one navigates you into the directory. The two libraries that we installed in the third command will handle the navigation of our app. Run npm startto see what the app looks like before we make any changes. The command will start a development server that listens at port 3000 and will open the new app in your default web browser.

Default React starter app running locally in the browser

Now let’s update the index.js file. Simply add the following code snippet to the file:

1import { BrowserRouter } from 'react-router-dom';2 3ReactDOM.render(  4, document.getElementById('root'));5 6serviceWorker.unregister();

What we did was import BrowserRouter from the react-router-dom library, and encapsulate the App component inside this router. That’s pretty much it for kickstarting React Router.

How to configure Auth0 for a React app#

1. To integrate Auth0 in our Application, we first need an Auth0 account. To create an account, click here (opens in a new tab) and sign up for free.

2. Once you’re done with this, scroll down to find the option that says “Create Application”.

Auth0 dashboard option to create a new application

3. In the modal that follows, add the name of the application and then select Single Page Web Applications as its type.

Auth0 create application modal with Single Page Web Applications selected

4. Click the Create button which will redirect you to the “Quick start” section.

5. Click on the Setting tab to change the configuration of your Auth0 application. We’ll also be borrowing some data from this tab, precisely the Domain, and Client ID.

Auth0 application settings page showing domain and client ID details

6. Search for the Allowed Callback URLs field and insert [http://localhost:3000/callback](http://localhost:3000/callback) on it.

Allowed Callback URLs field configured with localhost callback URL in Auth0

While authenticating the app using Auth0, users will be redirected to the Universal Login Page of the app and after the authentication process regardless of being successful or not, they will be redirected back to your application. Auth0 will redirect users only to URLs registered on the Allowed Callback URLs for security reasons.

7. Now we need to add Allowed Web Origins and Allowed Logout URLs. As the app is going to issue a request to Auth0, we will need to add http://localhost:3000 to Allowed Web Origins. Without this value, Auth0 would deny any incoming request coming from the app. To enable users to end their session at Auth0, we need to call the Logout URL. Similar to the authorization endpoint which is Allowed Web Origins, in this case, the log-out endpoint only redirects users to whitelisted URLs after the process. Hence, we’ll add http://localhost:3000 here as well.

Auth0 settings page with localhost values for web origins and logout URLs

And that’s pretty much it for setting up things over Auth0.

How to integrate Auth0 with the React app#

We’ll be using the official Auth0 Library now to integrate and secure the app we just created. Simply return to the terminal and execute the following command.

npm install auth0-js

We’ll now create a class that will store the Auth0 authentication functionality. We simply need to create a new file Auth.js inside the src folder of our react app and add the following lines of code:

1import auth0 from 'auth0-js';2 3class Auth {4  constructor() {5    this.auth0 = new auth0.WebAuth({6      // Update Lines 7-9 with data from the Auth0 Dashboard of your Application7Highlighted line:       domain: '<AUTH0_DOMAIN>',8Highlighted line:       audience: 'https://<AUTH0_DOMAIN>/userinfo',9Highlighted line:       clientID: '<AUTH0_CLIENT_ID>',10      redirectUri: 'http://localhost:3000/callback',11      responseType: 'id_token',12      scope: 'openid profile'13    });14 15    this.getProfile = this.getProfile.bind(this);16    this.handleAuthentication = this.handleAuthentication.bind(this);17    this.isAuthenticated = this.isAuthenticated.bind(this);18    this.signIn = this.signIn.bind(this);19    this.signOut = this.signOut.bind(this);20  }21 22  getProfile() {23    return this.profile;24  }25 26  getIdToken() {27    return this.idToken;28  }29 30  isAuthenticated() {31    return new Date().getTime() < this.expiresAt;32  }33 34  signIn() {35    this.auth0.authorize();36  }37 38  handleAuthentication() {39    return new Promise((resolve, reject) => {40      this.auth0.parseHash((err, authResult) => {41        if (err) return reject(err);42        if (!authResult || !authResult.idToken) {43          return reject(err);44        }45        this.idToken = authResult.idToken;46        this.profile = authResult.idTokenPayload;47        // set the time that the id token will expire at48        this.expiresAt = authResult.idTokenPayload.exp * 1000;49        resolve();50      });51    })52  }53 54  signOut() {55    // clear id token, profile, and expiration56    this.idToken = null;57    this.profile = null;58    this.expiresAt = null;59    this.auth0.logout({60        returnTo: 'http://localhost:3000',61        clientID: '<AUTH0_CLIENT_ID>',62    });63  }64}65 66const auth0Client = new Auth();67 68export default auth0Client;

As described above, we simply create an instance of auth0.WebAuth with our Auth0 values and define some other important configurations. Do NOT forget to replace the data from Line 7 to 9 with the one in your dashboard to make the app work.

Now to handle the callback route (http://localhost:3000/callback), we’ll define a component, create a new file called Callback.js inside the src directory. Simply add this code to the newly created file:

1import React, {Component} from 'react';2import {withRouter} from 'react-router-dom';3import auth0Client from './Auth';4 5class Callback extends Component {6  async componentDidMount() {7    await auth0Client.handleAuthentication();8    this.props.history.replace('/');9  }10 11  render() {12    return (13      <p>Authentication with Auth0 works!</p>14    );15  }16}17 18export default withRouter(Callback);

All this component does is call the handleAuthentication method to fetch the user information that is shared by Auth0. It also redirects users to the home page (history.replace('/')) after finishing the handleAuthentication process. The component also shares a message which reads “Authentication with Auth0 works!” to let you know that you’re on the right path.

Update the React frontend#

To reflect all the changes we made onto our front end, we need to update the App.js file and create a new file Home.js inside src folder. Home.js validates if the user is authenticated or not.

Check out both the files and make amendments.

1import React from 'react';2import './App.css';3import { Route } from 'react-router-dom';4import Callback from './Callback';5import Home from './Home';6 7 8function App() {9 10  return (11    <div className="App" >12      <Route exact path='/' component={Home} exact />13      <Route exact path='/callback' component={Callback} exact />14    </div>15  )16}17 18export default App;

1import React, { Component } from 'react';2import logo from './logo.svg';3import './App.css';4import auth0Client from './Auth';5 6class Home extends Component {7    componentDidMount() {8        if (!auth0Client.isAuthenticated()) {9            auth0Client.signIn();10        }11    }12    signOut = () => {13        auth0Client.signOut();14        this.props.history.replace('/');15    }16    render() {17 18        return (19            <div className="App" >20                <header className="App-header">21                    <img src={logo} className="App-logo" alt="logo" />22                    {23                        auth0Client.isAuthenticated() &&24                        <div>25                            <label className="mr-2 text-white">{auth0Client.getProfile().name}</label>26                            <br />27                            <button className="btn btn-dark" onClick={() => { this.signOut() }}>Sign Out</button>28                        </div>29                    }30 31                </header>32            </div>33        )34    }35 36}37 38export default Home;

After making and saving all the changes, execute npm start. Your React app with Auth0 User Authentication is ready.

Ending notes for the original example#

The app we just created can be reused for any React+Auth0 App you plan on building. Go through the official documentation of Auth0 to make it better and read about all the other services and tools offered by the Organization. Personally, I prefer Auth0 over Firebase simply because of the Single Sign-On Feature with access to a plethora of Identity Providers.