SMS Number verification using AngularFire2 instance.

Hey there,

I plan on using AngularFire2 and not reference firebase (the library) directly.

While trying to get Phone number authentication I was unable to do so.

While using the reCapcha verifier you have to use the following.

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

note here that we have the use new firebase.auth.

Is there an AngularFire2 way of doing the same?

[ghost]

For anyone trying this with Ionic or Cordova please consider, https://stackoverflow.com/questions/44081040/ionic2-authentication-firebase

[midhunadarvin]

@prantikv For anyone else stuck with phone authentication. You have to write it like this inside of your component.

Add this element to your component template .

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

Inside your component class

import * as firebase from 'firebase/app';
...
ngAfterViewInit() {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
  }

and finally the login method. Here appVerifier argument passed should be the recaptchaVerifier.

// Phone Login
  phoneLogin(phoneNumber: any, appVerifier: any) {
    this.AngularFireAuth.auth.signInWithPhoneNumber(phoneNumber, appVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        console.log(confirmationResult);
      }).catch((error) => {
        // Error; SMS not sent
        // ...
      });
  }