for my SPA i followed the offcial tutorial over here
to login and everything is working fine however when i return to the application i am using
useAuth0().isAuthenticated
to verify if user is logged in or not when i login first time the code block below works perfectly
const App: React.SFC<{}> = () => {
const Authenticated = useAuth0().isAuthenticated;
console.log(useAuth0().isAuthenticated)
return (
<>
{Authenticated && <afterLogin/>} // Shows after login
{!Authenticated && <beforeLogin/>} // Shows before login where login button is
</>
)
};
When refreshing the page “beforeLogin” component will get rendered for 2, 3 seconds before the “afterLogin” component will render which is not nice also it is useable during that period
as you can read i added a console log to monitor this behavior and it turns out useAuth0().isAuthenticated will return false first and then after a while it will return true
ultimately i want the value to be correct every time i call it, and since this is a property i cannot await for it
I have found a work around which is another property in the
useAuth0().isLoading
using a combination of those 2 i can handle the rendering better however i want to confirm that if it is possible for isAuthenticated and isLoading to be both true at the same time ? i couldn’t manage to achieve this by manually testing
edit :
just to explain further on the answer in case someone tried the same the code now looks like
const App: React.SFC<{}> = () => {
const Authenticated = useAuth0().isAuthenticated;
const Loading = useAuth0.isLoading;
return (
<>
<Modal show={Loading && !Authenticated }> // Show modal while loading Auth0
{(Authenticated && !Loading) && <afterLogin/>} // Shows after login
{(!Authenticated && !Loading) && <beforeLogin/>} // Shows before login where login button is
</>
)
};
