coMakeIT - Xebia Logo

All new devices have some sort of fingerprint authentication already built-in. Using this built-in feature we can provide mobile app users with a simple and convenient way to unlock their “secret” data inside the application.

Advantages of Fingerprint authentication

We can add fingerprint/touch ID authentication to Ionic/Angular mobile applications using cordova-plugin-fingerprint-aio. We can also use this plugin in such a way that if the user closes the application without logging out and then re-enters the application, it will force the user to scan their fingerprint.

Basic Application Flow

The basic flow of the mobile application will be as shown below:

  1. Let’s assume “CoMakeIT Demo App” has 2 pages (Login and Dashboard pages)
  2. User logs into the application with username and password.
  3. On successful authentication, the user will be navigated to the dashboard page.
  4. User exits from the application (not logged out from the application).
  5. User resumes the application
  6. A “Fingerprint Access” will pop up over the application.
  7. The “Fingerprint Access” will be dismissed if the user is successfully verified by Fingerprint/Touch ID.
  8. User will be navigated to the dashboard page.

Create Ionic Project

ionic start CoMakeIT sidemenu
cd .\CoMakeIT\src\app\pages
ionic generate page

Plugin Integration

.ionic cordova plugin add cordova-plugin-fingerprint-aio
npm install @ionic-native/fingerprint-aio
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthGaurdService } from './services/auth-gaurd.service'; import { AuthenticationService } from './services/authentication.service';
import { IonicStorageModule } from '@ionic/storage'; import { AppUtilService } from './services/app-util.service';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx'; @NgModule({
declarations: [AppComponent], entryComponents: [],
imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule,
providers: [ StatusBar, SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, AuthGaurdService,
AuthenticationService, AppUtilService, FingerprintAIO
bootstrap: [AppComponent]
export class AppModule {}
presentFingerPrint() {{ clientId:'CoMakeIT-Demo-App',
clientSecret:'password', // Only necessary for Android disableBackup:false, // Only for Android(optional) localizedFallbackTitle:'Use Pin', // Only for iOS localizedReason:'Please authenticate'// Only for iOS
async isFingerprintAvailable() { letresult=false;
constpromise=awaitthis.fingerPrintAIO.isAvailable(); promise.then((response) => {
console.log('fingerprint available : ', response);
promise.catch((error) => {
console.log('fingerprint error : ', error);

First, check if fingerprint authentication is available on the device. If it is available, call the presentFingerPrint() function.

loginWithFingerprint() {
if (this.appUtil.isFingerprintAvailable) {
.then((result: any) => {
.catch((error: any) => {
console.error('fingerprint : ', 'error');
Login with Fingerprint

Test Fingerprint Authentication

ionic cordova platform add android
ionic cordova run android

Demo app screenshots

Source Code

Refer to the Github project for complete source code.

Leave a Reply

Your email address will not be published. Required fields are marked *