React SDK with multiple audiences and refresh tokens

I have setup a React application with auth0/auth0-react@2.0.0 that communicates with two different APIs (API-1 and API-2). Both of these backends have an API created in Auth0 Dashboard with a different audience. API-2 has RBAC and “Add permissions in Access Token” enabled. In the React application, the Auth0Provider is setup with audience=API-1 since this is the main API. The frontend is served with HTTPS locally and a custom domain like myapp.local.com to prevent consent prompt in local development. In a specific page I make a request to API-2. I’m using:

getAccessTokenSilently({
  authorizationParams: {
    audience: "API-2",
    scope: "api-2-permission",
  },
});

To get an access token to request API-2.

This works if I use a browser that doesn’t have a strict third-party cookie policy i.e Chrome. If I use Brave with Shield enabled, I end up in a login_required error loop between my callback page and the universal login screen. I narrowed it down to Brave’s strict cookie policy. To escape from such problem, I tried to use refresh tokens. I enabled refresh tokens and offline access on both API-1 and API-2. I set useRefreshTokens={true} on the Auth0Provider in the React app. I get the a refresh token when the app boots with the initial call to /oauth/token. However when I make the call to API-2 I have an error saying: Missing Refresh token ("audience" = "API-2").

Is it possible to have refresh tokens for a different audience than the one setup with the Auth0Provider without having to login again the user? If not, is the only way to prevent the login_required error to use a custom domain for our Auth0 account so the cookies would not get blocked?

Thank you.

Hey there @jonas.pauthier!

It is not possible to change the audience in this context - This is expected behavior. The refresh token flow will only provide an access token which matches that of the token previously received (possible to down scope).

It might be worth looking into configuring a single logical API to represent both APIs in order to simplify your use case:

Thank you @tyf for your answer. I will look into logical API and let you know.

1 Like