Adding displayName to new Firebase Auth profile upon register submission in React app

Question

I have created a 'register' component in my React web app which successfully registers users upon submission.

During that flow, I am attempting to set the 'displayName' too with a '.then' call.

This for whatever reason though isn't working. I'm attempting to follow the documentation, but no luck unfortunately.

Would somebody be able to point out what I'm doing wrong?

Here's my component:

class Register extends Component {
  constructor(props) {
    super(props)

    this.state = {
      displayName: "",
      email: "",
      password: ""
    }
  }

  onChange = (e) => {
        this.setState({ [e.target.name]: e.target.value})
    }

  onSubmit = async (e) => {

    e.preventDefault()

    await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
      .then(function(result) {

        console.log(result);
        console.log("Successfully created new user.")
        return result.user.updateProfile({
          displayName: this.state.displayName
        })

      })
      .catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode);
        console.log(errorMessage);
      });

      this.props.history.push("/dashboard")

  }

  render() {
    return (
      <section className="register-section">

          <form className="register-form" onSubmit={this.onSubmit}>

            <label className="register-label">Full Name</label>
            <input className="register-input" type="text" name="displayName" onChange={this.onChange} value={this.state.displayName} />
            <label className="register-label">Email</label>
            <input className="register-input" type="email" name="email" onChange={this.onChange} value={this.state.email} />
            <label className="register-label">Password</label>
            <input className="register-input" type="password" name="password" onChange={this.onChange} value={this.state.password} />
            <button className="register-button" type="submit" name="button">Continue</button>

            <a className="register-link" href="sign-in">Got an account already?</a>
          </form>

        </div>
      </section>
    )
  }
}

export default Register;

Any help would be appreciated!

EDIT: Here's the solved code.

  onSubmit = async(e) => {

      e.preventDefault()

      await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
        .then(() => {
          console.log("Successfully created new user.")
          console.log(this.state.displayName)
          let firebaseUser = firebase.auth().currentUser;
          return firebaseUser.updateProfile({
            displayName: this.state.displayName
            })
          })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;
          console.log(errorCode);
          console.log(errorMessage);
        });

      this.props.history.push("/dashboard")

    }

Lahiru Tennakoon · Accepted Answer · 2020-10-27 17:37:01Z

1

Get the current user from firebase and then call the updateProfile() method on this user.

onSubmit = async(e) => {

  e.preventDefault()

  await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
    .then(function() {
      console.log("Successfully created new user.")
      let firebaseUser = firebase.auth().currentUser;
      return firebaseUser.updateProfile({
        displayName: this.state.displayName
      })

    })
    .catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorCode);
      console.log(errorMessage);
    });

  this.props.history.push("/dashboard")

}

answered Oct 27, 2020 at 17:37

Lahiru Tennakoon

6471 gold badge6 silver badges8 bronze badges

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

3 Comments

Jon Nicholson Over a year ago

I feel the logic to this is correct, but it doesn't work unfortunately. The user is successfully created, but the displayName isn't updated.

Lahiru Tennakoon Over a year ago

Are you sure there's a value in the state for displayName? Did you "console.log(this.state.displayName)" ?

Jon Nicholson Over a year ago

You're right - I added a console log in the 'then' function and it's coming through as undefined. I've done some playing this morning and discovered it's to do with the structure of the 'then'. I learned this elsewhere, but you need an arrow function to access 'this.state'. Your answer is right except for that. I'll edit my answer to show you what I mean.

Collectives™ on Stack Overflow

Adding displayName to new Firebase Auth profile upon register submission in React app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related