AngularFire not catching error message for signInWithEmailAndPassword

[tc-dev-git]

My stackoverflow: https://stackoverflow.com/questions/76622221/angularfire-not-catching-error-message-for-signinwithemailandpassword

Tech stack:

• Firebase (firebase: "9.6.3",).
• AngularFire (@angular/fire": "^7.6.1").
• Angular v16.
• Npm: https://www.npmjs.com/package/@angular/fire

Having trouble catching the error message and stopping it appearing as red in the console log. I've written catch in the service but doesn't seem to stop it,

App Module:

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [
    AuthenticationService.
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Login Component:

login(): void {
    if (this.form.valid) {
      const { email, password } = this.form.value;
      try {
        this.authenticationService.login(email, password)
          .then(() => {

          })
          .catch(() => {
            console.log('Error caught 1');
          })
      }
      catch {
        console.log('Error caught 2');
      }
    }
  }

Authentication Service:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  constructor(private angularFireAuth: AngularFireAuth, private router: Router) { }

login(email: string, password: string): any {
    try {
      return this.angularFireAuth
        .signInWithEmailAndPassword(email, password)
        .then(() => this.router.navigate(['basics']))
        .catch((error: any) => {
          console.warn(error);
        });
    }
    catch {
      console.log('Error caught 3');
    }
  }

Error message I want to catch and prevent showing in console:

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[davideast]

Hey @tc-dev-git! You'll need to turn this into an async function not catch within the promise try block.

See this StackBlitz as an example.

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  constructor(private angularFireAuth: AngularFireAuth, private router: Router) { }

  async login(email: string, password: string): void {
    try {
      const user = await this.angularFireAuth.signInWithEmailAndPassword(email, password)
      this.router.navigate(['basics'])
    }
    catch {
      console.log('Error caught 3');
    }
  }
}

Also take note that the login function returns void now instead of the Promise<FirebaseUser>. This is because of the routing behavior in the function so there's no need to return a value.

[k4ploc]

I have the same problem but I am using

• Firebase (firebase: "10.7.1").
• AngularFire (@angular/fire": "^17.0.0").
• Angular v16.

even using the function that @davideast comments, also I check the StackBlitz example, but it doesn't use AngularFire only firebase even I updated the StackBlitz firebase version to "10.7.1" and it didn't show the error in console, I guess it is only with AngularFire.

In my app:

in StackBlitz: