Unlock the Power of Biometric Authentication in Your React Native App

What is Biometric Authentication?

Biometric authentication is a cutting-edge security measure that uses unique biological traits, such as facial recognition, fingerprints, and voice recognition, to protect sensitive information and assets. This innovative technology is rapidly becoming an essential component of mobile apps, offering an additional layer of security alongside traditional sign-in methods.

Implementing Biometric Authentication in Your Expo App

To get started with biometric authentication in your Expo app, you’ll need to install the expo-local-authentication library. This powerful tool allows you to access device hardware, ensuring that private information remains secure.

npm install expo-local-authentication

Checking Device Compatibility and Biometric Records

Before implementing biometric authentication, it’s essential to check whether the device supports biometrics and if biometric records are available. The hasHardwareAsync method returns a promise that resolves to a boolean value, indicating whether the device supports biometrics. If not, you can fall back to alternative authentication methods.

import { LocalAuthentication } from 'expo-local-authentication';

const isHardwareAvailable = await LocalAuthentication.hasHardwareAsync();
if (!isHardwareAvailable) {
  // Fall back to alternative authentication methods
}

How Biometric Authentication Works

The LocalAuthentication.authenticateAsync method is used to authenticate users via fingerprint scan or face ID. This method returns a promise that resolves to an object containing a success boolean value. You can customize the authentication experience by using options such as promptMessage, cancelLabel, disableDeviceFallback, and fallbackLabel.

import { LocalAuthentication } from 'expo-local-authentication';

const authResult = await LocalAuthentication.authenticateAsync({
  promptMessage: 'Scan your fingerprint or face',
  cancelLabel: 'Cancel',
  disableDeviceFallback: true,
  fallbackLabel: 'Fallback to password',
});

if (authResult.success) {
  // Authentication successful
} else {
  // Authentication failed
}

Permissions and Configuration

On Android devices, permissions are automatically added. On iOS, you’ll need to add NSFaceIDUsageDescription to your app.json file. This message informs users why your app is requesting face ID access.

{
  "expo": {
   ...
    "ios": {
      "infoPlist": {
        "NSFaceIDUsageDescription": "Your app needs access to Face ID for secure authentication."
      }
    }
  }
}

Implementing Biometric Authentication in React Native

To use biometric authentication in a bare-bones React Native app, you’ll need to install react-native-unimodules. This enables you to use Expo modules in your React Native app. Once installed, you can implement local authentication using the same methods as in Expo.

npm install react-native-unimodules

Using react-native-biometrics

react-native-biometrics is a more secure way of handling biometric authentication, using both event- and result-based methods. This library retrieves a cryptographic key upon successful authentication, which can be sent to the server for verification.

npm install react-native-biometrics

Integrating react-native-biometrics into Your App

To integrate react-native-biometrics into your app, install the library and import it into your JavaScript or TypeScript file. You can then use methods such as isSensorAvailable() and simplePrompt() to detect biometric support and authenticate users.

import { Biometrics } from 'eact-native-biometrics';

const isBiometricAvailable = await Biometrics.isSensorAvailable();
if (isBiometricAvailable) {
  const authResult = await Biometrics.simplePrompt({
    promptMessage: 'Scan your fingerprint or face',
    cancelLabel: 'Cancel',
  });

  if (authResult.success) {
    // Authentication successful
  } else {
    // Authentication failed
  }
}