刷新页面后，用户信息会丢失（Firebase + React）

Question

I am trying to create a Navigation bar. When the user is not logged in, they see a Navigation bar, with the title of the page only. Once the user logs in, he should see the title, other pages, his email address, and a logout button.

I can retrieve the email address, but when I refresh the page and click the logout button I get an error saying:

TypeError: Cannot read property 'email' of null

I am attaching my code for the navigation bar and how I can it in app.js, down below.

I am not sure how can I tackle this problem.

NavigationBar.js:

const NavigationBar = ({ authUser }) => (
  <div>{authUser ? <NavigationBarAuth /> : <NavigationBarNonAuth />}</div>
);

const NavigationBarAuth =()=>{
    return (
         ...
         <Grid item xs={3}>
           <div className ="nav-user"> 
               <a className = "font user">{fire.auth().currentUser.email}</a>
           </div>
         </Grid>    
    );

App.js:

 constructor(props) {
    super(props);

    this.state = {
      authUser: null,
      // authUser: JSON.parse(localStorage.getItem('authUser')),
    };
  }
  componentDidMount() {
    this.listener = fire.auth().onAuthStateChanged(
      authUser => {
        authUser
          ? this.setState({ authUser })
          : this.setState({ authUser: null });
      },
    );
  }
 componentWillUnmount() {
    this.listener();
  }
  render() {
    return (
            ...
            <NavigationBar authUser={this.state.authUser} />
    );
  }

Answer 1

After debugging, I understood the problem was somewhere else. I had a Signout function and called the function in button onClick. I called the function wrongly which is why the signout function got fired and nullified the user. Thanks for your help and effort.