signInWithPhoneNumber recaptcha client has been deleted 0
lucas
Hi I'm trying to authenticate users with phone numbers without using firebaseui.
my html template looks like this:
<div class="flex center space-items-sides-m m-t-m" dir="ltr">
<p-dropdown panelStyleClass="phone-select" [options]="countries" [(ngModel)]="phoneNumber.country" [style]="{'width':'130px'}" optionLabel="name" [filter]="true" appendTo="body">
<ng-template let-item pTemplate="selectedItem">
+{{item.value.callingCode}}
</ng-template>
</p-dropdown>
<input type="text" pInputText id="phone" [(ngModel)]="phoneNumber.phone" pKeyFilter="pint">
</div>
<div class="m-t-l" id="recaptcha-container"></div>
<button (click)="sendLoginCode()" class="m-t-l" pButton label="שלח קוד אימות" [disabled]="!phoneNumber.isValid || !isRecaptchaValid()"></button>and my component looks like this:
ngOnInit() {
this.windowRef = window;
this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
this.windowRef.recaptchaVerifier.render().then((widgetId) => {
this.windowRef.recaptchaWidgetId = widgetId;
});
}
isRecaptchaValid() {
return (grecaptcha.getResponse(this.windowRef.recaptchaWidgetId).length > 0);
}
sendLoginCode() {
this.store.dispatch(new fromStore.SetLoading(true));
this.firebaseFunctionsService.getFunction(`userExistence/${this.phoneNumber.e164}`).subscribe(data => {
if (data && data.exists) {
const appVerifier = this.windowRef.recaptchaVerifier;
const num = this.phoneNumber.e164;
firebase.auth().signInWithPhoneNumber(num, appVerifier).then(result => {
this.windowRef.confirmationResult = result;
this.store.dispatch(new fromStore.SetLoading(false));
}).catch(error => {
this.messageService.add({
summary: 'ההודעה לא נשלחה',
detail: error.toString(),
severity: 'error'
});
grecaptcha.reset(this.windowRef.recaptchaWidgetId);
this.store.dispatch(new fromStore.SetLoading(false));
});
} else {
this.messageService.add({
summary: 'משתמש זה לא קיים במערכת',
detail: 'אנא פנה למנהל המערכת על מנת להוסיף לך משתמש',
severity: 'warn'
});
this.store.dispatch(new fromStore.SetLoading(false));
}
}, serverError => {
this.messageService.add({
summary: 'ההודעה לא נשלחה',
detail: serverError.message.toString(),
severity: 'error'
});
this.store.dispatch(new fromStore.SetLoading(false));
});so the function isRecaptchaValid() works perfectly and the submit button becomes enabled when the users clicks "I'm not a robot" but when the user clicks the submit button the function firebase.auth().signInWithPhoneNumber goes straight to the catch with the error "recaptcha client has been deleted 0" even after I do grecaptcha.reset(this.windowRef.recaptchaWidgetId) and try to submit again I go straight to the catch with error "recaptcha client has been deleted 1" and so on..
I'm new to the recaptcha and don't understand it so much.. what am I doing wrong? I worked from the firebase docs https://firebase.google.com/docs/auth/web/phone-auth but they dont explain there what to do when there are errors..
I'm using angular 6 with firebase 5.0.3 and angularfire2 5.0.0-rc.9
please help
