Add Touch ID Authentication Support To Your NativeScript App

Being able to authenticate within a mobile application using your fingerprint offers a certain convenience that is of huge benefit in modern applications. Using the iOS touch id, doors can be opened in the land of application security and since Telerik NativeScript can interface with native APIs and features, touch id becomes available for use within our JavaScript based application.

We’re going to see how to show secure content within our application, only accessible after successfully authenticating using a fingerprint and the iOS touch id features.

Before going forward, as of now this will only work with iOS. Android fingerprint readers are slowly making their way into the world, but due to their limited availability, it makes sense to stick with only iOS for now. It is also important to be aware that not all iOS versions and devices support touch id. With all this said, you should have a backup plan in case a user without touch id needs to use your application.

Let’s start by creating a new NativeScript project. This can be done by executing the following from your Command Prompt (Windows) or Terminal (Mac and Linux):

tns create TouchProject
cd TouchProject
tns platform add ios

It is important to note that if you’re not using a Mac computer, you cannot add and build for the iOS platform.

Because we don’t want to do the interfacing with iOS manually, we’re going to use the NativeScript touch id plugin created by Eddy Verbruggen. It can be installed into our project like so:

tns plugin add nativescript-touchid

Now we can get to work!

We’re going to spend most of our time in the app/main-page.xml and app/main-page.js files. One being our UI file and the other being our logic file. With that said, let’s start by opening the app/main-page.js file and including the following code:

var touchid = require("nativescript-touchid");
var observableModule = require("data/observable");

function pageLoaded(args) {
    var page = args.object;
    var data = new observableModule.Observable({authenticated: false});
    touchid.available().then(function(avail) {
        if(avail) {
            touchid.verifyFingerprint({
                message: "Scan with your finger",
                fallbackTitle: "Enter PIN"
            }).then(function() {
                data.authenticated = true;
            }, function(error) {
                console.log("Fingerprint NOT OK" + (error.code ? ". Code: " + error.code : ""));
            });
        }
    });
    page.bindingContext = data;
}

exports.pageLoaded = pageLoaded;

Time to break down what is happening in the above.

First we are including two modules. We are including the touch id module that we installed as a plugin and we are including the observable module. The observable module allows us to do data binding between or front-end and back-end.

Inside our pageLoaded function which acts as our onLoad or constructor method we initialize our observable object and immediately check to see if the current device supports touch id functionality. I must note that much of this touch id code was taken straight from the official documentation. If touch id is available, we can then verify a matching fingerprint.

If the fingerprint matches we are going to set the observable object to true. The reason for setting our observable object as true or false is because we are going to use this information to determine if we should show content on the screen. If false, hide all content, otherwise show it. We’ll see that now.

Open your project’s app/main-page.xml file and include the following code:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Label text="We are secure" class="title" visibility="{{authenticated ? 'visible' : 'collapsed'}}" />
    </StackLayout>
</Page>

Notice our use of the visibility tag? It is a ternary operation. If authenticated is true we will set the visibility to visible, otherwise it will be set to collapsed.

Of course this example can get much crazier depending on what you want to do with touch id authentication, but from a basic perspective we’ve just created content protected by fingerprint.

Conclusion

Being able to authenticate via a fingerprint was not difficult to do. Probably the most difficult part is understanding observables, but once you’re there, it will come easy. You can add touch id functionality to protect your entire application or certain areas within your application. Although it saves some users the hassle of having to enter a pass code, you should have a backup plan in case your user doesn’t have a touch id supported device. Offer this functionality as an enhancement to your already existing authentication, not a replacement.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.