Learn how to easily integrate biometric authentication like Face ID and Touch ID in your native iOS and Android mobile apps with NativeScript and Kinvey.
Have you ever wondered how many secure applications are using biometric authentication? In this article, we will discuss how to handle biometric authentication in mobile apps using Face ID and Touch ID. If you want to give your app a feature that is not only secure but will also be modern and convenient enough to delight your users, with the right technology you can easily add this functionality to your own app.
Curious how biometric auth could work with an enterprise authentication solution? Check out Implementing a Mobile Biometric Authentication System for Enterprise Applications.
Some common examples of biometric authentication are Face ID and Touch ID.
Face ID is a Face Unlock facial recognition system designed and developed by Apple for the iPhone X. It is a type of biometric authentication technology intended to succeed Touch ID, a fingerprint-based system.
Now let’s take a look at how to set up a sample application using NativeScript and Kinvey which will demonstrate how we can integrate biometric authentication in native iOS and Android apps. Moreover, if the biometric authentication fails, we will switch back to our standard login procedure (Login and Register).
First, we need to set up the environment to build the application. There are four steps:
For easy installation on macOS use homebrew, a package manager for macOS.
For a detailed explanation of these start-up steps, you can check out this quick setup documentation.
Add the plugin ‘nativescript-fingerprint-auth’ for biometric authentication in your NativeScript app using the following command:
tns plugin add nativescript-fingerprint-auth
The code above, which is responsible for integrating Touch ID as well as Face ID, then needs to be added to your project.
For Face ID, an additional usage string is required which explains the reason for using Face ID in the application. This message is stored as key value pair in the application’s Info.plist file (AppResources/iOS/Info.plist)
When a user opens the application, they will be presented with a log in screen. Once user logs in, they will have the option to enable Face ID or Touch ID.
The app remembers an “Application User,” which is the user whose biometric information is stored in the device. If another user logs in and wants to enable Touch ID or Face ID, they will be asked to confirm if they want to change the application user.
To enable Face ID/ Touch ID and display a confirmation message as shown above, the code below needs to be added:
If the device supports Touch ID/Face ID, the user will be presented with the option to use credentials or to use Touch ID/Face ID:
If Touch ID fails, the user will have the opportunity to revert to using a typed password using ‘Enter Password’ option.
If Face ID fails, the user will have the opportunity to try again or cancel out of Face ID and try another option (in this case, the only other option is to enter a password).
Not all devices are compatible with all forms of biometric authentication, or the authentication may simply fail. It’s important to have a backup system that can allow a traditional username and password. This functionality can easily be implemented using NativeScript and Kinvey.
To create this form, we can just follow the five step process below (links to the documentation will follow each step).
All the apps you’ve created are displayed on the Kinvey Apps tab:
With just a few lines of code, we can ensure that after a successful registration, the user is redirected to the application’s home page.
Again, with just a few lines of code, we can ensure that after a successful authentication the user is redirected to the application’s home page.
In this article, we looked at how to integrate biometric authentication in mobile apps and associate it with an application user. The main benefit of biometric authentication is that you can easily authenticate the user without remembering and entering complex passwords. As you have seen in this article, it is very easy to integrate biometric authentication in your apps.
We achieved this using NativeScript. To learn more about NativeScript with Angular click here.
Moreover, as you can see, we used Kinvey to handle the Login, Registration and Logout functionality without the headache of maintaining sessions and storing user details in the database. You can see how Progress Kinvey is a highly productive serverless platform for building enterprise mobile apps and experiences.
You can use Kinvey to accelerate development with our low-code backend and out of the box integrations with authentication, enterprise and legacy systems. It’s easy to deliver multi-channel externally facing apps faster; we’ll worry about infrastructure, platform and DevOps for you. If you’d like to get started with Kinvey, sign up for a free account.
You can take a look at the full source code used in this article on GitHub here.
Samicheen Khariwal is currently working as a Developer Marketing Intern at Progress. He has worked as a Web Developer for 3 years in the past. Also, recently he worked as Software developer intern in FedEx for automating the scans involved in the shipping process. He is passionate about Machine Learning, Artificial Intelligence and Big Data.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.