Ionic2 Alerts with Firebase User Authentication


Here I’ll show you how I was able to add the Alert component to the Firebase User Authentication when the login credentials resulted in error. I’ll just show you a small code change needed to accomplish this. To get familiar with the complete set of changes, please take a look at my previous article

Open the login.js file

From the previous article, replace the onLogin(Form) method for the one below:

    onLogin(form) {
      this.submitted = true;
      if (form.valid) {
          // Authenticate with Firebase
          var ref = this.userData.firebaseRef();
            "email"     : form.controls.username.value,
            "password"  : form.controls.password.value
          }, (error, authData) => {
          if (error) {
              let alert = Alert.create({
                title: 'Login Failed',
                subTitle: 'Please check your username and/or password and try again',
          } else {
              //console.log("Authenticated successfully with payload:", authData);

That’s it!!!

We have Firebase authentication fully configured with our ionic-conference-app

Please note

At the time of this post I’m using the following configuration:

ionic-conference-app Includes commits up to Feb 19, 2016

  1. Cordova CLI: 5.4.1
  2. Gulp version: CLI version 3.8.11
  3. Gulp local: Local version 3.9.0
  4. Ionic Version: 2.0.0-beta.1
  5. Ionic CLI Version: 2.0.0-beta.17
  6. Ionic App Lib Version: 2.0.0-beta.8
  7. OS: Windows 7
  8. Node Version: v5.1.1

Luis Cabrera is a family man and a dedicated dad. He lives in Florida, where he works as an Applications Architect for one of the most recognizable brands in the US. In his spare time, Luis likes to develop apps using ionic and Firebase. Aside from technology and family, he enjoys the outdoors and working on his horse farm.

Older posts...

Written by

Get in touch!

Notice any mistakes?
Leave me a message