Firebase authentication using ionic 3

In this tutorial, it will explain how to connect with firebase and get authenticate using ionic 3. There are some prerequisites this that you must achieve in order to do this tutorial. You can download the source cord from here

Prerequisites

If you already installed the node.js it’s ok. make sure it is version 7.5.0 or higher. If you don’t have installed node.js click here to download the latest version of node.js. you can also check your current node.js version by typing below command

If you having ionic and Cordova installed then it's ok. please make sure ionic version is 3.20.0 or higher and Cordova version is 8.0.0 or higher. you can also check your current ionic and Cordova version by typing below command

ionic version

Cordova version

If you don’t have installed ionic and Cordova use below command to install by using CMD

npm install -g cordova ionic

you have to create a firebase account in order to use firebase authentication. It is a very simple task. Click here to create a firebase account.

First of all, you have to create an ionic project and change directory to the project existing folder. If you wish you can run the project at the beginning using the below commands.

ionic start ionic-login blank cd ionic-login ionic lab

Then install firebase 2 to the project

npm install firebase angularfire2 --save

we need two pages to do this activity.

To create those two pages type following commands

ionic g page login ionic g page signup

Go to app.module.ts and import these two pages and enter the page names in the declaration array and the entryComponent array.

import {LoginPage} from '../pages/login/login'; 
import {SignupPage} from '../pages/signup/signup';

Then you have to configure firebase by adding code snippet in the firebase. Go to firebase and click add firebase to your web app. Then it will appear a dialog box as follow

copy this code and paste this code in app.module.ts above the declarations

Then you have to import some angular fire libraries

import {AngularFireAuthModule} from 'angularfire2/auth'; 
import {AngularFireModule} from 'angularfire2';

include these 2 inside the imports as

imports:[ AngularFireModule.initializeApp(config), AngularFireAuthModule, ]

Go to the app.component.ts to made some changes

 Here we are going to see when the app is launching if the user is already got authenticated then set the root page as Homepage. If the user is not authenticated than mean you can’t go inside. Therefore it directed to the login page. Make changes as given below.

import {LoginPage} from '../pages/login/login'; 
import {AngularFireAuth} from 'angularfire2/auth';

Then inject AngularFireAuth to the constructor

constructor(private afAuth: AngularFireAuth) { }this.afAuth.authState.subscribe(auth =>{
 if(!auth) 
this.rootPage=LoginPage;
 else this.rootPage=HomePage; });

Then we have to develop the view of the login page and the signup page

 In the signup, HTML add the below code inside the ion-content

HTML code for the signup In the login, HTML add the below code inside the ion-content HTML code for the login add the following in signup.ts

import { Component } from '@angular/core';
import {IonicPage,NavController,NavParams,AlertController,LoadingController from 'ionic-angular';
import {AngularFireAuth} from 'angularfire2/auth'; 
import {LoginPage} from '../login/login'; 
@IonicPage() @Component({ selector: 'page-signup', templateUrl: 'signup.html', }) 

export class SignupPage { signupData ={ email:'', password:'', passwordRetyped:'', }; 

constructor(public navCtrl: NavController,
   public navParams: NavParams, 
   private alertCtrl: AlertController, 
   private afAuth: AngularFireAuth, 
   public loadingCtrl:LoadingController) { } 

ionViewDidLoad() { 
  console.log('ionViewDidLoad SignupPage');
} 

signup(){ 
  if(this.signupData.password !==this.signupData.passwordRetyped){ 
    let alert =this.alertCtrl.create({ 
    title:'Error', message:'Password and Re-entered password does not match ', 
    buttons:['OK'] }); 
  alert.present(); 
  return; 
  } let loading = this.loadingCtrl.create({ content: 'Please wait...' }); 
  loading.present(); 
  loading.dismiss(); 
  this.afAuth.auth.createUserWithEmailAndPassword(this.signupData.email,this.signupData.password) 
 .then( newUser => { 
    console.log("newUser"+newUser) }) 
   .then(auth=>{ console.log(auth); 
   this.Alertsuccessfull(); }) 
   .catch(err =>{ 
   console.log("error in registering"); 
   }); 
   } 
   Alertsuccessfull() {

  let alertmsg = this.alertCtrl.create({ title: 'Successful', message: 'You successfully registerd', buttons: ['Ok'] }); 
alertmsg.present(alertmsg); 
} 
}

add the following in login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ToastController } from 'ionic-angular';
import {AngularFireAuth} from 'angularfire2/auth'; 
import {HomePage} from '../home/home'; 
import {SignupPage} from '../signup/signup'; 

@IonicPage() 
@Component({ selector: 'page-login', templateUrl: 'login.html', }) 

export class LoginPage { loginData={ email:'', password:'' } 

constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl:ToastController, private afAuth:AngularFireAuth) { } 

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

login(){ 
this.afAuth.auth.signInWithEmailAndPassword(this.loginData.email,this.loginData.password) 
.then(auth =>{ this.navCtrl.setRoot(HomePage); }) 
.catch(err =>{ 
   let toast =this.toastCtrl.create({ message:err.message, duration:1000 }); 
   toast.present(); }); } Register(){ this.navCtrl.push(SignupPage) }
 }

now the authentication part is over. You can register as a user and log in using the login page. But one part is missing. That is log out function. Let’s see that one in step 6.

You can add log out button any page you like. Here on the home page, there is an icon at the top right corner of the navigation bar. When it is clicked user can log out from the system

HTML code for the logout function

Add the below code to home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import {LoginPage} from '../login/login'; 
import {AngularFireAuth} from 'angularfire2/auth'; 

@Component({ selector: 'page-home', templateUrl: 'home.html' }) 

export class HomePage {

 constructor(public navCtrl: NavController, private fire:AngularFireAuth ) { } 

logout(){ 
    
  this.fire.auth.signOut(); 
  this.navCtrl.push(LoginPage);
} 

}