Ionic Lockscreen 1
Created on Nov 26, 2015


Lockscreen (not login screen) made easy with this plugin. You will have a beautiful and minimal lockscreen out of the box. The use cases might be: lock the access to a particular route or function, lock sensitive information, or typically be the very first screen for your diary/journal/finance app.

It comes as a angularjs service which is dead easy to integrate with your working project.

Support TouchID (iOS)

Tested on iPhone 6s+.


Watch on Youtube

See how it works on Youtube:

Happy prototyping!


Note: All updates are on Ionic 1

Last updated: Jun 17 2017


  • First version


  • Remove constant.DEFAULT_LENGTH, use passcode.length instead


  • Now integrate TouchID on iOS devices that supports


  • Optional back button with custom function


  • Compatible with Ionic CLI ~3.4.0
  • Package with all versions in one


  1. Built-in numpad, consistent look on different the platforms
  2. Vibrate the phone if entering the incorrect passcode
  3. Configurable default length of the passcode
  4. Written as a service
  5. Support TouchID (on supported iOS devices)

Run locally

1.Install Ionic environment

$ npm install -g cordova
$ npm install -g @ionic/cli@6.8.0

2.After purchasing, download the zip file containing the entire demo app and unzip

3.Go inside the extracted folder

4.Install all dependencies

$ npm install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the template


Inside lockscreen.js

Modify the default values

.constant('constant', {
    THEME: 'button-outline button-assertive'

In your controller

.controller('homeCtrl', function($scope, Lockscreen) {
    $scope.state = {
      correctPasscode: '1234',
      useTouchId: false
    $scope.showLockscreen = function() {{
        passcode: $scope.state.correctPasscode, // The correct passcode to pass into lockscreen directive
        useTouchId: $scope.state.useTouchId // default: false
        showBackButton: true, // default: false
        backFunc: function() {
          console.log('Go back to last state or do something');
      }).then(function() {


If you want to integrate this plugin into your project, don't forget these dependencies:

  1. ngCordova $ bower install ngCordova --save
  2. $cordovaVibration $ cordova plugin add cordova-plugin-vibration —save
  3. $cordovaTouchID cordova plugin add —save
  4. CSS file path ./scss/lockscreen.sass
  5. JS file path ./www/js/lockscreen.js

Build with capacitor

First of all, make sure that you can Run Locally (see the instruction above).

# build web asset (to folder www)
$ ionic build

# add platform (ios or android)
$ ionic capacitor add ios

# prepare app icons and splash images
$ npm run resources

# copy web assets into the native project
$ ionic capacitor copy ios

# open Xcode, then build the native app from there
$ ionic capacitor open ios

# OR run in live-reload mode
$ ionic capacitor run ios -l --external

See more:

Ionic - iOS Development

Ionic - Android Development

Migrating a Web App Using Cordova to Capacitor


If you need technical support or have any questions, don't hesitate to send me a message:



[PROMO] Ionic 4 Bundle: 4 in 1 - Best Seller

My best Ionic 4 products (3 themes + 1 plugin) are now on sale with promotion code BUNDLE4. Please click the button below for more information.

Purchase Externally


More Like This