how can ı handle react with firebase authentication problem?

Question

I am trying develop user authentication page in react with firebase. I can sign in but then sign in doesn't change to sign out. what is the problem?

  
    const handleAuthentication = () => {
    if(user){
        auth.signOut();
    }
   }

  <div onClick={handleAuthentication} 
            className="header_option">
                <span 
                className="header_optionLineOne" >Hello, Guest</span>
                <span 
                className="header_optionLineTwo" >{user ? 
                'Sign Out': 'Sign In'}</span>
   </div>

Answer 1

Probably the user is actually signed out, but the UI is not rerendering as it doesn't know about the change.

To fix this, you'll want to store the user in the component's state, with either setState or a useState hook:

const [user, setUser] = useState(null);

auth.onAuthStateChanged((user) => {
  setUser(user);
});

With the user being part of the state, the call to setUser(user) will cause the component to rerender and thus show the updated (lack of) user information.

Also see the first code snippet in the Firebase documentation on getting the current user.