Hello,
I’m using Firebase for authentication (specifically the phone auth method),
and it’s working fine (validation etc.), except for one thing;
If the user enters the wrong code, or dismisses the validating prompt, he can’t re-enter the cycle again (prompt -> receiving message -> validate) because I can’t reset the recaptcha, and because of that he needs to reenter the app in order to reset everything.
How do I fix this ?
CODE:
html:
<ion-content padding class="popup-bg">
<form [formGroup]="profile" (ngSubmit)="submitProfile()">
...
<button id="submitButton" ion-button full [disabled]="!profile.valid" (click)="submit()">submit</button>
</form>
<div id="recaptcha"></div>
</ion-content>
.ts:
declare var grecaptcha: any;
...
private _recaptchaVerifier: auth.RecaptchaVerifier;
...
ionViewDidLoad() {
this._recaptchaVerifier = new auth.RecaptchaVerifier('submitButton', {
'size': 'invisible',
'callback': function(response) {
this.submitProfile()
},
'expired-callback': ()=>{
this.resetReCaptcha()
}
});
}
...
private submitProfile() : void{
if(!this.checkPhone()){
return;
}
let profile: object = {
name: this.profile.get('name').value,
phone: this.profile.get('phone').value
};
let validPhoneNumber: string =String(profile['phone'])
//auth().settings.appVerificationDisabledForTesting = true;
this._authAf.auth.signInWithPhoneNumber(validPhoneNumber, this._recaptchaVerifier).then(result=>{
const alertSignIn = this._alertCtrl.create({
title: 'enter code',
inputs: [{type: 'number', name: 'vCode'}],
buttons: [{text: 'validate', handler: data => {
const loadSignIn = this._loadingCtrl.create({})
loadSignIn.present().then(()=>{
result.confirm(data['vCode']).then(() =>{
this._userHandler.init();
this._userHandler.addUser(profile);
// this._messagingHandler.getToken();
loadSignIn.dismiss()
}, e=>{
loadSignIn.dismiss()
this.resetReCaptcha();
return
})
});
}}
]
});
alertSignIn.present();
}).catch((e)=>{
this.resetReCaptcha();
})
}
...
// I've tried this. not working
private resetReCaptcha(){
this._recaptchaVerifier.render().then(function(widgetId) {
grecaptcha.reset(widgetId);
})
}