Reload / reset recaptcha (grecaptcha)

@mrg250 wrote:

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);
		})
	}
	

Posts: 1

Participants: 1

Read full topic