How to Use Refresh Tokens in React

Knowledge Articles
,
1

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:

rtaImage (45).jpeg
rtaImage (45).jpeg790×840 46.9 KB

  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:
    rtaImage (46).jpeg
    rtaImage (46).jpeg1809×780 133 KB

    To inspect this in tenant logs, the event type code for successful refresh token exchange is “sertft”: Log Event Type Codes