The Complete Guide to React User Authentication with Auth0

v18

v6

v17

v5

Look for the 🛠️️ emoji if you'd like to skim through the content while focusing on the build steps.

The focus of this tutorial is to help developers learn how to secure a React application by implementing user authentication. You'll enhance a starter React application to practice the following security concepts:

• Add user login and logout.
• Retrieve user information.
• Protect application routes.
• Call protected endpoints from an API.

This guide uses the Auth0 React SDK to secure React applications, which provides React developers with an easier way to add user authentication to React applications using a hooks-centric approach. The Auth0 React SDK provides a high-level API to handle a lot of authentication implementation details. You can now secure your React applications using security best practices while writing less code.

⚠️ This guide uses React Hooks and function components to build a secure React application. If you need to implement any component from this guide using JavaScript classes, check out the

auth0-react-sample-classes

class

How does Auth0 work?

With the help of Auth0, you don't need to be an expert on identity protocols, such as OAuth 2.0 or OpenID Connect, to understand how to secure your web application stack. You first integrate your application with Auth0. Your application will then redirect users to an Auth0 customizable login page when they need to log in. Once your users log in successfully, Auth0 redirects them back to your app, returning JSON Web Tokens (JWTs) with their authentication and user information.

⏰⚡️ If you are short of time, check out the Auth0 React Quickstart to get up and running with user authentication for React in just a few minutes. You may also check out our React and Auth0 YouTube Playlist.

Get the Starter Application

We have created a starter project using

create-react-app

🛠 As such, clone the

auth0-react-sample

starter

git clone -b starter git@github.com:auth0-blog/auth0-react-sample.git

🛠 Once you clone the repo, make

auth0-react-sample

cd auth0-react-sample

🛠 Install the React project dependencies:

npm install

Connect React with Auth0

The best part of the Auth0 platform is how streamlined it is to get started by following these steps:

Sign up and create an Auth0 Application

A free account offers you:

• 7,000 free active users and unlimited logins.
• Auth0 Universal Login for Web, iOS & Android.
• Up to 2 social identity providers like Google, GitHub, and Twitter.
• Unlimited Serverless Rules to customize and extend Auth0's capabilities.

During the sign-up process, you create something called an Auth0 Tenant, representing the product or service to which you are adding authentication.

🛠 Once you sign in, Auth0 takes you to the Dashboard. In the left sidebar menu, click on "Applications".

🛠 Then, click the "Create Application" button. A modal opens up with a form to provide a name for the application and choose its type.

• Name:

Auth0 React Sample

• Application Type: Single Page Web Applications

🛠 Click the "Create" button to complete the process. Your Auth0 application page loads up.

In the next step, you'll learn how to help React and Auth0 communicate.

reactogram

reactiktok

Create a communication bridge between React and Auth0

When you use Auth0, you don't have to build login forms. Auth0 offers a Universal Login page to reduce the overhead of adding and managing authentication.

How does Universal Login work?

Your React application will redirect users to Auth0 whenever they trigger an authentication request. Auth0 will present them with a login page. Once they log in, Auth0 will redirect them back 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.

🛠 As such, click on the "Settings" tab of your Auth0 Application page and fill in the following values:

🛠 Allowed Callback URLs

http://localhost:4040

The above value is the URL that Auth0 can use to redirect your users after they successfully log in.

🛠 Allowed Logout URLs

http://localhost:4040

The above value is the URL that Auth0 can use to redirect your users after they log out.

🛠 Allowed Web Origins

http://localhost:4040

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.

🛠 Do not close this page yet. You'll need some of its information in the next section.

Add the Auth0 configuration variables to React

From the Auth0 Application Settings page, you need the Auth0 Domain and Client ID values to allow your React application to use the communication bridge you created.

auth0.com

q8fij2iug0CmgPLfTfG1tZGdTQyGaTUA

🛠 Open the React starter project,

auth0-react-sample

.env

touch .env

🛠 Populate

.env

REACT_APP_AUTH0_DOMAIN=
REACT_APP_AUTH0_CLIENT_ID=

🛠 Head back to your Auth0 application page. Follow these steps to get the

REACT_APP_AUTH0_DOMAIN

REACT_APP_AUTH0_CLIENT_ID

1. 🛠 Click on the "Settings" tab, if you haven't already.

2. 🛠 Use the "Domain" value from the "Settings" as the value of

   REACT_APP_AUTH0_DOMAIN

   in

   .env

   .

3. 🛠 Use the "Client ID" value from the "Settings" as the value of

   REACT_APP_AUTH0_CLIENT_ID

   in

   .env

   .

These variables let your React application identify itself as an authorized party to interact with the Auth0 authentication server.

Auth0 and React connection set

You have completed setting up an authentication service that your React application can consume. All that is left is for you to continue building up the starter project throughout this guide by implementing components to trigger and manage the authentication flow.

Feel free to dive deeper into the Auth0 Documentation to learn more about how Auth0 helps you save time on implementing and managing identity.

Set Up the Auth0 React SDK

🛠 You need to follow these steps to integrate the Auth0 React SDK with your React application.

Install the Auth0 React SDK

🛠 Execute the following command:

npm install @auth0/auth0-react@1.12.1

Configure the Auth0Provider component

Under the hood, the Auth0 React SDK uses React Context. The SDK uses an

Auth0Context

Auth0Provider

Auth0Context

App

Auth0Provider

<Auth0Provider>
  <App />
</Auth0Provider>

However, user authentication is a mechanism to monitor who is accessing your application and control what they can do. For example, you can prevent users who have not logged in from accessing parts of your application. In that scenario, Auth0 can act as your application bouncer.

A bouncer is a person employed by a nightclub or similar establishment to prevent troublemakers from entering or to eject them from the premises. React security is not too different from nightclub security.

If users want to enter a protected route from your application, Auth0 will stop them and ask them to present their credentials. If Auth0 can verify who they are and that they are supposed to go in there, Auth0 will let them in. Otherwise, Auth0 will take them back to a public application route.

Now, it's important to reiterate that the authentication process won't happen within your application layer. Your React application will redirect your users to the Auth0 Universal Login page, where Auth0 asks for credentials and redirects the user back to your application with the result of the authentication process.

The

Auth0Provider

Auth0Provider

history

useHistory()

Consequently, you need to wrap the

Auth0Provider

BrowserRouter

RouterContext.Provider

<BrowserRouter>
  <Auth0Provider>
    <App />
  </Auth0Provider>
</BrowserRouter>

Here, what you see at play is a pillar of React's architecture: you extend components, not through inheritance but composition.

How do you create an

Auth0Provider

🛠 Start by creating an

auth

src

mkdir src/auth

🛠 Create an

auth0-provider-with-history.js

src/auth

Auth0ProviderWithHistory

Auth0Provider

touch src/auth/auth0-provider-with-history.js

🛠 Populate

src/auth/auth0-provider-with-history.js

// src/auth/auth0-provider-with-history.js

import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';

const Auth0ProviderWithHistory = ({ children }) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

  const history = useHistory();

  const onRedirectCallback = (appState) => {
    history.push(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};

export default Auth0ProviderWithHistory;

What is happening within

Auth0ProviderWithHistory

• You need the Auth0 React SDK to connect with the correct Auth0 Application to process authentication. As such, you need to Auth0 Domain and Client ID to configure the

  Auth0Provider

  .

• You use the

  onRedirectCallback()

  method to handle the event where Auth0 redirects your users from the Auth0 Universal Login page to your React application. You use the

  useHistory()

  hook to get the

  history

  object from React Router. You use the

  history.push()

  method to take users back to the route they intended to access before authentication.

That's it! Wrapping any component tree with

Auth0ProviderWithHistory

Auth0Context

How do you use

Auth0ProviderWithHistory

The

Auth0ProviderWithHistory

BrowserRouter

The

Context

Auth0ProviderWithHistory

useHistory()

🛠 Open

src/index.js

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import { BrowserRouter as Router } from 'react-router-dom';
import Auth0ProviderWithHistory from './auth/auth0-provider-with-history';

import './index.css';

ReactDOM.render(
  <Router>
    <Auth0ProviderWithHistory>
      <App />
    </Auth0ProviderWithHistory>
  </Router>,
  document.getElementById('root'),
);

🛠 Execute the following command to run your React application:

npm start

The Auth0 React SDK is all set up. You are ready to implement user authentication in the next section.

Add User Authentication

You need to provide UI elements for your users to trigger authentication events: login, logout, and sign up.

Create a login button

🛠 Create a

login-button.js

src/components/

touch src/components/login-button.js

🛠 Populate

src/components/login-button.js

// src/components/login-button.js

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();
  return (
    <button
      className="btn btn-primary btn-block"
      onClick={() => loginWithRedirect()}
    >
      Log In
    </button>
  );
};

