Ionic 5 Face ID and Fingerprint Plug-in (Biometric Authentication) App

Sample Ionic 5 app using biometric authentication.

Introduction

In this sample app, you can check out how the integrated Fingerprint and Face ID biometric authentication works in your Appery.io mobile app

πŸ‘

NEW: One-Click Template Installation!

You can now enjoy the one-click-away option of installing the sample app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download any template backups with further installing it.

Create in Appery.io

But if you are still interested in the detailed tutorial, please follow the steps below. So, to create the app:

Creating App

  1. From the Apps tab, click Create new app.
    From the Appery.io dashboard, create a new Ionic 5 app of the Ionic 5 Blank type:
922922
  1. Click CREATE NEW > From plugin; in the Security section, select FaceId and Fingerprint Login plug-in and click Import selected plugins:
15991599

You'll see that the BiometricAuthentification page, two generic services and two generic scripts have appeared in the project tree:

406406

Also, you can check App settings > Cordova plugins and make sure that the FingerprintAllInOne Cordova plug-in is enabled under the Core Cordova plugins tab:

10231023

πŸ“˜

Cordova Plug-in Fingerprint All-In-One

The plug-in sources, examples, and documentation can be found on this GitHub page.

  1. Go to Project > Routing and set BiometricAuthentification as a default route. Save the changes:
15931593

App Testing

Since we are using a native component (barcode scanner), the app cannot be tested in a browser. To test the app, you need to build (.apk / .aab for Android or .ipa for iOS) and install it on your device. The plug-in works on both Android 6+ and iOS.

πŸ“˜

Face ID, supported devices

You can check the iPhone and iPad models that support Face ID here: https://support.apple.com/en-us/HT209183

πŸ‘

App Export

You can check below for how to export your app:

Testing on Device

When your app version is ready, you might also like to test it on the device.

πŸ‘

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

462462

When you click the Check availability button, the service will check if the Fingerprint or Face ID authentication method is supported by your device. The Biometric login button shows the authentication dialog where you can select what biometric login type you prefer, Fingerprint or Face ( but which is Android-protected from taking screenshots of due to the security reasons).

Once the scanned fingerprint or face matches the one registered on your device, the success login status will be returned:

21132113

App work on Android, Fingerprint authentication

And here is how the app behaves on an iOS device:

49934993

App work on iOS, Fingerprint authentication

πŸ“˜

Want to know more?

You might also like this Appery.io tutorial that shows how to add a social login feature to your application using the Facebook Login Appery.io plug-in.


Did this page help you?