Firebase how to link account created with phoneNumber

Viewed 1464

✅ I am able to let user update their profile with mobile number using verifyPhoneNumber and update currentUser.updatePhoneNumber

❌ My problem comes when I allow login by phone, and a NEW USER tries signing in with a phone number, an account is automatically created.

If I then need to associate the number with an email account, the above method will return credential-already-in-use error.

Firebase recommends the following method in their documentation.

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

firebase.auth().signInWithCredential(credential);

So I did this together linkWithCredential however, signInWithCredential returns a result with result.credential = null

// Sign in user with the account you want to link to
auth.signInWithCredential(credential).then(function(result) {
  console.log("Sign In Success", result);
  var currentUser = result.user;

  return prevUser.linkWithCredential(result.credential) //this line doesn't work.
    .then(function(linkResult) {

      return auth.signInWithCredential(linkResult.credential);
    })
}).catch(function(error) {

  console.log("Sign In Error", error);

});

Since result.credential = null, I am unable to proceed with LinkWithCredential.

I've also tried linkWithPhoneNumber, but it returns a validation ID, which I still cannot merge the account.

❓May I know how did you guys merge a phoneNumber account with other account(Facebook/google/email)?

3 Answers

If you want to link an existing account with a phone number you can use linkWithPhoneNumber. Basically you after user sign in (let say with Google), you retrieve user info and then later on link that credential with the phone number. I found a detail answer that is similar to your question link here

You can use auth provider linking:

async sendSmsVerification() {
// 'recaptcha-container' is the ID of an element in the DOM.
const applicationVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')
const provider = new firebase.auth.PhoneAuthProvider()

const confirmationResult: firebase.auth.ConfirmationResult = await this.userData.linkWithPhoneNumber('+1nnnnn', applicationVerifier)
.catch(error => error)

const verificationCode = window.prompt('Please enter the verification ' +
  'code that was sent to your mobile device.')

  const res = await confirmationResult.confirm(verificationCode)
  .catch(error => error)
  console.log('res', res)

applicationVerifier.clear()

return res  }

res will tell you if it was successful, the user entered the wrong code or the phone number is already in use. As a bonus, the user can also login with the phone number now.

You can find more details here: https://firebase.google.com/docs/auth/web/account-linking?authuser=0

Maybe Something like

const confirmationResult = await firebase.auth().currentUser.linkWithPhoneNumber(phoneNumber, recaptcha);
//Prompt your user for the code they recieved via sms here
confirmationResult.confirm(code);

where you have a User that has logged in via username/password, facebook google,etc... would work?

Since you don't get a verification ID from Phone Linking but rather a ConfirmationResult

Related