如何在 firebase.auth (js, ts) 中更新用户电话号码

Question

How can i update user phone number which it use for auth in firebase.auth??

Firebase give as method:

updatePhoneNumber(phoneCredential)

But we need give phoneCredential . This credential takes object:

  interface AuthCredential {
    providerId: string;
    signInMethod: string;
  }

What must be in this phoneCredential , i try to send

providerId: 'phone';
signInMethod: 'phone';

and this is not work ;(

Answer 1

The solution to updatePhoneNumber with a current user / logged-in account. In case this helps anyone.

problem: Say you have a current logged in account with any number of single/merged accounts and they want to update their number. How would they do it.

solution: The below is Auth for Web/JS method, the equivalent will exist for your target platform.

function updateProfilePhoneNumber() {
    //country code plus your phone number excluding leading 0 if exists.
    var phoneNumber = "+447xxxxxxxxx"; //you could provide a prompt/modal or other field in your UX to replace this phone number.

    // let phoneNumber = "+441234567890"; //testing number, ideally you should set this in your firebase auth settings
    // var verificationCode = "123456";

    // Turn off phone auth app verification.
    // firebase.auth().settings.appVerificationDisabledForTesting = true;

    // This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
    // This will resolve after rendering without app verification.
    var appVerifier = new firebase.auth.RecaptchaVerifier(
        "recaptcha-container",
        {
            size: "invisible"
        }
    );

    var provider = new firebase.auth.PhoneAuthProvider();
    provider.verifyPhoneNumber(phoneNumber, appVerifier)
        .then(function (verificationId) {
            var verificationCode = window.prompt('Please enter the verification ' +
                'code that was sent to your mobile device.');
            phoneCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
            user.currentUser.updatePhoneNumber(phoneCredential);
        })
        .then((result) => {
            // Phone credential now linked to current user.
            // User now can sign in with new phone upon logging out.
            console.log(result);
        })
        .catch((error) => {
            // Error occurred.
            console.log(error);
        });
}

Happy to be corrected here.

Answer 2

You need to get the credential from firebase.auth.PhoneAuthProvider.credential .

    // Send verification code to user's phone
    firebase.auth.PhoneAuthProvider.verifyPhoneNumber(phoneNumber, recaptchVerifier).then(function(verificationId) {
      // verification code from user
      var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    });

Answer 3

Edited : I edited my previous answer as I now think it was far from being right. After researching a bit more, I believe you need to use the built in PhoneAuthProvider to update the user phone number, like below:

const credential = firebase.auth.PhoneAuthProvider.credential( verificationId, verificationCode);

user.updatePhoneNumber(credential);

Original (wrong) : According to the documentation , you need to pass an object with the methods that will return the providerId, signInMethod (which should be phone, as in your code) and smsCode (the sms verification code that was sent to the user mobile as explained here ). Give it a try like that:

updatePhoneNumber({
  getProvider: () => { return providerStringCode; },
  getSignInMethod: () => { return signInMethodStringCode; },
  getSmsCode: () => { return smsStringCode; },
});

Answer 4

I'm also having the same problem, In my html page(using ionic 4 modal), I have 2 button send OTP & verify. So this is my solution

 <ion-header> <ion-toolbar> <ion-title>Edit Phone</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-card> <form [formGroup]="phoneForm"> <ion-item> <ion-label position="stacked" >Phone :</ion-label> <ion-input formControlName="phoneNumber" type="tel" required="true" [class.invalid]="!phoneForm.controls['phoneNumber'].valid && phoneForm.controls['phoneNumber'].touched"> </ion-input> </ion-item> <ion-item class="error-message" *ngIf="!phoneForm.controls['phoneNumber'].valid && phoneForm.controls['phoneNumber'].touched"> <ion-label>Phone Number.</ion-label> </ion-item> <div id="recaptcha-container" visibility="hidden"></div> <ion-button id="sign-in-button" *ngIf="!btnSend" (click)="editPhone(phoneForm)" expand="block" [disabled]="!phoneForm.valid" data-badge="inline">SMS OTP</ion-button> <ion-button id="sign-in-button" *ngIf="btnSend" expand="block" [disabled]="btnSend" data-badge="inline">{{timeLeft}}</ion-button> </form> </ion-card> <ion-card> <form [formGroup]="verificationForm"> <ion-item> <ion-label position="stacked"> OTP : </ion-label> <ion-input formControlName="verificationCode" type="tel" > </ion-input> </ion-item> <ion-button (click)="verifyPhoneCode()" expand="block" [disabled]="!verificationForm.valid||!verificationSend"> Verifikasi </ion-button> </form> </ion-card> </ion-content>

sendOTP(){
firebase.auth().currentUser.reauthenticateWithPhoneNumber(this.telepon,this.recaptchaVerifier)
    .then(result=>{

      this.confirmationResult = result;//firebase.auth.ConfirmationResult


    })
    .catch(error=>{
      this.presentErrorMessage(error.message);
    });
}

verifyPhoneNumber(){
    let phoneProvider = new firebase.auth.PhoneAuthProvider();
            phoneProvider.verifyPhoneNumber(this.telepon, this.recaptchaVerifier)//this.telepon is your new phone number
                 .then(verificationId=>{
                    let phoneCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, this.verificationForm.value.verificationCode);
                    firebase.auth().currentUser.updatePhoneNumber(phoneCredential)
                    .then(()=>{
                      console.log("Success update phone");
                      this.authService.updatePhone(this.telepon).then(()=>{ //update my user database
                          this.dismiss(); //I'm using modal dialog for input
                        });
                    });
                  })
}

Answer 5

How to add a phone number to an existing, logged-in user ( verifyPhoneNumber ):

const appVerifier = new firebase.auth.RecaptchaVerifier('save-user-button', { size: 'invisible' }) // An element with id="save-user-button" must exist
const authProvider = new firebase.auth.PhoneAuthProvider()
const verificationId = await authProvider.verifyPhoneNumber(phoneNumber, appVerifier)
const verificationCode = window.prompt('Please enter the verification code that was sent to your phone.')
const phoneCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode)
myFirebaseUser.updatePhoneNumber(phoneCredential)

Sign up/create new user from phone number ( signInWithPhoneNumber ):

const appVerifier = new firebase.auth.RecaptchaVerifier('create-new-user-button', { size: 'invisible' }) // An element with id="create-new-user-button" must exist
const confirmationResult = await firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
const verificationCode = window.prompt('Please enter the verification code that was sent to your phone.')
const { user } = await confirmationResult.confirm(verificationCode)

https://firebase.google.com/docs/auth/web/phone-auth