I am working on an IONIC & FIREBASE application. I have integrated Phone authentication with invisible recaptcha provided by firebase as my auth in the app. As part of phone number verification with OTP, sometimes the invisible recaptcha prompts a recaptcha challenge for the user to solve in-order to proceed further. Now everything works fine if the challenge was solved successfully but if I select some wrong images in the recaptcha challenge then the pop up gets closed and no call back function is getting invoked.
This is my firebase RecaptchaVerifier code:
ngOnInit(){
this.recaptchVerifier = new auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
console.log("recapcha verified. ", response);
},
'expired-callback': function() {
// Response expired. Ask user to solve reCAPTCHA again.
// ...
console.log("Recaptcha expired.");
this.spinner.dismiss();
},
'error-callback': function() {
console.log("Error occurred");
this.spinner.dismiss();
}
});
}
I have implemented all the callbacks available on the recapthca but nothing is getting invoked if the challenge was unsuccessful. So how do I know when user fails to solve the recaptcha challenge so that I can tell the user to try again.
Thanks in advance.