1

I am using Firebase in my React project. The issue that the app would not redirect to Login page when users not logged in yet.

In my Home.js I have This page allows to only users who have already logged in the app.

class Home extends React.Component {
constructor(props) {
  super(props);
}

logout = () => {
  firebase.auth().signOut();

  this.props.history.push("/login");
};

render() {
  if (firebase.auth().currentUser === null) {
    return <Redirect to="/login" />;
  }

  return (
    <div>
      <div>
        <Button variant="contained" color="primary" onClick={this.logout}>
          Google Logoout
        </Button>
      </div>
    </div>
  );
}
}

export default withRouter(Home);

Actually, I use for classifying if the user is logged in or not by firebase.auth().currentUser.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
k10a
  • 947
  • 2
  • 11
  • 30

1 Answers1

5

A simple one. This can be done by using onAuthStateChanged from firebase like so:

firebase.auth().onAuthStateChanged(user => {
   user ? history.push("/dashboard") : history.push("/login");
   renderApp();
});

If there is a user, redirect him to in my case dashboard, if not, redirect him to login.

Domagoj Vuković
  • 178
  • 1
  • 8