{React Native} Firebase - updating user values before navigation only work after soft refresh

user_12407322 0
Viewed 1504

I have this simple code 

 state = { email: '', password: '', userName: '', errorMessage: null }

handleSignUp = () => {     
  firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((userInfo) =>{ 
      userInfo.user.updateProfile({displayName: this.state.userName}).then((s) => {this.props.navigation.navigate('Navigator')})
  })
    .catch(error => this.setState({ errorMessage: error.message }))
}

Everything works as expected until the app navigates to the Navigator screen. Here when I log my firebase.auth() I get this object:

  Object {
        "displayName": null,
        "email": "test6@gmail.com",
        "phoneNumber": null,
        "photoURL": null,
        "providerId": "password",
        "uid": "test6@gmail.com",
      },

Note how the displayName is null.

Here is the issue... Only after a soft refresh I get:

  Object {
    "displayName": "Bro",
    "email": "test6@gmail.com",
    "phoneNumber": null,
    "photoURL": null,
    "providerId": "password",
    "uid": "test6@gmail.com",
  },

Note how the displayName has now a value.

What am I missing? am I using the .then() in the wrong order? is the promise order not correct?

I appreciate any suggestions!

react-navigation firebase-authentication firebase react-native reactjs
2 Answers

updateCurrentUser not triggering onAuthStateChanged

Reference

therefore we need to reload/force update current user after update

firebase.auth().currentUser.reload()

OR

firebase.auth().currentUser.getIdToken(true)

like this

state = { email: '', password: '', userName: '', errorMessage: null }

  handleSignUp = () => {     
    firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((userInfo) =>{ 
        userInfo.user.updateProfile({displayName: this.state.userName}).then(firebase.auth().currentUser.reload()).then((s) => {this.props.navigation.navigate('Navigator')})
    })
      .catch(error => this.setState({ errorMessage: error.message }))
  }
user_80798680

Maybe you need to change your method like this:

handleSignUp = async () => {     
  const userInfo = await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
  await userInfo.user.updateProfile({displayName: this.state.userName})
  this.props.navigation.navigate('Navigator')
}
user_124556090
Related