In a discussion thread on the GitHub repository, I addressed the topic of supporting PhoneNumber Auth: Support for PhoneNumber Auth #990
Here is a simple solution to sign in via phone and activate the Recaptcha:
UPDATE: (Issue Resolved)
I successfully managed to sign in via mobile from an Angular application!
To use ReCaptcha as a widget, ensure that the containing div is created during object initialization.
I personally prefer using the 'invisible' method, so I added an empty div to my HTML page:
<div id="phone-sign-in-recaptcha"></div>
Within the ngOnInit() function, I initialized it as follows:
window['phoneRecaptchaVerifier'] = new firebase.auth.RecaptchaVerifier('phone-sign-in-recaptcha', {
'size': 'invisible',
'callback': function(response) {
// Actions after reCAPTCHA verification
},
'expired-callback': function() {
// Reset reCAPTCHA?
}
});
The form submit function triggered upon successful recaptcha completion is:
this.auth.signInWithPhoneNumber(phoneNumber, window['phoneRecaptchaVerifier']).then(function(confirmationResult){
var code = prompt('A code has been sent 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 (invalid code?)
// Reset reCAPTCHA?
// ...
});
}
}).catch(function(error){
console.log(error.message);
});
To access the global variable grecaptcha for calling grecaptcha.reset([widgetId]) when needed (e.g., on recaptcha expiry or sign-in error), follow these steps:
npm install @types/grecaptcha --save
Then, declare the variable just below your imports in the component module where the recaptcha is implemented:
declare var grecaptcha: any;
In my code, I replace the comment // Reset reCAPTCHA? with this call:
window['phoneRecaptchaVerifier'].render().then(function(widgetId) {
grecaptcha.reset(widgetId);
});
Everything now works smoothly!