Link Phone Number with Facebook and Gmail account in Firebase on Web

Question

I'm creating a web app in React with firebase services. I have Google and Facebook login on the login screen and after login user gets an option to link their phone. I use Firebase Phone Auth for this. The user is already signed then they Auth using the phone. I want to Link Phone Auth user object with facebook/google account.

Going through the docs I was not able to find the solution that suits my use case. Help will be appreciated.

Answer 1

Here is a simplified example how to link a phone number to a Google/Facebook user using an invisible reCAPTCHA.

// Sign in the Google user first.
firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())
  .then(function(result) {
    // Google user signed in. Check if phone number added.
    if (!result.user.phoneNumber) {
      // Ask user for phone number.
      var phoneNumber = window.prompt('Provide your phone number');
      // You also need to provide a button element signInButtonElement
      // which the user would click to complete sign-in.
      // Get recaptcha token. Let's use invisible recaptcha and hook to the button.
      var appVerifier = new firebase.auth.RecaptchaVerifier(
          signInButtonElement, {size: 'invisible'});
      // This will wait for the button to be clicked the reCAPTCHA resolved.
      return result.user.linkWithPhoneNumber(phoneNumber, appVerifier)
        .then(function(confirmationResult) {
          // Ask user to provide the SMS code.
          var code = window.prompt('Provide your SMS code');
          // Complete sign-in.
          return confirmationResult.confirm(code);
        })
    }
  })
  .catch(function(error) {
    // console.log(error);
  });