Hi,
I have a set of pages that are only accessible when my user is authenticated by Auth0. So if I go on page ‘account’, it will only be accessible if my user is authenticated. In my code, I check the variable isAuthenticated on this route.
But the way Auth0 works in a SPA (with library auth0-react and hook useAuth0) is it starts by setting isLoading to true and does the authentication call in the background. When the loading part is done, isLoading goes to false. A few moments later, if the authentication succeeded, the variable isAuthenticated is set to true.
That being said, here’s how I’m using these two variables when my SPA loads my ‘Account’ page with restricted access:
1- Browser goes to ‘Account’ page
2- isLoading is set to true in my SPA code
3- A spinner is shown in this page while it is loading
4- isLoading is set to false in my SPA
At this point, I’m at a crossroads. If I’m just a visitor, I’ll redirect the browser to an ‘Unauthorized’ page. If I’m authenticated, I want to see the content of the ‘Account’ page.
But when the isLoading variable is set to false, the isAuthenticated variable hasn’t been set to true yet. So I don’t know if I should redirect to an unauthorized page or wait for my authentication to be set.
Is there a way to know Auth0 is doing a fetch in the background to authenticate the user? This way, I could keep my spinner in the SPA until I get a response from this background call.
Or is there a different way to handle routes while I’m waiting for my variable isAuthenticated to be set to true.