Ionic 3 Lock-Screen & Fingerprint Authentication

In this example we are going to implement fingerprint authentication in our Ionic 3 application.

Have you ever noticed how all financial apps will make you re-authenticate or at the very least show a splashscreen when you suspend your application? iOS takes a screenshot of the current visible screen every time our app goes to the background and the image is then stored in local storage. An attacker could then get access to this screenshot and access sensitive information (imagine if the the last screen was the moment you were entering your credit card information).

To protect against this, we are going to show the app’s splashscreen when the app is suspended and also force the user to authenticate. For the sake of this example, the user is only going to be able to authenticate using their fingerprint (however in a real world application, there should be a fallback to a pin or something of that nature).

We’ll beging by starting a new blank project and installing the touch id plugin

Let’s create a LockScreen page which will be presented to the user when the application is no longer in the foreground and has gone to the background. This page will be empty and will be used in a modal (more on this later).

The next step is to determine if our application is in the background or has been opened from the background. We can do this by using the pause and resume events that are provided by Cordova.

Note: For a more detailed explanation see the previous article by clicking here.

What do we plan to do in each case?

1. App is paused
-Show the splashscreen

2. App is resumed
-Hide the splashscreen
-Present the user with the lock-screen
-Show the user the fingerprint authentication

Let’s create the LockService and wire up our events:

The final step is to configure our fingerprint plugin. We won’t go into too much detail on how to set this up as it is properly explained here. For this example, we have taken the snippet from Ionic Native. The one change that we needed to make was to remove the lock-screen when the user has successfully authenticated.

One thing you may have noticed was the isLocked flag. This flag is used to ensure that the lock-screen is presented to users only one time (a user could suspend the app and resume it multiple times and we wouldn’t want to show them the lock-screen multiple times).


And our app.component will look like this, we simply initialize our LockScreenService

That’s all there is to it, the source to this project can be found on Github and a YouTube video explanation can be found below:

If you enjoyed this article, enter your email below to get free updates!