React firebase authentication returns null

Question

I am trying to retrieve the properties of my firebase Auth object. When I print the Auth object in the console I am able to access the "displayName" property but when I pass the Auth object into my component, I keep getting the error "Cannot read property 'displayName' of null". Here is the code below:

class App extends React.Component {
  constructor() {
    super();

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

  unsubscribeFromAuth = null;

  componentDidMount() {
    this.unsubscribeFromAuth = auth.onAuthStateChanged((user) => {
      this.setState({ currentUser: user });
      console.log(user.displayName); // I am able to access the property here
    });
  }

  componentWillUnmount() {
    this.unsubscribeFromAuth();
  }

  render() {
    const { currentUser } = this.state;
    console.log(currentUser.displayName); // I am unable to access it here
    return (
      <div className="App">
        <Navbar currentUser={currentUser} />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/login" component={LoginPage} />
          <Route path="/signup" component={SignUpPage} />
          <Route path="/shop" component={ShopPage} />
        </Switch>
      </div>
    );
  }
}

export default App;

@Amiteshmanitiwari has to do with the component lifecycle. put the currentUser in a ternary operator { currentUser ? <Navbar user={currentUser} /> : <LoggedOutNavbar /> } — oladimeji
– oladimeji, Commented Mar 15, 2021 at 5:55

David · Accepted Answer · 2020-06-26 20:48:55Z

1

The problem is, that the render method is executed, before a user is there.

The render method is executed before the componentDidMount method, so the very first time, the current user is always null. See lifecycle cheatsheet here: https://twitter.com/pbesh/status/738008776805060608
Even after onAuthStateChanged is executed, there might not be a user available. Firebase suggests to always check if the user is there, before accessing it, see: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onauthstatechanged

So the solution is to expect that the current user can be null and make a check in the render method. Example:

{
    currentUser ? <Navbar user={currentUser} /> : <LoggedOutNavbar />
}

answered Jun 26, 2020 at 20:48

David

9606 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React firebase authentication returns null

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related