Ionic 2 /Ionic 3 - Fingerprint Authentication with Android and iOS -- Words (535)

Ionic 2 /Ionic 3 - Fingerprint Authentication with Android and iOS

In this tutorial,we are going to cover how to add Fingerprint authentication to Ionic apps for Android and iOS so lets get started .

I'm going to use Ionic CLI v3 and Ionic library 3.x.x but the steps can be also applied to Ionic 2 projects with some minimal changes regarding Ionic CLI v3 commands .

You can also follow this tutorial to upgrade to Ionic CLI v3 which is an improved version of Ionic CLI

Generating a new Ionic project

Open up your terminal on Linux/MAC systems or command prompt on Windows and type the following to generate a new Ionic 3 project :

ionic start fingerprint-demo blank 

Next navigate inside project directory and add both the Cordova plugin for fingerprint authentication and its Ionic native wrapper .

cd fingerprint-demo 
ionic cordova plugin add cordova-plugin-fingerprint-aio --save 
npm install --save @ionic-native/fingerprint-aio

Next lets add it the the list of providers .Go ahead open your project with a text editor .I'm using Visual Studio Code

code .

Now open src/app/app.module.ts and import the native wrapper for fingerprint auth and add it

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

declarations: [
imports: [
bootstrap: [IonicApp],
entryComponents: [
providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}

We can now inject it in our components and start using its API to add Fingerprint auth to our apps .

Open src/pages/home/home.ts and add

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FingerprintAIO ,FingerprintOptions} from '@ionic-native/fingerprint-aio';

selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
fingerprintOptions : FingerprintOptions;
constructor(public navCtrl: NavController,private fingerAuth: FingerprintAIO) {

public showFingerprintAuthDlg(){
    this.fingerprintOptions = {
        clientId: 'fingerprint-Demo',
        clientSecret: 'password', //Only necessary for Android
        disableBackup:true  //Only for Android(optional)
    this.fingerAuth.isAvailable().then(result =>{
    if(result === "OK")
        .then((result: any) => console.log(result))
        .catch((error: any) => console.log(error));


So we first check if Fingerprint auth is available on our device if OK we call the show method with some required and optional options such as clientId ,clientSecret and disableBackup .

Now lets add a button to trigger the Fingerprint auth dialog so open src/pages/home/home.html and add

    Fingerprint auth demo

<ion-content padding>
<button ion-button (click)="showFingerprintAuthDlg()">show fingerprint auth dialog  </button>


That's it ,you can now test the Fingerprint auth by using a real device which supports Fingerprint authentication

ionic cordova platform add android 
ionic  cordova run android 

Make sure to attach a real mobile device with an USB cable before your run your app .

mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.