useAuth0().isAuthenticated returns initialy false then true

Help
1

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

2

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

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
5

Thanks for sharing it with the rest of community!

6

Hi,

im currently experimenting something weird with the isLoading and isAuthenticated.

During my login process, i get both isLoading and isAuthenticated to False, so my beforeLogin component flash on the screen…

Is this normal?

2 Likes
7

Hi!! Did you find a way to fix that? Im having the same issue! isLoading and isAuthenticated are both false :frowning:

1 Like
8

I also have this issue of isLoading and isAuthenticated both being false for a split second on load of the page

9

I was able to reproduce this on Firefox.

10

Same here, I get:

isLoading: true
isAuthenticated: false

Then I’ll get

isLoading: false
isAuthenticated: false

and then

isLoading: true
isAuthenticated:  false

and finally

isLoading: false
isAuthenticated: true

Which means we show a temporary render of the app (in an error state) and then it all works out with the final update