User gets nullified after onAuthStateChanged, firebase and react

Question

I am trying to make a Navigation class in React. The idea is to show a navigation bar with Title of the webpage when the user is not logged in. Once he is logged in he will see another navigation bar with Title, other pages, user email, and a logout button. I am trying to do it with javascript condition (see the code below).

I see that the user can log in, but the user gets null in the very next second and comes back to the login page. I tracked it with the help of console.log(). I get something like this:

Navigation for authUser hey. user Navigation for authUser null Navigation for NonAuthUser no user Navigation for NonAuthUser Navigation for NonAuthUser

Why am I having this problem? I will be thankful if someone can explain it to me.

class NavigationBar extends Component {

  constructor(props) {
    super(props);

    this.state = {
      user: null,
    };
  }

  authListener = () =>{
      fire.auth().onAuthStateChanged((user) => {
        if (user) {
          this.setState(this.state.user = user);
          localStorage.setItem('user', user.uid);
          console.log("hey. user");
        } else {
          this.setState(this.state.user = null);
          localStorage.removeItem('user');
          console.log("no user");
        }
      });
    };
  componentDidMount(){
      this.authListener();
    }
 signOut = () => {
  fire.auth().signOut();

}
 navigationBarNonAuth =()=>{

  console.log('Navigation for NonAuthUser');

    return (
       <Grid container spacing={24}>
              <Grid item xs={6}>
                <Link to ={ROUTES.Login}>
                  <span>
                    <div className = "title">
                        <h1 className="app-title">SAVE ME!</h1>
                    </div>
                  </span>
                </Link>
              </Grid>
             .....
   );
  }


   navigationBarAuth =()=>{
     console.log('Navigation for authUser');

    return ( 
<Grid container spacing={24}>
              <Grid item xs={6}>
                <Link to ={ROUTES.Login}>
                  <span>
                    <div className = "title">
                        <h1 className="app-title">SAVE ME!</h1>
                    </div>
                  </span>
                </Link>
              </Grid>
                <Grid item xs={1}>
                <div className ="nav-sign font signout">
                  <i onClick={this.signOut()} className="fas fa-sign-out-alt" title="Sign Out"></i>
                </div>
              </Grid>
       .....
    );
  }
  render() {

    return (
          <div>
            {this.state.user ? this.navigationBarAuth() : this.navigationBarNonAuth()}

          </div>
      );
  }
}

export default NavigationBar;

Answer 1

Can you try:

this.setState((state, props) => ({
  user
}));

or

this.setState({
  user
});

in your if (user) statement ?

setState()

Answer 2

The problem was how I called the signout function in navigationBarAuth(). The way wrote previously, it made the signout function fire at once, which is why the user got logged out immediately. The correct way to write is:

<i onClick={this.signOut} className="fas fa-sign-out-alt" title="Sign Out"></i>