GraphQL playgrounds and useAuth0 from @auth0/auth0-react

Currently, we are doing something like this to pass a bearer token to the server to authenticate API calls (including our graphQL endpoint):

// Get the method to get the access token
const { getAccessTokenSilently } = useAuth0()

// Get the token.
const token = await getAccessTokenSilently()

// Construct the "Authorization: Bearer ..." header and call fetch.
const result = await fetch(...)

This is fine for our app, but we also want to use common graphQL playgrounds, such as graphQL playground, altair, etc.

In each of these, there’s usually some mechanism to allow the user to set headers, or in some cases, run (sync) code in the event the token was in local storage.

That said, auth0 has moved away from storing the bearer token in local storage or something that can be accessed synchronously.

What is the recommended way to get the bearer token for these environments where we don’t have access over the code to run the auth0 hooks to get the bearer token for authentication?

Note that I have tried to set the cacheLocation to localstorage as per:

But the tokens that are stored in local storage are expired and not what is sent when using calls to getAccessTokenSilently.