Custom Error Handling


Hi guys, im new to Ionic please help.

First I’d like to show a screenshot of what type of errors I mean.
Ignore the typescript error below the runtime error

You know like i’m using firebase to authenticate users and i’d like to maybe show a toast using the toast controller or an alert or something if a user enters a wrong password or email or any related error.
Maybe someone could direct me to a demo or explain to me please. Below is a sample code for firebase login.

My Login Page:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RegisterPage } from '../register/register';

import { usercredentials } from "../../models/interfaces/usercredentials";
import { AuthProvider } from "../../providers/auth/auth";
 * Generated class for the LoginPage page.
 * See for more info on
 * Ionic pages and navigation.

  selector: 'page-login',
  templateUrl: 'login.html',
export class LoginPage {
  credentials = {} as usercredentials;
  constructor(public navCtrl: NavController, public navParams: NavParams, public authservice: AuthProvider) {

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');

  login() {
    this.authservice.login(this.credentials).then((res: any) => {
      if (!res.code)

  resetPassword() {

  signup() {


The provider page:

//import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from "angularfire2/auth";
import { usercredentials } from "../../models/interfaces/usercredentials";

  Generated class for the AuthProvider provider.

  See for more info on providers
  and Angular DI.
export class AuthProvider {

  constructor(public afauth: AngularFireAuth) {
    console.log('Hello AuthProvider Provider');

  login(credentials: usercredentials) {
    var promise = new Promise((resolve, reject) => {
      this.afauth.auth.signInWithEmailAndPassword(, credentials.password).then(() => {
      }).catch((err) => {

    return promise;


Anyone Please?




Import the type firebase.Error from firebase/app. Process error.code with a switch statement and present toast messages with different messages for each error code.


thanks for the help Ill try that