Angularfire: Support for PhoneNumber Auth

[prajwalgp]

Version info

**Angular: 2.2.1

**Firebase: 4.0.0

**AngularFire: 2.0.0-beta.7-pre

**Ionic : 2.0.1

Angular Fire Support for Firebase PhoneNumber Auth Provider for Authentication

[davideast]

@prajwalgp We will be upgrading the SDK to 4.0 shortly. But AF does not wrap auth methods, instead you use the injected service to call out to the SDK.

[Sagar-AppLogics]

@davideast (Thanks for all the great tutorials)

I have declared:
phoneRecaptchaVerifier: firebase.auth.RecaptchaVerifier;

I had initially instantiated this recaptcha var from inside the constructor() and got an error in the console:
reCAPTCHA container is either not found or already contains inner elements!.

I moved the function to ngOnInit(){} and it all seems to work so far i.e. its displaying and the recaptcha component seems to work.

Although this works it does not seem to be documented anywhere (for angularfire2) and secondly - why does it make a difference?

Now... Currently I'm getting the 6 digit sms code however not quite sure what to do next, back to the docs.

[Sagar-AppLogics]

Ok,

I'm all set and I can confirm I am now able to sign in via mobile from angular!
Make sure if you want to use the ReCaptcha as a widget, ensure that that the containing div is created when the object is initialized.

I prefer the 'invisible' method, so I first put an empty div somewhere on my html page:

<div id="phone-sign-in-recaptcha"></div>

declared phoneRecaptchaVerifier: firebase.auth.RecaptchaVerifier;

and inside ngOnInit() i have instantiated it:

this.phoneRecaptchaVerifier = new firebase.auth.RecaptchaVerifier('phone-sign-in-recaptcha', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved - will proceed with submit function
  },
  'expired-callback': function() {
    // Reset reCAPTCHA?
  }
});

The form submit function which is fired when the recaptcha is solved is:

this.auth.signInWithPhoneNumber(phoneNumber, this.phoneRecaptchaVerifier).then(function(confirmationResult){
  var code = prompt(`We have send a code to ${phoneNumber}, please enter it here`, "");
  if (code) {
    confirmationResult.confirm(code).then(function (result) {
      // User signed in successfully.
      // Reset reCAPTCHA?
      // ...
    }).catch(function (error) {
      // User couldn't sign in (bad verification code?)
      // Reset reCAPTCHA?
      // ...
    });
  }
}).catch(function(error){
  console.log(error.message);
});   

Now in all of this, the only this that is causing me any issue now - is the inability to reset the recaptcha in code - , firebase web docs state I should be using: grecaptcha.reset() however, this function does seem to exisit in firebase or angularfire2. Any advice?

[Sagar-AppLogics]

Hi all,

Tried the following to reset the recaptcha,
installed @type/grecaptcha

the definitions now show i.e. there are no errors highlighted, yet this fails with the notorious black screen displaying:

Failed to compile.

/Users/[username]/Documents/Firebase Projects/[project]/src/app/auth/[componentName]/[componentName].component.ts ([line],[col]): Cannot find name 'grecaptcha'.

I've added various angular2 from NPM (Angular 2 Google reCaptcha)- Google reCaptcha but they don't expose a function that allows me to reset the reCaptcha with the widget id.

this is essential to most and required for projects with phone auth enabled, and from what I can see there is no solution available yet.

[Sagar-AppLogics]

Hi All,

Found the solution!
Install the types definitions to get rid of the squiggly lines in your .ts file.
npm install types/grecaptcha --save

now wherever you wish to use this variable declare it in your component.module.ts just after imports e.g.

import {}.........

declare var grecaptcha: any;
declare var $: any;

....

whenever you call these Global's don't make the mistake of using this.grecaptcha.reset(widgetId), access it as grecaptcha.reset(widgetId).

I have tested this extensively (to the point where I received to following: We have blocked all requests from this device due to unusual activity. Try again later.) and it is working perfectly now 🤓 . OoOo Yeah!

NOTE:
In the below example you can see how I've also added the var $ for JQuery, if you did want to add jquery, make sure you either add the script tag to a JQuery CDN script file, or npm install jquery --save and reference"./../node_modules/jquery/dist/jquery.min.js", you should also add the type def's with npm install @types/jquery.

[Faisal0sal]

@Sagar-AppLogics Are you using this with ionic? Has it worked in browser or in real devices? because the recaptcha is not showing in real devices using ionic once I tried it

[mkwsra]

for ionic, Guys just follow this tutorial https://javebratt.com/firebase-phone-authentication/

[Ali762]

To save the click, as of 10 Aug 17, mkwsra's link does not work for ionic on devices. Same problem with the recapthca requirement on firebase phone auth. Still looking for the answer myself.......

[Abby3017]

I was also getting the similar error when using grecaptcha and then used the way you described.
@Sagar-AppLogics @davideast , can anyone explain the logic behind that

[Sagar-AppLogics]

Hi @Faisal0sal - Im not using ionic, I have tried of mobile device and desktop browsers successfully.

Hi @Abby3017 - the best explanation I could have given without talking too much about my assumptions - for they are just that but as your asking, I'll try my best.

From my understanding the firebase SDK includes _grecaptcha_. This is a global variable in a normal javascript environment.

AngularFire2 is a wrapper around that firebase SDK, however, the nature of angular means that it is not possible to access the _grecaptcha_ variable from within a component.

So to make Angular "aware" of _grecaptcha_ install the types definition, this will aid in code completion and compilation.

You must declare _grecaptcha_ as a variable to remove any errors.

You must also access it not via _this.grecaptcha_..... but just _grecaptcha_.

To understand this properly - you must understand how the SDK exposes functions and their scope, and how the AngularFire2 wrapper exposes to Angular + scope, not to forget how Angular itself actually works and isolates javascript between components.

[Abby3017]

Thanks for your insight @Sagar-AppLogics and I studied about them. It would be great help if you can provide any material to look how library like angularfire2 wrap around angular and exposes the variable.
Contributor of AngularFire2 any help in this regard would be appreciated.

[TKlarissa]

hi i am doing phone number auth with ionic and i want to remove recaptcha .
the form is working ....i don't want the recaptcha again..
can someone help

[prajwalgp]

@TKlarissa You can use the firebase native plugin to achieve the phone number authentication.
Link to the plugin: firebase