How can you integrate biometric authentication in a mobile application using React Native?

In an era where technology advances at a breakneck speed, ensuring the security of your mobile applications is more critical than ever. Biometric authentication has emerged as a reliable and user-friendly method for safeguarding app users’ data. By leveraging unique human characteristics like fingerprints or facial features, it provides an extra layer of security that’s hard to breach.

If you’re a developer working with React Native, integrating biometric authentication into your app might seem like a complicated task. This guide will walk you through the process using the modern react-native-biometrics library.

Setting Up Your Environment

First, you need to install the necessary package. We recommend react-native-biometrics as it supports FaceID, TouchID, and Android Biometrics with cryptography support.

npm install react-native-biometrics --save

For iOS, don't forget to update your Info.plist with the NSFaceIDUsageDescription key to explain why your app needs biometric access.

<key>NSFaceIDUsageDescription</key>
<string>$(PRODUCT_NAME) requires FaceID access to allow you to quick and secure log in.</string>

Checking Support

Before prompting the user, you must check if the hardware is available and if the user has enrolled their biometrics.

import ReactNativeBiometrics from 'react-native-biometrics';

const rnBiometrics = new ReactNativeBiometrics();

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

    if (available && biometryType === ReactNativeBiometrics.TouchID) {
      console.log('TouchID is supported');
    } else if (available && biometryType === ReactNativeBiometrics.FaceID) {
      console.log('FaceID is supported');
    } else if (available && biometryType === ReactNativeBiometrics.Biometrics) {
      console.log('Biometrics is supported');
    } else {
      console.log('Biometrics not supported');
    }
  });

Simple Authentication

If you just need a simple "Yes/No" check to unlock a feature, use the simplePrompt method:

rnBiometrics.simplePrompt({ promptMessage: 'Confirm fingerprint' })
  .then((resultObject) => {
    const { success } = resultObject;

    if (success) {
      console.log('Successful biometrics provided');
    } else {
      console.log('User cancelled biometric prompt');
    }
  })
  .catch(() => {
    console.log('Biometrics failed');
  });

Managing Private Keys (Advanced Security)

For high-security apps (like banking), you should use cryptographic signatures. This ensures that the authentication cannot be bypassed by a rooted device.

rnBiometrics.createKeys()
  .then((resultObject) => {
    const { publicKey } = resultObject;
    console.log('Public Key:', publicKey);
    // Send this public key to your server to bind it to the user account
  });

To authenticate later, you ask the device to sign a payload (a "challenge" from your server) using the private key stored in the Secure Enclave:

let epochTime = Math.round(new Date().getTime() / 1000).toString();
let payload = epochTime + 'some_server_challenge';

rnBiometrics.createSignature({
    promptMessage: 'Sign in',
    payload: payload
  })
  .then((resultObject) => {
    const { success, signature } = resultObject;

    if (success) {
      console.log('Signature created:', signature);
      // Send signature to server to verify
    }
  });

Conclusion

Implementing biometric authentication in React Native is no longer a daunting task. By using react-native-biometrics, you gain access to both simple convenience checks and robust cryptographic security. Remember, the goal is to balance a seamless user experience with the highest standards of data protection.