Learn How To Implement Biometric Authentication Using React Native

Dependencies

rn-local-authentication
react-native-sensitive-info

Implementation approach

There are two libraries for implementing biometric authentication:

rn-local-authentication and react-native-sensitive-info.

rn-local-authentication is used for biometric verification, facial verification or fingerprint verification of the user.

react-native-sensitive-info is used for storing user credentials, in our case username and password. This can also be access_token for API authorization.

The flow of the implementation

• Log in to the user and get a username and password.
• Prompt user to set up biometric authentication.
• Prompt for facial or fingerprint recognition based on the available sensor.
• On successful verification, store the username and password using react-native-sensitive-info.
• Next time the user opens the application, if the biometric authentication is already set up, prompt for biometric verification and get credentials on successful verification.
• Use the credentials to authenticate the user.

Installation

Follow this react-native-local-authentication for installing the biometric verification library.

Follow this react-native-sensitive-info for installing the secured storage library.

Usage

For setup:
1. Import rn-local-authentication as LocalAuthentication & react-native-sensitive-info as RNSInfo

2. Check biometry support and type

const isSupported = await LocalAuthentication.isSupportedAsync();

const getBiometryType = LocalAuthentication.getBiometryType();

3. If biometry is supporting prompt users for biometric verification

const success = await LocalAuthentication.authenticateAsync(config);

4. On success store the user credentials or access_token received

RNSInfo.setItem("@userInfo", userInfo, {

       sharedPreferencesName:”SharedPreference_Name,

       keychainService:”Keychain_Name”,

     });

For login:

1. Check if biometry has already been set up by checking for data stored in a secured storage

2. If already set up, prompt biometric verification and get user info from secured storage on success.

RNSInfo.getItem("@userInfo", userInfo, {

       sharedPreferencesName:”SharedPreference_Name,

       keychainService:”Keychain_Name”,

     });

3. On getting the user info log in the using the credentials