Ionic 4/Angular - Fingerprint Authentication with Android and iOS

In this tutorial, we are going to cover how to add Fingerprint authentication to Ionic 4/Angular apps for Android and iOS so let's get started .

We are going to use Ionic CLI 4 and Ionic 4 but the steps can be also applied to Ionic 3 projects.

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 4/Angular project :

ionic start fingerprint-demo blank --type=angular 

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. We are 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 let's add a button to trigger the Fingerprint auth dialog so open the src/pages/home/home.html file 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.

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status