I’ve built a react app that uses Auth0 (free plan tier for now) for authentication/authorisation.
I have an Axios interceptor in my react app that calls Auth0’s getAccessTokenSilently and appends the result of that as a bearer token to allow access to an api.
When I click a page says “Users” on my UI, it works but the moment i refresh that page, the above interceptor logic is triggered and getAccessTokenSilently is having to go back to auth0 to retrieve a new access token which causes a few seconds of delay.
Meaning the users page is not populated until after a few seconds when the getAccessTokenSilently returns the access token.
I am aware of the issue causing this as documented here:
And there’s also a guide on what needs to be done to fix it:
Which I’ve done but getAccessTokenSilently is still going back to auth0 to retrieve a new access token even though I can clearly see in localStorage that the auth data is there and the token is valid.
Therefore getAccessTokenSilently should retrieve that access token instead of going to Auth0 as it is documented that it will retrieve the existing access token if it is valid otherwise it will ping auth0 to rerieve a new token.
I have also seen this answer on SO Auth0 does not persist login on page refresh for email/password but again doesnt really solve my issue.
My problem is even after having done the above suggested solutions getAccessTokenSilently is still going to auth0 to rerieve a new access token rather than getting it from local storage?