Angular Firebase signInWithPhoneNumber

Question

I am new on the site, so if I make a mistake, please correct me (I will fix it) and forgive me.

I am also new using Angular 4 environment. Firebase has an new option for: signInWithPhoneNumber, and I want to implement it on my new app. This method need the parameter: signInWithPhoneNumber(phoneNumber, appVerifier).

Getting the phoneNumber is easy, using the form, but getting the appVerifier is making me crazy. I dont understand the concept of appVerifier.

I installed the component: https://github.com/xmaestro/angular2-recaptcha/blob/master/README.md.

This is my code:

---

// in component.html,

<re-captcha (captchaResponse)="resolvedCorrectly($event)" site_key="my_key"></re-captcha>

---

This works perfectly, an the recaptcha appears in my html and executes the methods.

---

// in component.ts, 
...
@ViewChild(ReCaptchaComponent) captcha: ReCaptchaComponent;
...

resolvedCorrectly(captchaResponse: string): void {
 console.log(`Resolved captcha with response ${captchaResponse}:`);
} // Works perfectly

this.captcha.getResponse()  // Works perfectly

this.captcha.reset() // Works perfectly

...

---

The problem is that I dont know how to create "appVerifier", so I can insert it in the method:

firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(
    (response) => {
    console.log("signIn user with phone: success!");
    console.log(response);
    })
.catch(
    (error) => {
      console.log("signIn user with phone: failed!");
      console.log(error);
      // Error; SMS not sent
      // ...
    });

I tried with

appVerifier = new firebase.auth.RecaptchaVerifier("recaptcha-container"); // with a div
appVerifier = new firebase.auth.RecaptchaVerifier("re-captcha");
appVerifier = new firebase.auth.RecaptchaVerifier(ReCaptchaComponent);

But nothing works.

Please, even if you think I should use another REcaptcha-component... no problem. I will do whatever to solve my issue.

Answer 1

You probably shouldn't use this angular2-recaptcha and use Firebase recaptcha verifier. The reason you need to do so is because Firebase Auth will provision the reCAPTCHA site key for you and render that reCAPTCHA. The way you get it to work depends on whether you are using a visible or invisible reCAPTCHA. BTW, I recommend the quick start apps in this repo for full examples: https://github.com/firebase/quickstart-js/tree/master/auth

To get you going, let's take a visible reCAPTCHA. You will need to provide an empty div in your HTML:

<div id="recaptcha-container"></div>

Next you initialize a recaptcha verifier using that div.

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', ...);

recaptcha-container is the ID of the div where the reCAPTCHA widget is to be rendered.

In the form where you ask for the phone number, you would render the reCAPTCHA:

recaptchaVerifier.render().then(function(widgetId) {
  window.recaptchaWidgetId = widgetId;
});

When the user provides their phone number and clicks submit, you will check grecaptcha.getResponse(window.recaptchaWidgetId) is not null.

You will then send the SMS code and call:

firebase.auth().signInWithPhoneNumber(phoneNumber, recaptchaVerifier)
    .then(function (confirmationResult) {
      // SMS sent. Prompt user to type the code from the message, then sign the
      // user in with confirmationResult.confirm(code).
      window.confirmationResult = confirmationResult;
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

When you get the confirmationResult, you can safely clear the reCAPTCHA by calling: recaptchaVerifier.clear().

After you ask the user to provide the 6 digit code, you call confirmationResult.confirm(code) to complete the sign-in.

For more details, check the official docs: https://firebase.google.com/docs/auth/web/phone-auth