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
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.
<!-- show if user not loggedin -->
<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
<!-- show if user logged in -->
<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();
}