export default LoginButton;

loginWithRedirect()

Auth0Context

You can pass a configuration object to

loginWithRedirect()

RedirectLoginOptions

Create a sign-up button

You can make users land directly on a sign-up page instead of a login page by specifying the

screen_hint=signup

loginWithRedirect()

{
  screen_hint: "signup",
}

🛠 Create a

signup-button.js

src/components/

touch src/components/signup-button.js

🛠 Populate

src/components/signup-button.js

SignupButton

// src/components/signup-button.js

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const SignupButton = () => {
  const { loginWithRedirect } = useAuth0();
  return (
    <button
      className="btn btn-primary btn-block"
      onClick={() =>
        loginWithRedirect({
          screen_hint: 'signup',
        })
      }
    >
      Sign Up
    </button>
  );
};

export default SignupButton;

Using the Signup feature requires you to enable the Auth0 New Universal Login Experience in your tenant.

🛠 Open the Universal Login section of the Auth0 Dashboard and choose the "New" option under the "Experience" subsection.

🛠 Scroll down and click on the "Save Changes" button.

The difference between the

LoginButton

SignupButton

Create a logout button

🛠 Create a

logout-button.js

src/components/

touch src/components/logout-button.js

Populate

src/components/logout-button.js

// src/components/logout-button.js

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const LogoutButton = () => {
  const { logout } = useAuth0();
  return (
    <button
      className="btn btn-danger btn-block"
      onClick={() =>
        logout({
          returnTo: window.location.origin,
        })
      }
    >
      Log Out
    </button>
  );
};

export default LogoutButton;

The

logout()

Auth0Context

/v2/logout

logout()

/v2/logout

LogoutOptions

Here, you pass the

returnTo

http://localhost:4040

However, if you were to deploy your React application to production, you need to add the production logout URL to the "Allowed Logout URLs" list and ensure that Auth0 redirects your users to that production URL and not

localhost

returnTo

window.location.origin

Read more about how Logout works at Auth0.

Integrate the login and logout buttons

Let's wrap the

LoginButton

LogoutButton

AuthenticationButton

🛠 Create an

authentication-button.js

src/components/

touch src/components/authentication-button.js

🛠 Populate

src/components/authentication-button.js

// src/components/authentication-button.js

import React from 'react';

import LoginButton from './login-button';
import LogoutButton from './logout-button';

import { useAuth0 } from '@auth0/auth0-react';

const AuthenticationButton = () => {
  const { isAuthenticated } = useAuth0();

  return isAuthenticated ? <LogoutButton /> : <LoginButton />;
};

export default AuthenticationButton;

isAuthenticated

Auth0Context

true

false

There are some advantages to using this

AuthenticationButton

You can build flexible interfaces.

AuthenticationButton

LoginButton

LogoutButton

LogoutButton

You can build extensible interfaces. You can easily swap the

LoginButton

SignupButton

AuthenticationButton

NewAuthenticationButton

You can build declarative interfaces. Using

AuthenticationButton

NavBar

🛠 With that in mind, create an

auth-nav.js

src/components/

touch src/components/auth-nav.js

🛠 Populate

src/components/auth-nav.js

// src/components/auth-nav.js

import React from 'react';
import AuthenticationButton from './authentication-button';

const AuthNav = () => (
  <div className="navbar-nav ml-auto">
    <AuthenticationButton />
  </div>
);

export default AuthNav;

🛠 Finally, open

nav-bar.js

src/components/

// src/components/nav-bar.js

import React from 'react';

import MainNav from './main-nav';
import AuthNav from './auth-nav';

const NavBar = () => {
  return (
    <div className="nav-container mb-3">
      <nav className="navbar navbar-expand-md navbar-light bg-light">
        <div className="container">
          <div className="navbar-brand logo" />
          <MainNav />
          <AuthNav />
        </div>
      </nav>
    </div>
  );
};

export default NavBar;

