1

Following documentation for new Firebase phone authentication. They have introduced a recaptcha as a security/spam measure. According to the js documentation the recaptcha is injected into the DOM with:

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

However this does not appear to work in AngularJS. I have tried swapping out window. for $window and ensured this was available in my controller, but still no luck.

Any help or guidance would be greatly appreciated.

This is the js documentation I've been following: https://firebase.google.com/docs/auth/web/phone-auth

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
MNelmes
  • 124
  • 2
  • 19
  • Hmm that's an interesting problem, but I don't think it's because of angular. Does the 'recaptcha-container' exist as an ID in your html? Does that line of code execute? – Daniel Jamrozik Jun 17 '17 at 17:51
  • yes, i'm simply using a div with the id="recaptcha-container". Also interestingly, if I assign the firebase.auth.RecaptchaVerifier to a $scope variable and console.log it, I can see it does have some form of object populated. – MNelmes Jun 17 '17 at 19:29
  • Gotcha, ok two more things, what if you tried doing ```$scope.$apply()```? I doubt it will fix it, but just an idea. And do you see an errors in the console? – Daniel Jamrozik Jun 17 '17 at 21:32
  • Unfortunately no luck with the scope.apply, nothing in the console. Just scouring some of the Firebase/Ionic forums now so will update when I find the solution – MNelmes Jun 18 '17 at 09:26

1 Answers1

9

I discussed this in a thread on the GitHub repo: Support for PhoneNumber Auth #990

Heres a copy-paste, it will get you signed in via phone and obviously get the recaptcha working:

UPDATED: (Resolved)

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>

and inside ngOnInit() i have instantiated it:

window['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,     window['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);
});

In order to access the global variable grecaptcha to call grecaptcha.reset([widgetId]), which you will want to do in the case that the recaptcha has expired or there is an error signing in and users need to try again.

npm install @types/grecaptcha --save

and back in your component module where your recaptcha is, directly under your imports declare the variable: declare var grecaptcha: any;

in my code I have replaced the comment // Reset reCAPTCHA? with the following call:

    window['phoneRecaptchaVerifier'].render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    });

All works great now!

SagarScript
  • 1,145
  • 11
  • 15