Ionic Fingerprint AIO

Biometric authentication has become increasingly popular in mobile apps to enhance security and user experience. Instead of entering passwords, users can quickly authenticate with their fingerprint or face.

Ionic Capacitor makes implementing this functionality easy thanks to the Fingerprint AIO plugin. This plugin allows us to use the native biometric capabilities of the device to authenticate users in our Ionic apps.

In this post I will show you how to implement Fingerprint AIO step by step in an Ionic app with Capacitor. We will see how to install and configure the plugin, check if biometrics are available, and authenticate users through fingerprint or facial recognition.

Firstly, add the plugin using the following command:

npm install cordova-plugin-fingerprint-aio
npm install @awesome-cordova-plugins/fingerprint-aio
npx cap sync

Import the OneSignal package:

import {FingerprintAIO} from '@awesome-cordova-plugins/fingerprint-aio/ngx';
constructor(
    private fp: FingerprintAIO
  ) {}

The first thing we need to do is check the availability of fingerprints like so, the possible results would be fingerprint and facial recognition:

this.fp.isAvailable().then((result) => {
        //'finger' | 'face' | 'biometric'
        this.available = result;
      }).catch((err) => {
        console.log({err});
  });
});

If we have either of the aforementioned options available, we can use the show function like so:

 this.fp.show(this.fpo).then((success: string) => {
          // Fingerprint/Face was successfully verified
         console.log(success);
      }).catch((error: any) => {
          // Fingerprint/Face was not successfully verified
         console.log(error.message);
  });

For this plugin, we need to do some extra configuration in platform iOS by updating the Info.plist adding the NSFaceIDUsageDescription tag.

 <key>NSFaceIDUsageDescription</key>
 <string>Face ID access is required</string>

Fingerprint example

In this post we have seen how straightforward it is to implement biometric authentication in an Ionic application using the Fingerprint AIO plugin.

Adding this type of native biometric login enhances security and makes signing in effortless for users, improving their overall experience with our app. Fingerprint AIO allowed us to integrate Touch ID and Face ID natively without complex authentication workflows.

Overall, Fingerprint AIO is a robust plugin that makes implementing biometric authentication easy with Ionic and Capacitor. The native support helps provide a smooth user experience that feels right at home on iOS and Android devices.