By Vishal Basumatary in javascript — Mar 25, 2023

react native biometrics sign in

In today's fast-paced world, security is an essential component of any application. Biometrics has become a popular method of authentication and authorization in recent years. React Native, a popular framework for building cross-platform mobile applications, allows developers to implement biometric sign-in functionality easily.

The React Native community has developed several libraries that make it easy to implement biometric sign-in functionality. Here are a few popular ones:

In this example, we will use the react-native-biometrics library to implement biometric sign-in.

Step 1: Install the Library

To install the react-native-biometrics library, run the following command:

npm install react-native-biometrics --save

Step 2: Import the Library

In your React Native project, import the react-native-biometrics library as follows:

import Biometrics from 'react-native-biometrics';

Step 3: Check if Biometric Authentication is Available

Before you implement biometric sign-in, you need to check if the device supports biometric authentication. You can do this by calling the isSensorAvailable() method:

Biometrics.isSensorAvailable()
    .then((resultObject) => {
        const { available, biometryType } = resultObject;

        if (available && biometryType === 'TouchID') {
            // Biometric authentication is available
        } else {
            // Biometric authentication is not available
        }
    });

The isSensorAvailable() method returns a promise that resolves to an object with two properties - available and biometryType. If biometric authentication is available, the available property will be true, and the biometryType property will be either 'TouchID' or 'FaceID', depending on the device.

Step 4: Request Biometric Authentication

If biometric authentication is available, you can request it by calling the authenticate() method:

Biometrics.authenticate('Authenticate to access your account')
    .then((resultObject) => {
        const { success } = resultObject;

        if (success) {
            // Biometric authentication was successful
        } else {
            // Biometric authentication failed
        }
    });

The authenticate() method takes a string parameter that will be displayed to the user on the biometric authentication prompt. It returns a promise that resolves to an object with a success property. If biometric authentication is successful, the success property will be true, and if it fails, it will be false.

Conclusion

Implementing biometric sign-in functionality in your React Native application is easy with the help of libraries such as react-native-biometrics. By following the steps outlined above, you can provide your users with a convenient and secure way to access their accounts.