Add Touch ID Authentication To An Ionic 2 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 2.

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:

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:

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:

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

As of right now both Ionic 2 and Angular 2 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:

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:

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:

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:

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 2 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 Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.