Add Touch ID Authentication To Your Ionic Framework App

I recently picked up an iPad Air 2 to replace my ancient Android tablet.  My first serious iOS device since my iPod Touch.  A feature that I’m really growing to love on my iPad Air 2 is the touch id functionality for signing into the device and various applications.

How do we incorporate this touch id functionality into our own iOS applications?  More importantly, how do we do this in Ionic Framework?  It is not difficult, because we’re lucky to have an Apache Cordova plugin called cordova-plugin-touchid by Lee Crossley that does the work for us.

The tutorial is going to be a little different from my others in a sense that it is only for iOS.  If your looking for an Android solution, look elsewhere as you’ll only find iOS here.

Let’s start by creating a new Ionic Framework project from the Terminal or Command Prompt:

Remember, this is going to be an iOS application, so if you’re not developing on a Mac, this will not work for you.

Next we need to install the touch id plugin into our project:

At this point, you can technically start using the plugin in your project, but since we’re using Ionic, we probably want to do things a little more AngularJS-like.  Let’s go ahead and install the AngularJS extension set, ngCordova, into our project.

The latest version of ngCordova at the time of writing this is commit c3634c6 on GitHub.  You’re welcome to use the latest version, but it may or may not work depending on any changes that might be introduced into the library.

After you download ngCordova, you need to copy ng-cordova.min.js into your project’s www/js directory, and add the following to your www/index.html file:

Notice the two highlighted lines.  It is very important that ng-cordova.min.js appears before cordova.js, otherwise you’re going to get strange results.  Also take note that the <ion-content> tags now contain an ExampleController which we’re going to add in a moment.

In your project’s www/js/app.js file we need to inject ngCordova into the AngularJS module.  This can be done like so:

At this point ngCordova is set up and ready to go.

With your project’s www/js/app.js file still open, include the following controller:

A few things about this controller.  First you’ll notice our use of the $ionicPlatform.ready method.  This is because the plugin uses native device code and needs to be ready before trying to use it.  When we’re sure the application is ready, we must check to make sure the device supports Touch ID through the $cordovaTouchID.checkSupport method.  If supported we’ll then ask for authentication through the $cordovaTouchID.authenticate method.

Conclusion

If you’ve got a device with hardware support running iOS 8.0+, then you can make use of the touch id functionality in your Ionic Framework mobile application.  This functionality will not work with Android, and must be tested with a physical iOS device, not a simulator.

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.

  • Nic, another amazing tutorial. Thanks for sharing!
    Question for you, can you integrate iOS Touch ID with a Firebase backend?

  • Hitu Bansal

    Nic, Can we do registration and login using touch. i mean only registered user can login using their touch?

    • Good question. I really don’t know. I think this would only be possible if two things happened:

      You have the user enter a username at some point in time
      The touch authentication returns some kind of consistent hash

      I don’t think touch authentication returns any usable value as a password. I could be wrong though.

      • First, nice article! Great level of detail. Second, you are correct that the authentication doesn’t provide any consistent useable hash back, but the scenario is still easily addressed. I actually submitted the ngCordova TouchID wrapper after using it to solve this very problem during my first pet project exploring ionic.

        The simplest approach is to actually use TouchID as a guard to a keychain entry. ngCordova keychain makes this quick and easy. If you have an existing login system, have them enter their info and then toggle using TouchID as an option. When they say yes, simply store the credentials in the keychain. Alternatively, if you are only equating a single device as a particular consumer of your service, then generate an arbitrary identifier, register it with your service, and store that instead.

        Its relatively straightforward if you just think of TouchID as a way to gain access to the real identifiers. @hitubansal:disqus Let me know if you hit any snags implementing it. If there is interest, I might take inspiration from this one and put together a blog post.

        • If you end up making a post, link back so I can have a look 🙂