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