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/page - safer | | length Required |Length of passcode | | redirect Required |Back-end file or directory to redirect if passcode is right. Works with custom parameters! | | 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