Add Pin Code Unlock To Your IonicFramework App

I currently have a few IonicFramework Android and iOS applications on the market.  A common request for these apps have been to have a pin code unlock feature for extra security.

Ionic Pin Code Unlock Ionic Pin Code Unlock Numbers

Making a pin code unlock requires no additional plugins, however, I recommend following one of my previous articles regarding Apache Cordova event listeners as it will be useful in making sure the pin code unlock does it’s job.

Let’s start things by creating the CSS for our screen.  In the www/css/style.css file, add the following code:

It will be useful to know that I did not invent the above CSS.  I got the CSS code from a thread in the IonicFramework forums.  The first .center-vertical will actually do the vertical centering and the second will fix all the horizontal items that broke.

Next we’ll want to add the HTML code responsible for our pin code template.  Create www/templates/pincode.html and add the following code to it:

Some interesting things to note in the above code.  There are four columns that represent each digit of our pin code.  These four values are actually one string, but since we know a plain text field is lame for a pin unlock screen we break of up the string on the fly.  The next interesting thing to note is each digit button will call an add(v) method on click.  The delete button will call a delete() method.  All these variables and methods will be elaborated on next.

If you haven’t done so already, add these additional CSS items to your www/css/style.css file to avoid confusion, since I use them in the code:

Let’s create an unlocking controller in our app.js file like so:

To try to make things easier to understand, I’m going to break up each of the functions in this controller.

The init() method is going to be responsible for resetting the pin code screen.  You might want to make it something like this:

With the controller initialized now we can start adding to the pin, every time a numeric button is pressed.  While input is calculated we will make sure that the pin never exceeds four digits:

I’m purposefully keeping things simple here.  When four digits have been entered, wait 500 milliseconds and then proceed to print a log.  In a more complete scenario you’d want to validate that the pin is correct and maybe redirect somewhere if it is.  I’ll leave that up to your imagination.

When the delete button is pressed, remove the last inserted pin digit.  Simple logic is in place to make sure we don’t delete past zero.

It is important to note that I’ve only set the foundation for creating a pin unlock screen.  It is up to you to use your own imagination for making it completely functional.  For example, you may want to add a toggle in a preference menu to enable or disable pin code unlock.  You may want to add a resume event listener to redirect to the pin unlock screen when the application takes focus.

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.

  • Ross Rawlins

    Can you not run this using the tel input in the native keyboard

    • You probably could, but the way I presented keeps it consistent in appearance across platforms. Like how the Dropbox and WordPress apps do it.

      Regards,

      • Ross Rawlins

        I ended up fiddling with it and what i did was use an invisible input box with a tel type over the four boxes then just bound hte boxes to the inout boxes model length. its much simpler than yours and is still consistent. http://jsfiddle.net/Duovili/y3ysx1aj/ I have created a fiddler for it. Let me know what you think

        • Seems like a valid solution. How does it look on the device?

          Thanks for sharing it 🙂

          • Ross Rawlins

            it looks great and native.

          • Awesome, thanks for sharing!

            You should post a device screenshot to one of these comments 🙂

        • dawesi

          if you lose focus tho, you can’t type anymore… so have to tap it again… seems to work tho, not as pretty.

      • dawesi

        also allows you to randomise the numbers, so pattern is harder to forge from watching #security

  • Nils Frkal

    Really like this post! But somehow the CSS is not working for me. I am using Intel XDK and this is how it looks. So obviously the CSS is not loading. Are there any CSS dependencies/pre-requisites I need to load? Big thanks!

    • I don’t know anything on the Intel XDK. What do your error logs say? Usually when the curly brackets show in the UI you have a typo in your syntax.

      Regards,

      • Nils Frkal

        Thanks Nic! I found the problem. The path to ionic.min.css and ionic.bundle.min.js wasn’t set correctly. After correcting it everything is working fine. Cheers.

  • Kartik

    Hi Nic, How can i make those digits entered invisible like as in password, where the string is not shown?

    • Something like this?

      That would check if the password is a certain length and show an asterisk instead of the digit. Notice I swapped {{passcode.substring(0,1)}} in this case with that ng-if div tag.

      Regards,

      • Kartik

        Thanks Nic. I’ll try and let you know…

  • Kartik

    Could we please have a video recording of this Nic, if it is ok with you?

  • Kartik

    Hi Nic, I’ve been trying to implement a date picker in ionic but I’m getting nowhere close to it. Please help me with a video if possible like you’ve helped me out with others. Thanks in advance

  • Thanks! Work like a charm!

  • brandecho

    Thank you. Anyway you can add how the user can store a 4 digit pin code and rest if necessary?