Add Touch ID Authentication To An Ionic Mobile App

So you want to take advantage of your iOS devices touch id functionality? I don’t blame you because I find my iPad Air 2’s fingerprint reader incredibly useful. Previously I wrote about using touch id for authentication with Ionic Framework 1, but with Ionic 2 being all the rage now, I figured we were due for an update.

We’re going to see how to authenticate our Ionic 2 application using the iOS touch id features and Angular.

Going forward I want to be clear that this will only work with iOS as of now. Android devices with fingerprint readers are slowly making an appearance, but the Apache Cordova plugins haven’t caught up yet. I also want to be clear that not all iOS devices and versions support touch id features. Have a secondary solution when adding this feature into your app.

With that said, let’s create a new Ionic 2 project from our Command Prompt (Windows) or Terminal (Mac and Linux) by executing the following:

ionic start TouchProject blank --v2 --ts
cd TouchProject
ionic platform add ios

Two important things to note here. You must be using a Mac if you wish to add and build for the iOS platform and you must be using the Ionic CLI that supports Ionic 2 projects.

Now we need to add the touch id plugin. We are going to use the Apache Cordova touch id plugin created by Lee Crossley. This can be added by executing the following:

ionic plugin add cordova-plugin-touchid

If you didn’t take notice from the --ts flag when we created our project, we’re going to be developing with TypeScript instead of pure JavaScript.

We’re going to spend all our time in the project’s app/pages/home/home.html and app/pages/home/home.ts files. The first being the UI file and the second being the logic file. Let’s start with the logic file.

Open app/pages/home/home.ts and include the following code:

import {Page, Platform, NavController, Alert} from 'ionic-angular';
import {NgZone} from 'angular2/core';

declare var touchid: any;

@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    authenticated: boolean;
    constructor(ngZone: NgZone, platform: Platform, navController: NavController) {
        this.authenticated = false;
        platform.ready().then(() => {
            touchid.checkSupport(() => {
                touchid.authenticate((result) => {
                    ngZone.run(() => {
                        this.authenticated = true;
                    });
                }, (error) => {
                    navController.present(Alert.create({
                        title: "Attention!",
                        subTitle: error,
                        buttons: ["Close"]
                    }));
                }, "Please Authenticate");
            }, (error) => {
                navController.present(Alert.create({
                    title: "Attention!",
                    subTitle: "Touch ID is not supported",
                    buttons: ["Close"]
                }));
            });
        });
    }
}

Let’s break this down because it could get weird.

As of right now both Ionic 2 and Angular are beta. I have no idea if this will change in a stable release, but as of now data bindings may not refresh without forcing and update with the NgZone class. We can include the NgZone class with the following line:

import {NgZone} from 'angular2/core';

Since we’re using TypeScript, not all JavaScript libraries will exist in DefinitelyTyped. No idea if this particular library exists, but lets assume it does not. This is why we must first declare the library like so:

declare var touchid: any;

If we don’t use DefinitelyTyped or declare our JavaScript class, TypeScript will throw errors.

To better show the usefulness of authentication, we are going to hide all elements of the UI unless properly authenticated. When the authenticated variable is false hide everything, otherwise show it.

Because the plugin uses native code we must wrap it inside a platform.ready. This means the plugin code won’t try to run until our device is ready.

Since not all iOS devices support touch id functionality we must first do a check. We can check to see if it is supported by running the asynchronous touchid.checkSupport function. If not supported we’ll show an alert. If touch id is supported we’ll then start the authentication process:

touchid.authenticate((result) => {
    ngZone.run(() => {
        this.authenticated = true;
    });
}, (error) => {
    navController.present(Alert.create({
        title: "Attention!",
        subTitle: error,
        buttons: ["Close"]
    }));
}, "Please Authenticate");

If authentication succeeds we will need to set our authenticated variable to true. However, due to the binding issues I mentioned earlier we’ll need to wrap it in the NgZone method. If we don’t do this, the front-end may not recognized that our variable changed.

Now we can jump into the front-end code. Open app/pages/home/home.html and add the following:

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <ion-card *ngIf="authenticated == true">
        <ion-card-header>
            Card Header
        </ion-card-header>
        <ion-card-content>
            Hello World
        </ion-card-content>
    </ion-card>
</ion-content>

Pretty much everything here is the default. We only included *ngIf="authenticated == true" to determine whether or not we should show the card.

Conclusion

We just saw how to include iOS touch id support in our Ionic 2 mobile application. I had previously written about doing this in an Ionic Framework 1 application, but with Angular here I figured it would be a good idea to demonstrate how to do this with TypeScript in Ionic 2.

Although available for many iOS devices, touch id is not available on all. It is a good idea to use touch id as an addition, but not a total replacement for other forms of authentication.

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.