Ionic Fingerprint Login

ionic-fingerprint-login

Almost all newer devices currently have some sort of fingerprint our Touch ID authentication already build in. If you want to protect your app with this already built in feature you can offer users a simple and convenient way to unlock their secret data inside their app!

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

There different plugins we can choose, and on Android perhaps not all devices will be supported. Anyway, we take a solution that should work equally on both iOS and Android within our Ionic app which ist the Fingerprint AIO Plugin.

Setting up Fingerprint

To get started we only need a blank new Ionic app, the plugin we talked about and also another page so we can have something like a login screen before we show the actual content of our app. Go ahead and run:

Now make sure to import the plugin to your src/app/app.module.ts like this:

There’s nothing else you have to take care of, we can directly start to use the fingerprint feature!

Building the Login Screen

Our login screen will look a bit like when your 1Password app is locked on a device. Therefore, we not only need a button to trigger the fingerprint authentication but also a few div elements and the Ionic grid system to build a good looking login page.

Change your src/pages/login/login.html to:

Now we just need some CSS to make everything take more space on the page. Also, you might need to add your own lockscreen image to the assets/img folder of your app!

Apply these changes to your src/pages/login/login.scss so the view is finished:

Finally we take care of the actual functionality. As said before we don’t need any special handling for Android/iOS as this plugin will take care of talking to the right interfaces inside both environments.

The only thing we have to do is call the plugin with a few optional parameters here. The only thing needed here is clientId which gives your app an ID inside the keychain of the platform. The rest is optional, and you can check out all parameters on the page of the plugin again!

If the fingerprint authentication was successful, you can now guide your user to the next page of your app which could be something like an inside member area, so here we use setRoot() to move to a fresh navigation stack without any history.

Now go ahead and change your src/pages/login/login.ts to:

Finally your app is ready, and if Touch ID or Anroid fingerprint is set up on your device you can now unlock the app like in the little video below!

fingerprint-login

Of course you can also find a video version of this article below.

  • Jeff Leigh

    Does this still work? It’s my understanding that the latest iOS devices no longer have fingerprint login in deference to facial recognition.