How to Use Biometrics in React Native Apps Easily

To use biometrics in React Native, install the react-native-biometrics library and call its methods to check availability and prompt biometric authentication. This lets you securely authenticate users with fingerprint or face recognition using simple async functions.

Syntax

The main steps to use biometrics in React Native are:

• Import ReactNativeBiometrics from the library.
• Create an instance with new ReactNativeBiometrics().
• Use isSensorAvailable() to check if biometrics are supported.
• Call simplePrompt() to show the biometric prompt and get the result.

javascript

import ReactNativeBiometrics from 'react-native-biometrics';

const rnBiometrics = new ReactNativeBiometrics();

async function checkBiometrics() {
  const { available, biometryType } = await rnBiometrics.isSensorAvailable();
  if (available && biometryType) {
    const { success } = await rnBiometrics.simplePrompt({ promptMessage: 'Confirm your identity' });
    if (success) {
      // Authentication successful
    } else {
      // Authentication failed or cancelled
    }
  } else {
    // Biometrics not supported
  }
}

Example

This example shows a React Native component that checks for biometric support and prompts the user to authenticate. It displays messages based on the result.

javascript

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import ReactNativeBiometrics from 'react-native-biometrics';

const rnBiometrics = new ReactNativeBiometrics();

export default function BiometricAuth() {
  const [message, setMessage] = useState('Press the button to authenticate');

  const authenticate = async () => {
    const { available, biometryType } = await rnBiometrics.isSensorAvailable();
    if (!available) {
      setMessage('Biometrics not supported on this device');
      return;
    }

    try {
      const { success } = await rnBiometrics.simplePrompt({ promptMessage: 'Authenticate' });
      if (success) {
        setMessage('Authentication successful!');
      } else {
        setMessage('Authentication cancelled or failed');
      }
    } catch (e) {
      setMessage('Authentication error: ' + e.message);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{message}</Text>
      <Button title="Authenticate" onPress={authenticate} />
    </View>
  );
}

Output

UI with a message text and a button labeled 'Authenticate'. When pressed, it shows biometric prompt. On success, message changes to 'Authentication successful!'. On failure or cancel, message updates accordingly.

Common Pitfalls

• Not checking isSensorAvailable() before prompting biometrics causes errors on unsupported devices.
• Ignoring user cancellation of the biometric prompt leads to confusing UX.
• Not handling exceptions from simplePrompt() can crash the app.
• Forgetting to link native modules or run pod install on iOS breaks the biometric functionality.

javascript

/* Wrong way: skipping availability check */
const { success } = await rnBiometrics.simplePrompt({ promptMessage: 'Auth' });
if (success) {
  // proceed
}

/* Right way: check first */
const { available } = await rnBiometrics.isSensorAvailable();
if (available) {
  const { success } = await rnBiometrics.simplePrompt({ promptMessage: 'Auth' });
  if (success) {
    // proceed
  }
}

Quick Reference

Key methods of react-native-biometrics:

• isSensorAvailable(): Checks if biometrics are supported and returns type.
• simplePrompt(options): Shows biometric prompt with a message.
• createKeys(): Generates biometric keys for cryptographic use.
• deleteKeys(): Deletes biometric keys.

Always handle user cancellation and errors gracefully.

Key Takeaways

Always check biometric availability with isSensorAvailable() before prompting.

Use simplePrompt() to show the biometric authentication dialog to the user.

Handle user cancellation and errors to avoid app crashes.

Link native modules and run pod install on iOS after installing the library.

Biometric authentication improves security and user experience in your app.