How to implement rotating refresh tokens with audience parameter in React?

mara.vaihinger · September 2, 2020, 8:46am

Hi everyone,

I followed the React starting guide and successfully implemented session cookie based authentication in our react frontend. Now I’d like to switch to using rotating refresh tokens but am facing problems to do so. I read this blog post and followed this implementation.

I’m using getAccessTokenSilently with the audience parameter set to get an access token for further requests to my backend API. The react application falls back to session based authentication and does not use the refresh token to get a new access token.

I’m wondering whether I misunderstood some basic concept. Should one use rotating refresh tokens in a setup with a SPA frontend and some backend APIs?

If yes, I’d be really happy if someone could explain to me how to implement rotating refresh tokens with audience parameter in React?

Thanks for you support

dan.woda · September 2, 2020, 9:43pm

Hi @mara.vaihinger,

If you are using the auth0 react sdk (different from auth0-spa-js), you will need to tell the sdk to use refresh tokens. You can also instruct it to store them in localstorage.

github.com

auth0/auth0-react/blob/bb8ec720d85fad347e9105a7dc36e3de9cd29a85/src/auth0-provider.tsx#L78


      
           * The location to use when storing cache data. Valid values are `memory` or `localstorage`.
           * The default setting is `memory`.
           */
          cacheLocation?: CacheLocation;
          /**
           * If true, refresh tokens are used to fetch new access tokens from the Auth0 server. If false, the legacy technique of using a hidden iframe and the `authorization_code` grant with `prompt=none` is used.
           * The default setting is `false`.
           *
           * **Note**: Use of refresh tokens must be enabled by an administrator on your Auth0 client application.
           */
          useRefreshTokens?: boolean;
          /**
           * A maximum number of seconds to wait before declaring background calls to /authorize as failed for timeout
           * Defaults to 60s.
           */
          authorizeTimeoutInSeconds?: number;
          /**
           * Changes to recommended defaults, like defaultScope
           */
          advancedOptions?: {
            /**

mara.vaihinger · September 4, 2020, 11:16am

Thanks @dan.woda , storing RTs in localStorage did it.

And I figured out that I misunderstood the docs on getAccessTokenSilently. As I understand it now, the /token endpoint is called with the ‘refresh_token’ grant in an iframe if there’s a refresh token stored and the audience parameter is set. So no fallback to session authentication in this case.

dan.woda · September 4, 2020, 8:53pm

Thanks for updating us!

system · September 19, 2020, 8:53pm

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.