Can't catch exception in AngularFireAuth

Viewed 221

I try to catch exception with AngularFireAuth.createUserWithEmailAndPassword and show user the exists username/password error message. The exception handle code runs but somehow a similar Exception still bubbles to global error handler.

import { Component } from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';

@Component({
  selector: 'register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
  constructor(
    private af: AngularFireAuth,
  ) {}

  async onRegisterUsingEmailAndPassword(event) {
    const { email, password } = event;
    try {
      await this.af.createUserWithEmailAndPassword(email, password);
    } catch(error) {
      console.log(error); // <-- this code runs and logs {code: "auth/email-already-in-use", ...}
    }
  }
}

Using firebase.auth directly works as intended: the exception code handler runs and no exception bubbles to Global Error Handler.

import { Component } from '@angular/core';
import firebase from 'firebase/app';

@Component({
  selector: 'register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
  constructor() {}

  async onRegisterUsingEmailAndPassword(event) {
    const { email, password } = event;
    try {
      await firebase.auth().createUserWithEmailAndPassword(email, password);
    } catch(error) {
      console.log(error); // <-- this code runs and logs {code: "auth/email-already-in-use", ...}
    }
  }
}

Dependencies:

  • @angular: 10.2.4
  • @angular/fire: 6.1.4
  • firebase: 8.2.2
1 Answers

You can pipe the catch to trap the error in place of the try/catch block:

await this.af.createUserWithEmailAndPassword(email,password)
    .catch(err => {
        console.log(error); 
    })
Related