Angular & Firebase - How to present an error message

Question

What I'm using

• Angular
• Firebase

What I have

• Some HTML that allows the user to change their email by entering a new email and their existing password
• When the new email and password are entered, they are passed to an auth service to run the updateEmail method
• If the user enters and incorrect password, the console logs the following error:

core.es5.js:1020 ERROR O {code: "auth/wrong-password", message: "The password is invalid or the user does not have a password."}

Question

1. How can I present an error message like this, or a custom one when this error happens? (through a standard JS alert)

My Auth Service

 updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
        // An error happened.
      });
    });
  }

Update

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';


@Injectable()
export class AuthService {
  user: Observable<firebase.User>;
  redirectUrl: string;


  constructor(
    private firebaseAuth: AngularFireAuth,
    private router: Router) {
    this.user = firebaseAuth.authState;
  }


  // Login Form
  login(email: string, password: string): Observable<boolean> {

    this.firebaseAuth.auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        this.router.navigate(['projects']);
        return Observable.of(true);
      })
      .catch(err => {
        console.log('Something went wrong:', err.message);
        return Observable.of(false);
      });

    return;
  }


  // Account Management - Re-authenticate the user using the current email and current password, then call the update email and email verification methods
  updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
        // An error happened.
         alert(ErroAuthEn.convertMessage(error['code']));
      });
    });
  }


// Log out of Apollo
  logout() {
    this.firebaseAuth.auth.signOut();
    this.router.navigate(['login']);
  }


  // A method to use to check if the user is logged in or not
  isLoggedIn(): boolean {
    console.log(!!this.firebaseAuth.auth.currentUser);
    return !!this.firebaseAuth.auth.currentUser;
  }
}

export namespace ErroAuthEn {
        export function convertMessage(code: string): string {
          console.log('called');
            switch (code) {
                case 'auth/user-disabled': {
                    return 'Sorry your user is disabled.';
                }
                case 'auth/user-not-found': {
                    return 'Sorry user not found.';
                }

                case 'auth/wrong-password': {
                  return 'Sorry, incorrect password entered. Please try again.';
                }

                default: {
                    return 'Login error try again later.';
                }
            }
        }
 }

Answer 1

To be the best solution is to implement a function that for each error message from the documentation returns a more understandable user-friendly message.

export namespace ErroAuthEn {
        export function convertMessage(code: string): string {
            switch (code) {
                case 'auth/user-disabled': {
                    return 'Sorry your user is disabled.';
                }
                case 'auth/user-not-found': {
                    return 'Sorry user not found.';
                }
              .
              .
              .

                default: {
                    return 'Login error try again later.';
                }
            }
        }
 }

Then on your component you can call like this:

updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
      alert( ErroAuthEn.convertMessage(error['code']));
      });
    });
  }