Integrate Biometric Authentication in Your Ionic App with Fingerprint and Face ID

Biometric authentication, including fingerprint and facial recognition, provides a secure and convenient way for users to authenticate. In this tutorial, we will integrate biometric authentication into an Ionic app using the cordova-plugin-fingerprint-aio plugin. This plugin abstracts the specific biometric method and supports both fingerprint and facial recognition, adapting to what is available on the user's device.

Prerequisites

Before we start, ensure you have the following setup:

• Node.js and npm installed
• Ionic CLI installed (npm install -g @ionic/cli)
• Android Studio (for Android development)
• Xcode (for iOS development on macOS)
• A real device with biometric capabilities (either fingerprint or face recognition enabled)

Step 1: Create a New Ionic Project

First, we need to create a new Ionic project. If you already have a project, you can skip this step.

ionic start biometric-auth blank --type=angular
cd biometric-auth

Step 2: Add the Fingerprint AIO Plugin

Next, we need to install the cordova-plugin-fingerprint-aio plugin and its Ionic Native wrapper.

ionic cordova plugin add cordova-plugin-fingerprint-aio
npm install @awesome-cordova-plugins/fingerprint-aio

Step 3: Configure the App

Update app.module.ts

We need to configure our app to use the FingerprintAIO provider. Open src/app/app.module.ts and update it as follows:

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 { FingerprintAIO } from '@awesome-cordova-plugins/fingerprint-aio/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    FingerprintAIO,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Implement Biometric Authentication

Next, we’ll implement biometric authentication in our home page component.

Update home.page.ts

Open src/app/home/home.page.ts and update it as follows:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {FingerprintAIO} from '@awesome-cordova-plugins/fingerprint-aio/ngx';
import { App } from '@capacitor/app';
import { Capacitor } from '@capacitor/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private faio: FingerprintAIO,
    private router: Router
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.showFingerprintAuth();
    });
  }

  showFingerprintAuth() {
    this.faio.isAvailable()
      .then(available => {
        if (available) {
          this.faio.show({
            title: 'Biometric Authentication',
            subtitle: 'Authenticate to access',
            description: 'Use your fingerprint or face to authenticate',
            fallbackButtonTitle: 'Use Backup',
            disableBackup: true, // Disable backup to enforce biometric retry
          })
          .then(result => {
            console.log(result);
            alert('Authentication successful');
          })
          .catch(error => {
            console.error('Biometric authentication failed', error);
            App.exitApp();
          });
        } else {
          alert('Biometric authentication is not available on this device.');
        }
      })
      .catch(e => {
        console.error(e);
        alert('Authentication failed');
      });
  }


}

Update home.page.html

Open src/app/home/home.page.html and update it as follows:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Biometric Auth
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="showFingerprintAuth()">
    Authenticate with Fingerprint/Face ID
  </ion-button>
</ion-content>

Step 4: Test the App

Now it’s time to test the app. Remember, you need to run the app on a real device because biometric features can’t be tested on simulators or emulators.

Conclusion

In this tutorial, we integrated biometric authentication into an Ionic app using the cordova-plugin-fingerprint-aio plugin. This plugin supports both fingerprint and face recognition, adapting to the available methods on the user's device. By following the steps above, you can enhance the security and user experience of your Ionic app with biometric authentication.

Feel free to customize the implementation further and integrate it into your app’s user flow. Happy coding!