I am using firebase Auth and I have a form with two fields name and phone number and onsubmit method and I want to update currently logged in user's phone number and name. But its not updating the phone number on submit. Only successfully updating the user's displayname. Please check the code below. onUpdateProfile is the form submit function.

<template>
  <form @submit.prevent="onUpdateProfile">
    <input type="text" v-model="profile.name" placeholder="Enter Your Name..." />
    <input type="text" v-model="profile.phonenumber" placeholder="Enter Your phone..." />
    <button  type="submit">submit</button>
  </form>
</template>

    methods: {
      onUpdateProfile() {
              firebase.auth().onAuthStateChanged(user => {
                if (user) {
                  //Getting Current User
                  let user = firebase.auth().currentUser;
                  user
                    .updateProfile({
                      displayName: this.profile.name,
                      phoneNumber: this.profile.phoneNumber
                    })
                    .then(() => {console.log('success})
                    .catch(error => {console.log(error});
                  //Updating User other details on submit
                } else {
                }
              });
            }
    }


    data() {
        return {
          profile: {
            name: "",
            phonenumber: ""
          }
        };
      }

I am using firebase Auth and I have a form with two fields name and phone number and onsubmit method and I want to update currently logged in user's phone number and name. But its not updating the phone number on submit. Only successfully updating the user's displayname. Please check the code below. onUpdateProfile is the form submit function.

<template>
  <form @submit.prevent="onUpdateProfile">
    <input type="text" v-model="profile.name" placeholder="Enter Your Name..." />
    <input type="text" v-model="profile.phonenumber" placeholder="Enter Your phone..." />
    <button  type="submit">submit</button>
  </form>
</template>

    methods: {
      onUpdateProfile() {
              firebase.auth().onAuthStateChanged(user => {
                if (user) {
                  //Getting Current User
                  let user = firebase.auth().currentUser;
                  user
                    .updateProfile({
                      displayName: this.profile.name,
                      phoneNumber: this.profile.phoneNumber
                    })
                    .then(() => {console.log('success})
                    .catch(error => {console.log(error});
                  //Updating User other details on submit
                } else {
                }
              });
            }
    }


    data() {
        return {
          profile: {
            name: "",
            phonenumber: ""
          }
        };
      }

• javascript
• firebase
• firebase-authentication

• What's the problem when you run this code? – Frank van Puffelen Commented Dec 9, 2019 at 16:04
• I want to update the phone number on submit but it's not updating. I tried to log the phone number in the console it's returning null – RAHUL KUNDU Commented Dec 9, 2019 at 16:36
• You can't change the phone number through a call to updateProfile. Instead you should call updatePhoneNumber. See firebase.google./docs/reference/js/… – Frank van Puffelen Commented Dec 9, 2019 at 17:02

3 Answers 3

You can't use updateProfile to update the phoneNumber. You have to use the updatePhoneNumber API as Firebase Auth always requires the phone number to be verified before saving it on a user.

This is similar to signInWithPhoneNumber.

const phoneNumber = getPhoneNumberFromUserInput();
const appVerifier = new firebase.auth.RecaptchaVerifier(...);
firebase.auth().currentUser.updatePhoneNumber(phoneNumber, appVerifier)
  .then((confirmationResult) => {
    // SMS sent. Prompt user to type the code from the message, then plete
    // verification by calling confirmationResult.confirm(code).
    ...
    return confirmationResult.confirm(smsCode);
  }).then((userCredential) => {
    // Phone set on the user.
  }).catch((error) => {
    // Error occurred.
  });

UPDATE

According to the Firebase documentation, it looks like you can only update phone number if you are using firebase-admin. Without it you can only update basic information, such as the user's display name and profile photo URL.

If I am wrong please feel free to correct me.

https://firebase.google./docs/auth/admin/manage-users#update_a_user

https://firebase.google./docs/auth/web/manage-users#update_a_users_profile

you are using different names;

in template you have this:

v-model="profile.phonenumber"

and in the onUpdateProfile() method

phoneNumber: this.profile.phoneNumber

This worked for me:

async function save(phone: string, e) {
    e.preventDefault();
    const { currentUser:fuser } = firebase.auth();
    if(fuser && fuser.phoneNumber !== phone) {
        try {
            const verifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
                callback: (response) => console.log('callback', response),
                size: 'invisible',
            });
            const phoneProvider = new firebase.auth.PhoneAuthProvider();
            const id = await phoneProvider.verifyPhoneNumber(phone, verifier);
            const code = window.prompt('Bitte zugeschickten Code eingeben');
            const cred = firebase.auth.PhoneAuthProvider.credential(id, code);
            await fuser.updatePhoneNumber(cred);
            console.log('phone number changed', id, cred, fuser);
            setSuccess(true);
        } catch(e) {
            console.error(e);
        }
    }
}