Ionic Firebase Email Authentication

This lesson, we're going to learn how to integrate ionic firebase email authentication with step by step instruction.

To get started, we need to follow these instructions

Enable Email Authentication method on Firebase Console
Installing & Configuring firebase module with ionic project

Enabling Email Authentication

To get start, we need to login with firebase account (https://firebase.google.com/) & create new project. After creating new project we need to copy web credential for app configurations. Then you need to navigate Authentication -> SignIn Method. Now, enable Email Authentication

[caption id="attachment_7359" align="aligncenter" width="991"]

enable-email-authentication

enable-email-authentication[/caption]

Working With ionic project

Let's create new ionic project & new pages for login and signup

ionic start logindemo blank
cd logindemo
npm install --save firebase

After creating new pages, we need to declare our new pages inside src/app/app.module.ts .

firebase.initializeApp({

    apiKey: "xxxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx"

});

Next, we need to replace our home page with login login page.

Working with home.html

If user is not logged in:

Let's create two input fields for getting email & password, then two buttons for login and signup.

<div *ngIf="!isUserLoggedIn">
  <ion-list>
    <ion-item>
      <ion-label stacked>Email</ion-label>
      <ion-input type="text" [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>Password</ion-label>
      <ion-input type="password" [(ngModel)]="password"></ion-input>
    </ion-item>
  </ion-list>
  <ion-row>
    <ion-col>
      <button ion-button block (click)="login()">Login</button>
    </ion-col>
    <ion-col>
      <button ion-button block (click)="register()">Register</button>
    </ion-col>
  </ion-row>
</div>

When user click register() or login() button we need to call respective function from home.ts; also I'm hiding this div if user is loggedin

If user is logged in

If user is logged in we're hidding login form, then we're displaying new list

<div *ngIf="isUserLoggedIn">
    <ion-list>

        <ion-item>
            <ion-label>Email: {{userData.email}}</ion-label>
        </ion-item>
        <ion-item>
            <ion-label>Email Verified: {{userData.emailVerified}}</ion-label>
            <button item-right ion-button (click)="verifyEmail()" *ngIf="!userData.emailVerified">Verify</button>
        </ion-item>

    </ion-list>
    <button ion-button clear small block (click)="logout()">logout</button>
</div>

Working with home.ts

Let's create a functions for login, register, email verification and logout using firebase sdk

login() {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(data => {
        this.displayToast("Login Successfully");
    }).catch(err => this.displayToast(err))
}

register() {
    firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(data => {
        this.displayToast("Registered Successfully");
    }).catch(err => this.displayToast(err))
}

verifyEmail() {
    firebase.auth().currentUser.sendEmailVerification();
}

logout() {
    firebase.auth().signOut();
}

displayToast(message) {
    this.toastCtrl.create({
        message,
        duration: 3000
    }).present();
}

Tags: