react-native-biometry-module

A UI library support biometry authentication with passcode fallback for React Native

Installation

yarn add git+https://github.com/dangttp97/rn-biometry-module 

Example

import {Biometry, ScreenType} from 'react-native-biometry-module'

/*
Your render method
*/

return <Biometry type={ScreenType.select} biometryEnabled />

Enumerations

ScreenType

Type of screen to show. Includes:

• select Set passcode screen.
• input Input passcode screen.
• changePasscode Change passcode screen.

Props

• Generals

|Key |Type |Default |Description | |----------------------------------|------------------------------------------------------|---------|------------------------------------------------------------------------------| |type |ScreenType | |Type of screen to display | |numberOfAttempts |number undefined |3 |Number of max attempts before screen is locked | |lockedTime |number undefined |300000 |Locked time in millisecond before screen unlocked. | |alphabetCharsVisible |boolean undefined |false |Is alphabet characters show below numeric char in keypad | |biometryEnabled |boolean | |Is using biometry for authenticate user | |passcodeVisible |boolean undefined |false |Is passcode input visible | |timePasscodeLockedAsyncStorageName|string undefined |undefined|Locked time AsyncStorage save key | |passcodeKeychainName |string undefined |undefined|Key for saving passcode to keychain system | |passcodeAttemptsAsyncStorageName |string undefined |undefined|Key for saving number of failed attempts in AsyncStorage | |onSuccess |(passcode: string) => void undefined |undefined|Handler for confirm passcode success, input passcode success, biometry success| |onFailed |(error?: any) => void undefined |undefined|Handler for confirm failed, input passcode failed, biometry failed | |passcodeSelectTitle |string undefined |undefined|Title for select passcode screen | |passcodeSelectSubtitle |string undefined |undefined|Subtitle for select passcode screen | |passcodeSelectErrorTitle |string undefined |undefined|Title for select passcode screen when error | |passcodeSelectErrorSubtitle |string undefined |undefined|Subtitle for select passcode screen when error | |passcodeConfirmTitle |string undefined |undefined|Title for confirm passcode screen | |passcodeConfirmSubtitle |string undefined |undefined|Subtitle for confirm passcode screen | |passcodeConfirmErrorTitle |string undefined |undefined|Title for confirm passcode screen when error | |passcodeConfirmErrorSubtitle |string undefined |undefined|Subtitle for confirm passcode screen when error | |passcodeInputTitle |string undefined |undefined|Title for input passcode screen | |passcodeInputSubtitle |string undefined |undefined|Subtitle for input passcode screen | |passcodeInputErrorTitle |string undefined |undefined|Title for input passcode screen when error | |passcodeInputErrorSubtitle |string undefined |undefined|Subtitle for input passcode screen when error | |lockedTitle |string undefined |undefined|Title for locked screen | |lockedSubtitle |(timer: number) => string undefined |undefined|Subtitle with remain locked time for locked screen |

• Custom components

|Key |Type |Default |Description | |------------------|-------------------------------------------------------------------------------------------------|---------|---------------------------------------------------------| |deleteButtonIcon |JSX.Element undefined |undefined|Set icon for delete button keypad | |biometryButtonIcon|JSX.Element undefined |undefined|Set icon for biometry trigger keypad (bottom left button)| |lockedButton |JSX.Element undefined |undefined|Locked page button | |lockedPage |JSX.Element undefined |undefined|Custom locked page | |bottomLeftButton |JSX.Element undefined |undefined|Custom bottom left button (biometry trigger button) | |deleteButton |(handler: () => void) => JSX.Element undefined |undefined|Custom delete button keypad with handler method in module| |keypadButton |(index: number, handler: (buttonIndex: string) => void) => JSX.Element undefined|undefined|Custom keypad button with handler and button index |

• Styles

|Key |Type |Default |Description | |----------------------------------|-----------------------------------------------|---------|--------------------------------------------------| |styleLockedContainer |StyleProp<ViewStyle> undefined|undefined|Style of locked screen's container | |styleLockedTextContainer |StyleProp<ViewStyle> undefined|undefined|Style of locked screen text container | |styleLockedTitle |StyleProp<TextStyle> undefined|undefined|Style of locked screen's container | |styleLockedSubtitle |StyleProp<TextStyle> undefined|undefined|Style of locked screen's container | |styleLockedTimerContainer |StyleProp<ViewStyle> undefined|undefined|Style of locked screen's timer container | |styleLockedTimerText |StyleProp<TextStyle> undefined|undefined|Style of locked screen's timer text | |styleLockedIconContainer |StyleProp<ViewStyle> undefined|undefined|Style of locked screen's center icon container | |stylePasscodeContainer |StyleProp<ViewStyle> undefined|undefined|Style of passcode container | |stylePasscodeTitle |StyleProp<TextStyle> undefined|undefined|Style of passcode title | |stylePasscodeSubtitle |StyleProp<TextStyle> undefined|undefined|Style of passcode subtitle | |stylePasscodeHidden |StyleProp<ViewStyle> undefined|undefined|Style of passcode indicator when hidden | |stylePasscodeText |StyleProp<TextStyle> undefined|undefined|Style of passcode indicator when show text | |styleKeypadAlphabetCharHighlighted|StyleProp<TextStyle> undefined|undefined|Style of alphabet chars when keypad pressed | |styleKeypadNumberCharHighlighted |StyleProp<TextStyle> undefined|undefined|Style of numeric chars when keypad pressed | |styleKeypadAlphabetCharNormal |StyleProp<TextStyle> undefined|undefined|Style of alphabet chars when keypad normal | |styleKeypadNumberCharNormal |StyleProp<TextStyle> undefined|undefined|Style of numeric chars when keypad normal |

Helper functions

async hasUserSetPasscode(serviceName?: string) => Promise<boolean>

Returns a promise contains if passcode had been set or not

async deleteUserPasscode(serviceName?: string) => Promise<void>

Delete keychain stored passcode if existed

async resetPasscodeInternalStates = (passcodeAttempsStorageName?: string, timePasscodeLockedStorageName?: string) => Promise<void>

Reset all app internal state (time countdown for lock screen, number of fail attempts)