Ionic Lock Screen Authentication


There are several scenarios for an Ionic Lock Screen and although the Pattern Lock was famous on Android, a Pin number entry is more secure these days. Of course you could also use the native variants of the TouchID or Face ID feature, but sometimes your app just needs a simple lock mechanism to protect it.

On the way to this tutorial I’ve first found this great lock screen component which apparently was not so comfortable to integrate.

Therefore I learned to build a custom Ionic Module and now this package (still Kudos to Carson Chen!) is available as a custom Ionic Module which you can install through NPM.

The final result will look like this:


There is not a special use case in here as you will have your own logic to trigger the auth dialog, we will simply integrate and test the functions!

Starting the Ionic Lock Screen App

The easiest way to test is with a blank Ionic project. Therefore, go ahead and run the commands to create it and to install the package plus (optional) the SQLite plugin for Ionic Storage:

Once all of this is finished we can load the custom lock screen module into our module like this inside app/app.module.ts:

That’s all for the integration of my the lock screen module!

Adding the Lock Screen Feature

As said before we will keep the logic really small in here, therefore we only need a basic view and two buttons to either manually display the Ionic lock screen or to update/set the passcode which will be checked inside the screen.

Go ahead and change your pages/home/home.html to:

Now we get to the actually interesting stuff which is using the plugin. Carson already did a great job on implementing a constructor which handles the information for the lock screen, therefore the only thing we need to take care of when calling the plugin is setting the right values.

I’ve also removed the TouchID feature from the original lock screen, but if you think this package is great and want more functions in it, just leave a comment below!

Within our app we now also check our Storage in the beginning to see if the user has already set his personal code and if not, we display an alert where he can set a 4 digit code. Of course you could also use a custom modal to display this a bit nicer but today let’s keep it short.

When we then open the lock screen we pass the previously set code from the storage to the lock screen plus:

  • ACDelbuttons: Whether to display 2 buttons to clear/delete part of the digit input
  • passcodeLabel: Simply the label of the lock screen
  • onCorrect: A function called when the code was entered correctly
  • onWrong: A function always called when the input was wrong

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

That’s it! You can even run this inside your browser as it’s not really dependent on any Cordova plugins (which is way I removed the Fingerprint).

One final note:
This authentication is by no means 100% save. We store a code inside the local storage in plain text, and we only display a view above our current page. This works great if you just want a simple and easy way to have a security like feature inside your app.

One improvement would be to store the code as a hashed value and only pass that value to the Ionic lock screen module. However, if this would be interesting for you I might add the functionality to the plugin so let me know below!

You can also find a video version of this Quick Win below.