Learn How To Implement Biometric Authentication Using React Native

Since the manufacturers have started installing the necessary hardware, Biometric Authentication could be considered important and must have features to secure our mobile applications. Biometric verification helps eliminate the hassle of entering security credentials and patterns while adding a layer of security. So to achieve the same, we will look into how to implement biometric authentication in react-native.

Read more about react native.

What Is Biometric Authentication?

Biometric authentication is the process of confirming an individual’s identity based on physical and behavioral characteristics. This can take the form of an individual’s fingerprint, voice, or other biological characteristics that can be measured to assess specific data points. In our case, smartphones.

Different Types Of Biometric Authentication

As of today, we have 2 implementations of biometric verification:

  • Facial recognition
  • Fingerprint recognition

Check Out What It Takes To Build A Successful App Here

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

Step Into the Hyper Growth Path With Our Top React Native Developers.

coma

Conclusion

This article describes the basic idea of how to implement biometric authentication in our react native application. It might be helpful for react native developers to start with biometric authentication in react native. Aside from usual biometric verification, the rn-local-authentication also supports fallback to passcode, which becomes useful in scenarios where biometry sensors are not usable.

Keep Reading

Keep Reading

  • Service
  • Career
  • Let's create something together!

  • We’re looking for the best. Are you in?