firebase signInWithPhoneNumber recaptcha client has been deleted 0

Question

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

Answer 1

    ngOnInit() {
   this.windowRef = window;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'invisible',
      'callback': response => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
      },
      'expired-callback': () => {
        // Reset reCAPTCHA?
      }
    });
  }

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