How to add user's extra information such as display name in firebase using javascript?

Question

Using createUserWithEmailAndPassword function of firebase I am able to sign users up but how to add extra information such as display name and picture URL? This is what I have done.

const signup = document.querySelector('#signup-form');

signup.addEventListener('submit', e=>{
    e.preventDefault();
    //get user info
    const first_name = signup['firstname'].value;
    const last_name = signup['lastname'].value;
    const email = signup['email1'].value;
    const password = signup['pswd1'].value;
    //sigup the user
    firebase.auth().createUserWithEmailAndPassword(email, password).then(()=>{
      firebase.auth().onAuthStateChanged(function(user){
        if(user){
          user.updateProfile({
            displayName: first_name 
          })
        }
      })
      signup.reset();
    }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        window.alert("Error: " + errorMessage);
        // ...
      });    
});

Answer 1

Once you have created the user, you can access user object provided by firebase. Using its updateProfile function, you can pass an object containing the properties you want the user object to have, like the code below:

 var user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "Jane Q. User",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
  // Update successful.
}).catch(function(error) {
  // An error happened.
});

Answer 2

This worked for me.

firebase.auth().createUserWithEmailAndPassword(email, password).then(cred=>{
      cred.user.updateProfile({
        displayName: first_name + " " + last_name
      })
    })
    .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        window.alert("Error: " + errorMessage);
        // ...
    });