useAuth0().isAuthenticated returns initialy false then true

I am using

@auth0/auth0-react

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

image

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 
        </>
    )
};

Hey there @Maces!

Can I ask you to raise that as a GitHub issue here:

so we can work on that directly with the repo maintainers? Make sure to share the link to the issue with us here so we can ping them. Thank you!

1 Like

Thanks for this. This worked exactly as expected.

1 Like

Thanks for sharing it with the rest of community!