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.