By having different types of navigation bar subcomponents, you can extend each as you need without reopening and modifying the main

NavBar

🛠 Go ahead and try to log in. Your React application redirects you to the Auth0 Universal Login page. You can use a form to log in with a username and password or a social identity provider like Google. Notice that this login page also gives you the option to sign up.

SignupButton

LoginButton

SignupButton

AuthenticationButton

SignupButton

LoginButton

You can customize the appearance of New Universal Login pages. You can also override any text in the New Experience using the Text Customization API.

Notice that when you finish logging in and Auth0 redirects you to your React app, the login button briefly shows up (blue color), and then the logout button renders (red color).

The user interface flashes because your React app doesn't know if Auth0 has authenticated the user yet. Your app will know the user authentication status after the Auth0 React SDK loads.

🛠 To fix that UI flashing, use the

isLoading

Auth0Context

App

🛠 Open

src/app.js

// src/app.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';

import { NavBar, Footer, Loading } from './components';
import { Home, Profile, ExternalApi } from './views';

import './app.css';

const App = () => {
  const { isLoading } = useAuth0();

  if (isLoading) {
    return <Loading />;
  }

  return (
    <div id="app" className="d-flex flex-column h-100">
      <NavBar />
      <div className="container flex-grow-1">
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/profile" component={Profile} />
          <Route path="/external-api" component={ExternalApi} />
        </Switch>
      </div>
      <Footer />
    </div>
  );
};

export default App;

While the SDK is loading, the

Loading

Retrieving User Information

After a user successfully logs in, Auth0 sends an ID token to your React application. Authentication systems, such as Auth0, use ID Tokens in token-based authentication to cache user profile information and provide it to a client application. The caching of ID tokens can contribute to improvements in performance and responsiveness for your React application.

You can use the data from the ID token to personalize the user interface of your React application. The Auth0 React SDK decodes the ID token and stores its data in the

user

Auth0Context

How can you use the ID token to create a profile page for your users?

🛠 Update the

Profile

src/views/profile.js

// src/views/profile.js

import React from 'react';

import { useAuth0 } from '@auth0/auth0-react';

