How to keep the state variable value intact upon screen reload-CodePudding

I am new to React and I tried to toggle the Login/Logout based on the current state of authentication. I've used Google OAuth to perform the authentication.

I have a state variable to say if the user is authenticated or not and is defaulted to false. Upon successful authentication, I set the state to true.

Now the problem is, after completing a successful authentication, when I refresh the screen, the screen reloads and I see the console.log printing false and login appears momentarily. And after a second the console.log prints true and then the logout appears. How do I avoid showing login screen (for that one second after refreshing the screen) when the authentication is completed? Can someone help me please? Thanks.

const [isAuthenticated, setIsAuthenticated] = useState(false);

useEffect(() => {
    setIsAuthenticated(false)
}, [])

const handleSuccessAuth = x => {
    setIsAuthenticated(true)
}

const handleFailureAuth = x => {
    setIsAuthenticated(false)
}

const handleLogout = x => {
    setIsAuthenticated(false)
}

console.log(isAuthenticated)
if(!isAuthenticated)
{
    return (
            <div>
                <LoginView
                    handleSuccessAuth = {handleSuccessAuth}
                    handleFailureAuth = {handleFailureAuth}
                />
            </div>
           )
}
else
{            
    return (
            <div>    
                <LogoutView
                    handleLogout = {handleLogout}
                />
            </div>)
}

CodePudding user response：

If your variable goes from false to true it means your code is doing something, probably an AJAX call, my recommendation is to show a loading scree/message until the AJAX request is completed.

CodePudding user response：

There is no way to keep the variable intact on reload but you can keep a variable that tracks if the user authentication has been initialized and show a loading indicator in the meantime

const [isAuthenticated, setIsAuthenticated] = useState(false);
const [authLoaded, setAuthLoaded] = useState(false)

// this does nothing, passing false to useState above sets the initial value
// useEffect(() => {
//     setIsAuthenticated(false)
// }, [])

const handleSuccessAuth = x => {
    setIsAuthenticated(true)
    setAuthLoaded(true)
}

const handleFailureAuth = x => {
    setIsAuthenticated(false)
    setAuthLoaded(true)
}

const handleLogout = x => {
    setIsAuthenticated(false)
}

console.log(isAuthenticated)

if (!authLoaded) {
  return <div>loading...</div>
}

if(!isAuthenticated)
{
    return (
            <div>
                <LoginView
                    handleSuccessAuth = {handleSuccessAuth}
                    handleFailureAuth = {handleFailureAuth}
                />
            </div>
           )
}
else
{            
    return (
            <div>    
                <LogoutView
                    handleLogout = {handleLogout}
                />
            </div>)
}