Implementing Biometric Authentication in an Ionic/Capacitor App

In today’s digital age, security is paramount, and biometric authentication offers a convenient and secure way to protect your app. In this article, we’ll walk you through how to implement biometric authentication in an Ionic/Capacitor app using the capacitor-native-biometric plugin. By the end of this tutorial, you'll have a solid understanding of how to check for available biometric authentication methods and prompt users to authenticate using their biometrics.

Prerequisites

Before we get started, ensure you have the following installed on your machine:

• Node.js and npm
• Ionic CLI
• Capacitor CLI

If you haven’t installed these tools yet, you can follow the installation guides on their respective websites.

Step 1: Create a New Ionic Project

First, create a new Ionic project using the Ionic CLI:

ionic start biometricAuthApp blank --type=angular
cd biometricAuthApp

Step 2: Install the Biometric Plugin

Next, install the capacitor-native-biometric plugin:

npm install capacitor-native-biometric
npx cap sync

Step 3: Implement the Biometric Service

Create a new service to handle biometric authentication logic. This service will check for available biometric methods and perform authentication.

import { Injectable } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { NativeBiometric } from 'capacitor-native-biometric';


@Injectable({
  providedIn: 'root'
})
export class BiometricService {
  constructor() { }

  verifyIdentity() {
    NativeBiometric.isAvailable().then((isAvailable) => {
      if (isAvailable) {
        NativeBiometric.verifyIdentity({
          reason: 'For easy log in',
          title: 'Log in',
          subtitle: 'Authenticate',
          description: 'Please authenticate to proceed',
          maxAttempts: 2,
          useFallback:true,
        }).then((result) => {
          alert("Biometric authentication successful");
          console.log(result);
        }).catch((error) => {
          console.error('Error verifying identity:', error);
        });
      } else {
        alert('Biometric authentication is not available on this device.');
      }
    }).catch((e) => {
      console.error(e);
      alert('Authentication failed');
    });
  }
}

Step 4: Check Authentication on App Launch

Update the app component to check for biometric authentication when the app launches.

import { Component, OnInit } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { BiometricService } from './services/biometric.service';
import { Platform } from '@ionic/angular';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  standalone: true,
  imports: [IonApp, IonRouterOutlet],
})
export class AppComponent implements OnInit {

  constructor(
    private platform: Platform,
    private biometricService: BiometricService
  ) {
    this.initializeApp();
  }

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

  ngOnInit() {
    // Additional initialization can be done here if needed.
  }
  async authenticate() {
    try {
      const result = await this.biometricService.verifyIdentity();
      console.log('Authentication successful', result);
    } catch (error) {
      console.error('Authentication failed', error);
    }
  }
}

Step 5: Build and Test the App

Conclusion

In this article, we’ve explored how to implement biometric authentication in an Ionic/Capacitor app. We created a service to handle the biometric logic, checked for available biometric methods, and prompted the user to authenticate when the app launches. Biometric authentication enhances the security of your app while providing a seamless user experience.

Feel free to explore further and customize the authentication flow to suit your app’s needs. Happy coding!