Firebase / React：onAuthStateChanged（）是在注册函数的时间之前还是之后触发的？

Question

okay, here is something really weird, guys.

I have an App class and a SignInWithPassword class. SignInWithPassword gets rendered in App as long as no user is signed in. I have a form where users can enter their username of choice, email, and password and then sign up. I have a user object inside App's state which is set inside onAuthStateChanged . I've been facing issues with setting the displayName of App.state.user.displayName because when you sign in with just an email and password, firebase's default user.displayName is set to null . I tried using updateProfile but that still doesn't set App 's user.displayName , it only update's firebase's user object, and updateProfile won't trigger onAuthStateChanged. So then, i thought i would try creating a setDisplayName method inside App , pass it as a prop to SignInWithPassword , and call it inside my signUp's then . but that STILL doesn't change App.user.displayName UNLESS I REFRESH IT. Upon doing some logging, I noticed something strange.

I have 3 console.log() s. One inside SignInWithPassword 's signUp method:

signUp = () => {
    firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(() => {
      console.log(firebase.auth().currentUser) //log 1
      firebase.auth().currentUser.updateProfile({
        displayName: this.state.username,
      })
      this.props.setUsername(this.state.username)
    }).catch((error) => {
      // Handle Errors here.
      alert(error.message)
      this.setState({
        email: '',
        password: '',
      })
    }) 
  }

one inside onAuthStateChanged in App ,

firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log(user.displayName) //log 2
        const currentUser = {
          displayName: user.displayName,
          email: user.email,
          uid: user.uid,
        }
        this.setState({
          user: currentUser,
        })
      } else {
        this.setState({
          user: {}
        })
      }
    })
  }

and one inside App 's setUsername() method:

setUsername = (username) => {
    const user = Object.assign({}, this.state.user)
    user.displayName = username
    this.setState({
      user,
    })
    console.log(this.state.user.displayName) //log 3
  }

the order in which the logs were displayed is log 1, log 3, log 2. this clearly means that onAuthStateChanged is only being called after the then stuff in signUp . which means that log 2 should print the username that the user entered in the form, right? WRONG. it prints null . Can someone explain what's going on??

Answer 1

I had this problem a few hours ago, I changed

firebase.auth().currentUser.updateProfile({

with

 auth.doCreateUserWithEmailAndPassword(email, passwordOne)
    .then(authUser => {
    this.setState(() => ({ ...INITIAL_STATE }));
    authUser.user.updateProfile({
        displayName: firstName + " "+lastName
      })

it worked for me this way and not with .currentUser