Signinwithpopup Promise Doesn't Execute The .catch Until I Click The Ui. Angular And Firebase

I'm having a trouble with the .signInWithPopup() method provided by AngularFireAuth, you can see more here: firebaseAuthReference In my auth.service.ts I've the following method.

Solution 1:

try to force change detection on error.

1. add import:

   import { ChangeDetectorRef } from'@angular/core';
   

2. pass reference to constructor:

   constructor(private router: Router,
               private ref: ChangeDetectorRef,
               private afAuth: AngularFireAuth) {}
   

3. force change detection on error:

   (err) => {
     this.showError = true;
     // TODO fix bug. this code isn't execute until I press the button again.this.ref.detectChanges();
   )
   

Solution 2:

From the docs you provided it looks like you have to catch the errors as the second argument of the .then() function.

onFacebookLogin() {
    this.authService.signinWithFacebook2()
      .then(
        (res) => {
          this.authService.getTokenId();
          this.router.navigate(['/dashboard']);
        },
      (err) => {
          this.showError = true;
          // TODO fix bug. this code isn't execute until I press the button again.
        }
      );
  }