const Profile = () => {
  const { user } = useAuth0();
  const { name, picture, email } = user;

  return (
    <div>
      <div className="row align-items-center profile-header">
        <div className="col-md-2 mb-3">
          <img
            src={picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </div>
        <div className="col-md text-center text-md-left">
          <h2>{name}</h2>
          <p className="lead text-muted">{email}</p>
        </div>
      </div>
      <div className="row">
        <pre className="col-12 text-light bg-dark p-4">
          {JSON.stringify(user, null, 2)}
        </pre>
      </div>
    </div>
  );
};

export default Profile;

What's happening within the

Profile

• You destructure the

  user

  object to obtain the user

  name

  ,

  picture

  , and

  email

  .

• You then display these three properties in the user interface. Since the data comes from a simple object, you don't have to fetch it using any asynchronous calls.

• Finally, you display the full content of the decoded ID token within a code box. You can now see all the other properties available for you to use.

The

Profile

user

null

As such, you should protect the route that renders this component,

http://localhost:4040/profile

Protecting Routes

v6

v5

The Auth0 React SDK exposes a

withAuthenticationRequired

withAuthenticationRequired

ProtectedRoute

Use a Higher-Order Component to protect a route

🛠 Open

src/views/profile.js

// src/views/profile.js

import React from 'react';

import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';
import { Loading } from '../components';

const Profile = () => {
  const { user } = useAuth0();
  const { name, picture, email } = user;

  return (
    <div>
      <div className="row align-items-center profile-header">
        <div className="col-md-2 mb-3">
          <img
            src={picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </div>
        <div className="col-md text-center text-md-left">
          <h2>{name}</h2>
          <p className="lead text-muted">{email}</p>
        </div>
      </div>
      <div className="row">
        <pre className="col-12 text-light bg-dark p-4">
          {JSON.stringify(user, null, 2)}
        </pre>
      </div>
    </div>
  );
};

export default withAuthenticationRequired(Profile, {
  onRedirecting: () => <Loading />,
});

When you wrap your components in the

withAuthenticationRequired

Auth0Provider

withAuthenticationRequired

• The component that you want to protect.

• A configuration object to customize the authentication flow,

  WithAuthenticationRequiredOptions

  . This object takes the following optional properties:

  • loginOptions

    : It behaves exactly like the configuration options you can pass to

    loginWithRedirect()

    to customize the login experience.

  • returnTo

    : Lets you specify a path for React to redirect a user after the login transaction that the user triggered in this component completes.

  • onRedirecting

    : It renders a component while your React application redirects the user to the login page.

In the example above, users who have not logged in see the

Loading

/profile

export default withAuthenticationRequired(Profile, {
  onRedirecting: () => <Loading />,
});

The

onRedirecting

🛠 Try this out. Log out and visit

http://localhost:4040/profile

What if you are using React Router?

Using

withAuthenticationRequired

App

const App = () => {
  const { isLoading } = useAuth0();

  if (isLoading) {
    return <Loading />;
  }

  return (
    <div id="app" className="d-flex flex-column h-100">
      <NavBar />
      <div className="container flex-grow-1">
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/profile" component={Profile} />
          <Route path="/external-api" component={ExternalApi} />
        </Switch>
      </div>
      <Footer />
    </div>
  );
};

🛠 Instead of using

withAuthenticationRequired

ProtectedRoute

Create a component to protect React Router paths

The starter application uses React Router as its routing library. This example applies only to that library.

In this section, you'll create a

ProtectedRoute

Route

withAuthenticationRequired

ProtectedRoute

Route

ProtectedRoute

🛠 To start, create a

protected-route.js

src/auth

touch src/auth/protected-route.js

🛠 Populate

src/auth/protected-route.js

// src/auth/protected-route.js

import React from 'react';
import { Route } from 'react-router-dom';
import { withAuthenticationRequired } from '@auth0/auth0-react';
import { Loading } from '../components/index';

const ProtectedRoute = ({ component, ...args }) => (
  <Route
    component={withAuthenticationRequired(component, {
      onRedirecting: () => <Loading />,
    })}
    {...args}
  />
);

export default ProtectedRoute;

🛠 Finally, open the

src/app.js

Switch

Route

/profile

/external-api

ProtectedRoute

// src/app.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';

import { NavBar, Footer, Loading } from './components';
import { Home, Profile, ExternalApi } from './views';
import ProtectedRoute from './auth/protected-route';

import './app.css';

const App = () => {
  const { isLoading } = useAuth0();

  if (isLoading) {
    return <Loading />;
  }

  return (
    <div id="app" className="d-flex flex-column h-100">
      <NavBar />
      <div className="container flex-grow-1">
        <Switch>
          <Route path="/" exact component={Home} />
          <ProtectedRoute path="/profile" component={Profile} />
          <ProtectedRoute path="/external-api" component={ExternalApi} />
        </Switch>
      </div>
      <Footer />
    </div>
  );
};

export default App;

You don't need to use the

withAuthenticationRequired

Profile

🛠 Open

src/views/profile.js

// src/views/profile.js

import React from 'react';

import { useAuth0 } from '@auth0/auth0-react';

const Profile = () => {
  const { user } = useAuth0();
  const { name, picture, email } = user;

  return (
    <div>
      <div className="row align-items-center profile-header">
        <div className="col-md-2 mb-3">
          <img
            src={picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </div>
        <div className="col-md text-center text-md-left">
          <h2>{name}</h2>
          <p className="lead text-muted">{email}</p>
        </div>
      </div>
      <div className="row">
        <pre className="col-12 text-light bg-dark p-4">
          {JSON.stringify(user, null, 2)}
        </pre>
      </div>
    </div>
  );
};

export default Profile;

🛠 You can now test that these two paths require users to log in before they can access them. Log out and try to access the Profile or External API page. If it works, React redirects you to log in with Auth0.

Which route protection strategy would you prefer to use in your React applications? The

withAuthenticationRequired

HOC or the

ProtectedRoute

component? Please, let me know in the comments below.

Calling an API

This section focuses on showing you how to get an access token in your React application and how to use it to make API calls to protected API endpoints.

When you use Auth0, you delegate the authentication process to a centralized service. Auth0 provides you with functionality to log in and log out users from your React application. However, your application may need to access protected resources from an API.

You can also protect an API with Auth0. There are multiple API quickstarts to help you integrate Auth0 with your backend platform.

When you use Auth0 to protect your API, you also delegate the authorization process to a centralized service that ensures only approved client applications can access protected resources on behalf of a user.

How can you make secure API calls from React?

Your React application authenticates the user and receives an access token from Auth0. The application can then pass that access token to your API as a credential. In turn, your API can use Auth0 libraries to verify the access token it receives from the calling application and issue a response with the desired data.

Instead of creating an API from scratch to test the authentication and authorization flows between the client and the server, you'll use a demo Express API that I've prepared for you.

Get the Express API demo

🛠 Open a new terminal window and clone the

auth0-express-js-sample

git clone git@github.com:auth0-blog/auth0-express-js-sample.git

🛠 Once you clone this repo, make the

auth0-express-js-sample

cd auth0-express-js-sample

🛠 Install the Node.js project dependencies:

npm install

Connect the Express API with Auth0

Create a communication bridge between Express and Auth0

This process is similar to how you connected React with Auth0.

🛠 Head to the APIs section in the Auth0 Dashboard, and click the "Create API" button.

🛠 Then, in the form that Auth0 shows:

• Add a Name to your API:

Auth0 Express Sample

• Set its Identifier value:

https://express.sample

• Leave the signing algorithm as

  RS256

  as it's the best option from a security standpoint.

Identifiers are unique strings that help Auth0 differentiate between your different APIs. We recommend using URLs to facilitate creating unique identifiers predictably; however, Auth0 never calls these URLs.

🛠 With these values in place, hit the "Create" button. Keep this page open as you'll need some of its values in the next section.

Add the Auth0 configuration variables to Express

🛠 Create a

.env

auth0-express-js-sample

touch .env

🛠 Populate this

auth0-express-js-sample/.env

SERVER_PORT=6060
CLIENT_ORIGIN_URL=http://localhost:4040
AUTH0_AUDIENCE=
AUTH0_DOMAIN=

🛠 Head back to your Auth0 API page, and follow these steps to get the Auth0 Audience:

1. 🛠 Click on the "Settings" tab.

2. 🛠 Locate the "Identifier" field and copy its value.

3. 🛠 Paste the "Identifier" value as the value of

   AUTH0_AUDIENCE

   in

   .env

   .

Now, follow these steps to get the Auth0 Domain value:

1. 🛠 Click on the "Test" tab.
2. 🛠 Locate the section called "Asking Auth0 for tokens from my application".
3. 🛠 Click on the cURL tab to show a mock

   POST

   request.
4. 🛠 Copy your Auth0 domain, which is part of the

   --url

   parameter value:

   tenant-name.region.auth0.com

   .
5. 🛠 Paste the Auth0 domain value as the value of

   AUTH0_DOMAIN

   in

   .env

   .

🛠 With the

.env

npm start

Configure React to connect with the Express API

🛠 Head back to the

auth0-react-sample

🛠 Locate the

auth0-react-sample/.env

REACT_APP_AUTH0_DOMAIN=YOUR-AUTH0-DOMAIN
REACT_APP_AUTH0_CLIENT_ID=YOUR-AUTH0-APP-CLIENT-ID
REACT_APP_AUTH0_AUDIENCE=https://express.sample
REACT_APP_SERVER_URL=http://localhost:6060

🛠 The value of

REACT_APP_AUTH0_AUDIENCE

AUTH0_AUDIENCE

auth0-express-js-sample/.env

.env

REACT_APP_

create-react-app

REACT_APP_

.env

create-react-app

NODE_ENV

REACT_APP_

.env

Your React application needs to pass an access token when it calls a target API to access protected resources. You can request an access token in a format that the API can verify by passing the audience and scope props to

Auth0Provider

Any changes that you make to React environment variables require you to restart the development server if it is running.

🛠 Restart your React application so that it can use the new values you've set in

auth0-react-sample/.env

🛠 Update the

auth0-provider-with-history.js

auth0-react-sample/src/auth

audience

// src/auth/auth0-provider-with-history.js

import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';

const Auth0ProviderWithHistory = ({ children }) => {
  const history = useHistory();
  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
  const audience = process.env.REACT_APP_AUTH0_AUDIENCE;

  const onRedirectCallback = (appState) => {
    history.push(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={audience}
    >
      {children}
    </Auth0Provider>
  );
};

export default Auth0ProviderWithHistory;

Why is the Auth0 Audience value the same for both apps? Auth0 uses the value of the

audience

The actions that your React application can perform on the API depend on the scopes that your access token contains, which you define as the value of a

scope

Auth0Provider

Remember that screen you saw when you first logged in with Auth0 asking you for permission to access your profile information? Your React application will request authorization from the user to access the requested scopes, and the user will approve or deny the request. You may have seen something similar when sharing your contacts or photos from a social media platform with a third-party application.

When you don't pass a

scope

Auth0Provider

openid profile email

• openid

  : This scope informs the Auth0 Authorization Server that the Client is making an OpenID Connect (OIDC) request to verify the user's identity. OpenID Connect is an authentication protocol.

• profile

  : This scope value requests access to the user's default profile information, such as

  name

  ,

  nickname

  , and

  picture

  .

• email

  : This scope value requests access to the

  email

  and

  email_verified

  information.

The details of the OpenID Connect Scopes go into the ID Token. However, you can define custom API scopes to implement access control. You'll identify those custom scopes in the calls that your client applications make to that API. Auth0 includes API scopes in the access token as the

scope

The concepts about API scopes or permissions are better covered in an Auth0 API tutorial such as "Use TypeScript to Create a Secure API with Node.js and Express: Role-Based Access Control".

🛠 Update

src/views/external-api.js

// src/views/external-api.js

import React, { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const ExternalApi = () => {
  const [message, setMessage] = useState('');
  const serverUrl = process.env.REACT_APP_SERVER_URL;

  const { getAccessTokenSilently } = useAuth0();

  const callApi = async () => {
    try {
      const response = await fetch(`${serverUrl}/api/messages/public-message`);

      const responseData = await response.json();

      setMessage(responseData.message);
    } catch (error) {
      setMessage(error.message);
    }
  };

  const callSecureApi = async () => {
    try {
      const token = await getAccessTokenSilently();

      const response = await fetch(
        `${serverUrl}/api/messages/protected-message`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      const responseData = await response.json();

      setMessage(responseData.message);
    } catch (error) {
      setMessage(error.message);
    }
  };

  return (
    <div className="container">
      <h1>External API</h1>
      <p>
        Use these buttons to call an external API. The protected API call has an
        access token in its authorization header. The API server will validate
        the access token using the Auth0 Audience value.
      </p>
      <div
        className="btn-group mt-5"
        role="group"
        aria-label="External API Requests Examples"
      >
        <button type="button" className="btn btn-primary" onClick={callApi}>
          Get Public Message
        </button>
        <button
          type="button"
          className="btn btn-primary"
          onClick={callSecureApi}
        >
          Get Protected Message
        </button>
      </div>
      {message && (
        <div className="mt-5">
          <h6 className="muted">Result</h6>
          <div className="container-fluid">
            <div className="row">
              <code className="col-12 text-light bg-dark p-4">{message}</code>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ExternalApi;

What is happening now within the

ExternalApi

• You add a

  callApi()

  method that performs a public API request.

• You add a

  callSecureApi()

  method that performs a secure API request as follows:

  • (a) Get the access token from Auth0 using the

    getAccessTokenSilently

    method, which gets your React application a new access token under the hood without requiring the user to log in again.

  • (b) Pass that access token as a bearer credential in the authorization header of the request.

• You use the

  useState()

  React hook to update the user interface whenever any of the described API calls complete successfully.

Your previous login request did not include an audience parameter. As such, the React SDK doesn't have an access token stored in memory.

localStorage

🛠 Log out and log back in to get a new access token from Auth0 that includes the audience information.

🛠 Visit

http://localhost:4040/external-api

Get Public Message:

The API doesn't require an access token to share this message.

Get Protected Message:

The API successfully validated your access token.

Conclusion

You have implemented user authentication in React to identify your users, get user profile information, and control the content that your users can access by protecting routes and API resources.

This tutorial covered the most common authentication use case for a React application: simple login and logout. However, Auth0 is an extensible and flexible 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.

In a follow-up guide, we'll cover advanced authentication patterns and tooling, such as using a pop-up instead of a redirect to log in users, adding permissions to ID tokens, using metadata to enhance user profiles, and much more.

Let me know in the comments below what you thought of this tutorial. Thank you for reading and stay tuned, please.