IPhonePasscode.js

IPhonePasscode creates very easily a highly customizable and functional copy of the IPhone pin passcode.
Use the main import for standard js, or import from dist/react for the included React component.

Security note

Don't use this on anything big unless:
Passcode is 12+ digits long.
If passcode is 12- digits - leave md5passcode empty and either limit requests or use csrf token

Installation

Install from the command line:

$ npm install @kezoponk/iphonepasscode

Install via package.json:

"@kezoponk/iphonepasscode": "1.1.1" 

Usage

MD5 hash your passcode: md5hashgenerator.com
A back-end is required to validate the passcode, see examples bellow.

Option / Prop	Description
md5passcode	Leave empty if you wish to validate pin only in the specified redirect url - safer
redirect Required	Redirect if passcode is correct, or on each full length when md5passcode is empty. md5 passcode is sent in query param pass Works with custom parameters!
length Required	Length of passcode
title	Text appearing above passcode pins Default: "Enter Passcode"

CSS classes for customization
ipasscode__press-animation
ipasscode__button
ipasscode__button-big-number
ipasscode__button-small-letters
ipasscode__title
ipasscode__pinsdiv
ipasscode__pins

Use !important if nothing changes

Example with standard JS and PHP backend

<div id="iphonePasscode" />

new IPhonePasscode(
  document.getElementById('iphonePasscode'), {
    md5passcode: 'ec6a6536ca304edf844d1d248a4f08dc',
    length: '4',
    redirect: 'keychain.php'
  }
);

if($_GET['pass'] == md5('1234')) {
  session_start();
  $_SESSION['keychain'] = True;
  header('location: ../index.html');
}

• Passcode is 1234
• PHP used for back-end with a keychain session variable

Example with React

<IPhonePasscode length={4} title="Enter Passcode To Login" redirect="/checkpasscode">

• Passcode not exposed on client side, causing it reload page on each try