touch-id-ionic-native-img

Ease-of-use is a primary concern of any mobile app developer. It makes users happy and has a direct impact on many Very Important Things, like adoption, user retention, and monetization. Today, we’ll look at one of the simplest places to improve the user experience: the login page.

In general, a logged-in user is a more valuable user. Not only does authentication open the door to offering a lot of high-value features that users love like personalization, it also allows app developers to integrate features that matter to their businesses, like securely storing a user’s payment details to make in-app purchases easier. Clearly, the login page is the gateway to some of our apps’ richest experiences, so the last thing we want is for users to churn out because they couldn’t remember their login details and had to fumble with password reset flows.

So let’s make login easy by taking a look at how to use Ionic Native to integrate Touch ID into an Ionic 2 app for iOS.

Allowing users to log in to your app with Touch ID is one of the coolest and easiest ways to enhance the user experience. This is particularly true for iOS apps, since a very large number of users have upgraded to an iPhone 6 or 6s.

It’s high value, only takes a handful of code, and is pretty cool. Who are you to refuse?

Getting Set Up

To make things easy, I’ve put together a simple project for us to start with that has two pages and all the CSS we need. If you want to follow along, feel free to do the following:

  1. Download or clone the project from GitHub
  2. Run npm install inside the project directory to get all the needed dependencies.

OK, let’s take a look at the project.

The first page is ‘Home’ in app/pages/home/:

login-page

Looks like a pretty standard login form, except that we also have a fingerprint button to allow the user to choose to log in with Touch ID.

The second page is ‘Loggedin’ in app/pages/loggedin/. The app will transition to this page when the user successfully logs in with touch ID.

That’s all there is to it. Time to wire everything up.

Touch ID is an Ionic Native plugin, so the first step is to add the plugin to our project:

ionic plugin add cordova-plugin-touch-id

Then import the plugin into our Home component in app/pages/home/home.ts. While we’re at it, we’ll also import our LoggedinPage, so that we can transition to it later when the user successfully logs in with Touch ID, as well as Platform from ionic-angular to give us access to the Ionic Platform lifecycle events:

import {NavController, Platform} from 'ionic-angular';
import {TouchID} from 'ionic-native';
import {LoggedinPage} from '../loggedin/loggedin';

When the component first loads, we’ll also be checking if TouchID is available on the user’s device, so we’ll declare a touchIdAvailable variable of type boolean to store the result of that check. The variable is private, so that it can only be accessed within this component. We’ll also create an instance of Platform in our constructor:

private touchIdAvailable: boolean;
constructor(public _navCtrl: NavController, private _platform: Platform) {}

Checking for TouchID

Now that we’re set up, the next step is to check if TouchID is available. After all, it would make us look pretty bad if we showed the option to log in with Touch ID, when it isn’t an option on the user’s device.

To do this, we call the static function TouchID.isAvailable() in the constructor for our component once the Ionic Platform is ready, which is the point in the lifecycle when native functionality can safely be called. TouchID.isAvailable() returns a promise that resolves if Touch ID is available and rejects if it isn’t:

constructor(public _navCtrl: NavController, private _platform: Platform) {
  this._platform.ready().then(() => {
    TouchID.isAvailable().then(
      res => this.touchIdAvailable = true,
      err => this.touchIdAvailable = false
    );          
  })
}

Next, to make sure the Touch ID button only appears if Touch ID is available, we’ll add an *ngIf conditional to the button, which removes it from the DOM if touchIdAvailable evaluates to false:

<button *ngIf="touchIdAvailable" round text-center>

Implementing Touch ID

Time for the cool part! This is all it takes to add Touch ID support to our app:

private startTouchID () {
  TouchID.verifyFingerprint('Fingerprints are Awesome')
    .then(
      res => this._navCtrl.push(LoggedinPage),
      err => console.error('Error', err)
    );
} 

Here, we’ve declared a startTouchID() function that calls the static verifyFingerprint() function from the TouchID plugin. This invokes the native Touch ID functionality in iOS. It also takes a message as an argument that will be displayed in the modal when the user is asked to authenticate with Touch ID.

verifyFingerprint() returns a promise that resolves if the user successfully authenticates with their fingerprint and rejects if they fail. In this case, we navigate to the LoggedinPage if the user is successful by pushing the LoggedinPage component on to the Ionic navigation stack:

res => this._navCtrl.push(LoggedinPage)

All we have to do now is update our fingerprint button on our login page to call startTouchID() when the button is tapped:

<button (click)="startTouchID()" *ngIf="touchIdAvailable" round text-center>

Now, when the user taps the fingerprint icon, they’ll activate Touch ID and be prompted to provide their fingerprint:

touchid-prompt

Success!

Since Ionic Native plugins don’t work in the browser or emulator, you will need to deploy the app to a device to try it out. If you have a developer device set up, ionic run ios will do the trick, otherwise try out Ionic View or Ionic Package.

Once you have the app running, tap the fingerprint button, give iOS your fingerprint when prompted, and BOOM:

touch-id

Pretty sweet reward for all that effort, huh? Unfortunately, she wasn’t very happy about the hat, but small price to pay for enabling advanced biometric authentication with a pretty minimal amount of code.