在反应中使用 firebase 检查用户是否登录

Question

I do have a react with firebase project. So I successfully able to login the user via firebase authentication. What I want to do is to set the user details in all pages. I thought, I can able to access the user variables in react everywhere like laravel's Auth::user() . But I tried in so many ways to achieve that. But I couldn't able to get the user details in another page. Is there any way to get the user details in another page?

My signin.js page.

  handleSubmit = (e) => {
    e.preventDefault()
    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((user) => {
      alert("login success")
      console.log(user.user)
      this.setState({uid:user.user.uid})
      localStorage.setItem('uid',JSON.stringify(user.user))
      window.location.assign('/')
      }).catch(function(error) {
            console.log(error.code)
            alert(error.message)
        })
      }

My dashboard.js page where I want to access user variables.

  componentDidMount() {
    if(localStorage.getItem('uid')){
      //alert("welcome"+localStorage.getItem('uid'));
      this.setState({user : JSON.parse(localStorage.getItem('uid'))})
      console.log("this : "+localStorage.getItem('uid'))
    }
  }

Answer 1

var user = firebase.auth().currentUser;
var name, email, photoUrl, uid, emailVerified;

if (user != null) {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  emailVerified = user.emailVerified;
  uid = user.uid;  // The user's ID, unique to the Firebase project. Do NOT use
                   // this value to authenticate with your backend server, if
                   // you have one. Use User.getToken() instead.
}

you can use currentUser method on firebase.auth() callback to fetch user details. If you are signing in using frontend firebase package then this is no issue, whether you call this on the same page or any other page

Answer 2

Hi I'm pretty sure why this is happening as firebase autologin functionality which handles logging you in to your firebase account is not fast, from my experience it takes anywhere from 0.5-2 seconds to fill in the auth state, and by the time your page checks auth.currentUser it doesn't get any as the login is not complete yet.

SOLUTION

on your dashboard page, have an onAuthStateChange function at mount and don't worry about it working only on auth state change, it would run everytime your dashboard is mounted and then the user object from that