auth0 - getting access token / refresh token in your jwt using react-sdk

 

To get your refresh_token from auth0 - we need just need to provide a offline_access scope for react sdk as shown in the code below:-

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

const root = ReactDOM.createRoot(

  document.getElementById('root') as HTMLElement

  );

  root.render(

    <React.StrictMode>

        <Auth0Provider

        domain="your-domain.auth0.com"

        clientId="your-client-id"

        authorizationParams={{

          redirect_uri: window.location.origin,

          audience: "https://your-api-identifier",

          scope: "offline_access"

        }}

        >

          <App />

        </Auth0Provider>

    </React.StrictMode>

    );

Right after you login, you would be able to see refresh token being provided in your jwt. From this point onwards you can exchange that for a fresh new set of access token to keep you logged in.

From the above, you probably noticed that Auth0, provide access token, id token and refresh token. Refresh token is a custom format, id token provide information of the authentication provider and access token contains information about the client, scopes and expiry details.