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!