React: Call an API

The Auth0Provider setup is similar to the one discussed in the Configure the Auth0Provider component section: you wrap your root component with Auth0Provider to which you pass the domain and clientId props. The values of these two props come from the "Settings" values of the single-page application you've registered with Auth0.

However, your React application needs to pass an access token when it calls a target API to access private resources. You can request an access token in a format that the API can verify by passing the audience and scope props to Auth0Provider as follows:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(
  <Auth0Provider
    domain="{yourDomain}"
    clientId="{yourClientId}"
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: "https://{yourDomain}/api/v2/",
      scope: "read:current_user update:current_user_metadata"
    }}
  >
    <App />
  </Auth0Provider>
);

Auth0 uses the value of the authorizationParams.audience prop to determine which resource server (API) the user is authorizing your React application to access.

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 authorizationParams.scope. Your React application will request authorization from the user to access the requested scopes, and the user will approve or deny the request.

Once you configure Auth0Provider, you can easily get the access token using the getAccessTokenSilently() method from the useAuth0() custom React Hook wherever you need it.

Take this Profile component as an example:

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

const Profile = () => {
  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
  const [userMetadata, setUserMetadata] = useState(null);

  return (
    isAuthenticated && (
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
        <h3>User Metadata</h3>
        {userMetadata ? (
          <pre>{JSON.stringify(userMetadata, null, 2)}</pre>
        ) : (
          "No user metadata defined"
        )}
      </div>
    )
  );
};

export default Profile;

As it is, userMetadata is always null in the Profile component. Add the following useEffect() hook to the component to fetch the user metadata from an API:

useEffect(() => {
  const getUserMetadata = async () => {
    const domain = "{yourDomain}";

    try {
      const accessToken = await getAccessTokenSilently({
        authorizationParams: {
          audience: `https://${domain}/api/v2/`,
          scope: "read:current_user",
        },
      });

      const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`;

      const metadataResponse = await fetch(userDetailsByIdUrl, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });

      const { user_metadata } = await metadataResponse.json();

      setUserMetadata(user_metadata);
    } catch (e) {
      console.log(e.message);
    }
  };

  getUserMetadata();
}, [getAccessTokenSilently, user?.sub]);

You use a React Effect Hook to call an asynchronous getUserMetadata() function. The function first calls getAccessTokenSilently(), which returns a Promise that resolves to an access token that you can use to make a call to a protected API.

You pass an object with the authorizationParams.audience and authorizationParams.scope properties as the argument of getAccessTokenSilently() to ensure that the access token you get is for the intended API and has the required permissions to access the desired endpoint.

You can then include the access token in the authorization header of the API call that you make. The API will take care of validating the access token and processing the request.

Upon success, you extract the user_metadata property from the API response and use setUserMetadata() to make React aware of it.

As a final reminder, consult the Auth0 API quickstarts to learn how to integrate Auth0 with your backend platform.