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'
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
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 |
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 |
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)