Can't use getAccessTokenSilently after enabling rotating refresh token when 3rd party cookies are blocked

[lchen]

Spend the whole night and have 50+ tabs opened but still can’t find why it’s not working.

The issue here is exactly like https://community.auth0.com/t/is-it-currently-impossible-without-custom-domains-to-get-a-token-with-safari-browser/41361.

I am using auth0-react in a React spa, trying to call a custom backend api.

Current set up,

1. Rotating refresh token has been enabled at the Application’s settings.
2. API side, I have enabled the AllowOfflineAccess, not sure if this is needed.
3. 's props have been configured to use refresh token and shall cache it at the localStorage.

      useRefreshTokens={true}
      cacheLocation="localstorage"

I can see access tokens get renewed (with bigger expirations) when I call getAccessTokenSilently() with ignoreCache.

But once I blocked 3rd-party cookies, getAccessTokenSilently would throw ‘Login Required’ error before looping between current page and the universal login page.

Also, in the document, it says that getAccessTokenSilently () with an audience value will always require using auth0’s cookies.

• If an audience value is given to this function, the SDK always falls
• back to using an iframe to make the token exchange.
• Note that in all cases, falling back to an iframe requires access to
• the auth0 cookie.
  https://github.com/auth0/auth0-react/blob/bb8ec720d85fad347e9105a7dc36e3de9cd29a85/src/auth0-context.tsx#L56

From what I learnt this can only be solved by upgraded to a paid plan and use a custom domain, which is not very feasible for us, as this is a crow-sourcing data collection web app for a non-profit. We will have a lot of users activities in a short period following by months of no activities.

Does anyone know the method @dan.woda recommended in that post that can solve this issue? Or did I missed anything in the configuration or in the code?

Thank you,

[stephanie.chamblee]

Hi @lchen,

Instead of passing the audience to the getAccessTokenSilently method, can you include the audience (as well as any additional scopes) in the Auth0Provider? If the app initiates with the audience in the provider component, you should be able to avoid silent authentication, which is resulting in the “login required” error:

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    redirectUri={window.location.origin}
    audience='https://you-api-identifier'
    scope="read:something"
    onRedirectCallback={onRedirectCallback}
    useRefreshTokens={true}
    cacheLocation="localstorage"
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

[lchen]

Thank you, Stephanie, this change solved my issue.