Integrating Biometric Authentication in React Native (Face ID & Fingerprint)

Biometric authentication has become a standard expectation in modern mobile apps. Users prefer unlocking apps with Face ID or fingerprint instead of entering passwords repeatedly.

Recently, I implemented biometric authentication in a React Native production app, and I want to share the practical approach, challenges, and things to watch out for.

Why Biometrics?

We needed:

• Faster login experience
• Reduced password fatigue
• Improved security layer
• Seamless re-authentication for sensitive actions

Instead of building custom native modules, I used a stable community package:

react-native-biometrics        

It works well for both Android (Fingerprint) and iOS (Face ID / Touch ID).

Setup & Installation

Install:

npm install react-native-biometrics        

For iOS:

• Add NSFaceIDUsageDescription in Info.plist

Example:

<key>NSFaceIDUsageDescription</key>
<string>We use Face ID to securely authenticate you.</string>        

For Android Make sure:

• minSdkVersion >= 23
• Biometric permissions are properly configured

Basic Implementation

First, check if biometrics are available on the device:

import ReactNativeBiometrics from 'react-native-biometrics';

const rnBiometrics = new ReactNativeBiometrics();

const checkBiometricSupport = async () => {
  const { available, biometryType } = await rnBiometrics.isSensorAvailable();
  if (available) {
    console.log('Biometric supported:', biometryType);
  } else {
    console.log('Biometric not available');
  }
};        

Then trigger authentication:

const authenticateUser = async () => {
  const { success } = await rnBiometrics.simplePrompt({
    promptMessage: 'Authenticate to continue',
  });
  if (success) {
    console.log('Authenticated successfully');
  } else {
    console.log('Authentication failed');
  }
};        

Important Architectural Decision

One key question was: Should biometrics replace password completely?

Answer: No.

Biometrics should act as a convenience layer, not the primary authentication source.

The correct flow we implemented:

1. User logs in with credentials (server validation)
2. Server issues access + refresh tokens
3. User enables biometric
4. Tokens stored securely (Keychain / Keystore)
5. Biometric unlocks access to stored tokens

Never store passwords locally.

Storing Tokens Securely

For secure storage, I used:

react-native-keychain        

Example:

import * as Keychain from 'react-native-keychain';
await Keychain.setGenericPassword('token', accessToken);        

This ensures:

• Data is encrypted
• Protected by OS-level security
• Linked to biometric hardware

Real Challenges Faced

1️⃣ Handling App Reinstalls

On Android, especially, uninstalling the app clears keystore data. So biometric tokens become invalid.

Solution:

• Force login again after reinstall
• Detect missing credentials gracefully

2️⃣ Biometric Enrollment Changes

If user:

• Adds a new fingerprint
• Resets Face ID

Biometric authentication may fail.

Solution:

• Handle error states properly
• Fallback to password login

3️⃣ Android Fragment Activity Issues

Some older Android devices caused biometric prompt crashes due to activity context issues.

Fix: Ensure your MainActivity extends ReactActivity properly and dependencies are up to date.

4️⃣ UX Considerations

Don’t:

• Force biometric immediately on app open

Do:

• Allow the user to enable/disable it from settings
• Show a clear fallback option (“Use Password Instead”)

Security Considerations

Biometric only verifies device ownership — not user identity from a backend perspective.

So:

• Always validate tokens server-side
• Implement token expiration
• Use the refresh token mechanism
• Consider device binding if the app is highly sensitive

Production Learnings

What worked well:

• Users preferred biometric over OTP
• Reduced login friction significantly
• Improved retention in repeat sessions

What I would improve next time:

• Add device integrity check (root/jailbreak detection)
• Combine biometrics with a session timeout strategy
• Implement step-up authentication for sensitive actions

Final Thoughts

Biometric integration in React Native is not complicated technically.

The real work is in:

• Designing the authentication flow properly
• Handling edge cases
• Ensuring secure storage
• Providing fallback mechanisms

If implemented correctly, it significantly improves both security and user experience.

If you’re working on secure mobile systems or real-time applications, I’d love to hear how you’re handling authentication in your apps.