How to Use Refresh Tokens in React

[travis.evers]

Overview

This article explains how to use Refresh Tokens with React SDK.

Applies To

• Refresh Tokens
• React SDK

Solution

Download the React Quickstart Application from Auth0 Dashboard.

Configure the React SDK to use refresh tokens like this:

const providerConfig = {
  domain: config.domain,
  clientId: config.clientId,
  useRefreshTokens: true,
  onRedirectCallback,
  authorizationParams: {
    redirect_uri: window.location.origin,
    ...(config.audience ? { audience: config.audience } : null),
  },
};

In Applications > APIs > API settings configure a 120 second lifetime for the access tokens, like in this screenshot:

1. Launch the application and the api server (npm start),
2. Log in with Auth0,
3. Click the Ping API button
4. Wait for two minutes
5. Click the Ping API button again and the React application will send a Refresh Token request, just before calling the API with a newly obtained access token:
   
   
   
   To inspect this in tenant logs, the event type code for successful refresh token exchange is “sertft”: Log Event Type Codes