How to Implement Biometric and Face ID Authentication in React Native (Android & iOS)

TL;DR:

• Learn how to integrate biometric and Face ID authentication in React Native apps for Android and iOS.
  
• Use popular libraries like react-native-biometrics and react-native-keychain for secure authentication.
  
• Follow step-by-step setup for both Android and iOS platforms.
  
• Implement best practices for data security and user experience.
  
• Explore advanced use cases like secure token storage for persistent logins.

Introduction: 

As mobile apps increasingly handle sensitive data, implementing strong authentication methods is crucial. Biometric technologies like fingerprint and Face ID provide a secure yet user-friendly alternative to traditional passwords, enhancing both security and user experience.

For developers looking to integrate biometric authentication into their React Native apps, choosing the right approach is essential. Building a full-scale biometric access control system can significantly improve your app’s security. You can explore a detailed Biometric Access Control Integration Guide to understand the underlying technologies and best practices.

Additionally, if you’re working on a React Native project, leveraging the platform’s capabilities effectively can enhance both performance and user satisfaction. Our team specializes in building high-performance React Native apps that deliver seamless user experiences. Learn more about our React Native App Development Services and see how we can support your next project.

This blog explores how to enable biometric authentication using industry-standard libraries while addressing platform-specific requirements and best practices.

Why Use Biometric and Face ID Authentication?

Implementing biometric and Face ID authentication in React Native with Android and iOS provides numerous benefits:

• Improved security over PINs and passwords
  
• Faster user login and reduced friction
  
• Native OS support for secure biometric handling
  
• Better user retention through ease of use
  

These factors make it a popular choice for modern app developers.

Choosing the Right Library

Two popular libraries for biometric authentication in React Native are:

1. react-native-biometrics: Supports both Face ID and fingerprint.
   
2. react-native-keychain: Provides secure credential storage and can be combined with biometrics.

Both support Android and iOS and are actively maintained. We’ll use react-native-biometrics in this guide.

Installation and Setup

Step 1: Install the Library

npm install react-native-biometrics
npx pod-install

Step 2: Android Configuration

In android/app/src/main/AndroidManifest.xml, add:

<uses-permission android:name=”android.permission.USE_BIOMETRIC” />

<uses-permission android:name="android.permission.USE_BIOMETRIC" />
<uses-permission android:name="android.permission.USE_FINGERPRINT" />

Ensure the minimum SDK version is 23 or higher in android/build.gradle:
minSdkVersion = 23

Step 3: iOS Configuration

In Info.plist, add:

<key>NSFaceIDUsageDescription</key>

<string>We use Face ID to secure your account</string>

Also, ensure biometric capabilities are enabled in the iOS project settings (Face ID, Touch ID).

Implementing Biometric Authentication

Check Biometric Availability

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');
    }
  });

Authenticate User

rnBiometrics.simplePrompt({ promptMessage: 'Confirm your identity' })

  .then(resultObject => {

    const { success } = resultObject;

    if (success) {

      console.log('User authenticated');

    } else {

      console.log('User cancelled biometric prompt');

    }

  })

  .catch(() => {

    console.log('Biometrics failed');

  });

Best Practices for Biometric Authentication

Implementing biometric and Face ID authentication in React Native with Android and iOS should follow these best practices:

• Always offer a fallback (PIN/password login)
  
• Avoid storing sensitive data in plaintext
  
• Inform users how biometrics will be used
  
• Do not initiate biometric prompts without user action
  

This ensures both compliance and a good user experience.

Advanced Use Case: Secure Biometric Login

For persistent logins using biometric authentication:

• Use react-native-keychain to store encrypted tokens
  
• Use biometric prompt to unlock the token during subsequent logins
  

Example:

import * as Keychain from 'react-native-keychain';

await Keychain.setGenericPassword('username', 'token', {

  accessControl: Keychain.ACCESS_CONTROL.BIOMETRY_CURRENT_SET,

});

const credentials = await Keychain.getGenericPassword();

if (credentials) {

  console.log('Token unlocked:', credentials.password);

}

Conclusion:

Implementing biometric and Face ID authentication in React Native with Android and iOS is a powerful step towards building secure, user-friendly mobile applications. By leveraging libraries like react-native-biometrics and react-native-keychain, developers can quickly integrate platform-native authentication mechanisms. This approach not only enhances security but also provides a seamless, convenient user experience.

For businesses looking to build robust, secure apps, working with experienced developers is crucial. If you need expert support, consider partnering with a team that specializes in this field. You can hire React Native developers to streamline your project and ensure best-in-class app security.

By following best practices and ensuring fallbacks are in place, you can deliver both security and convenience to your users, creating a trustworthy digital experience.

FAQs

Q1: Is Face ID available on all iOS devices?
No, Face ID is only available on certain iPhone and iPad models. Devices without Face ID typically support Touch ID instead.

Q2: Can I use biometric authentication without an internet connection?
Yes, biometric authentication works offline since it is handled by the device’s secure hardware.

Q3: Is it mandatory to use fallback authentication?
Yes, for accessibility and inclusivity, always provide a fallback method such as password or PIN.

Q4: Is biometric data stored on the device or the cloud?
Biometric data is stored securely on the device and is never exposed to the app or uploaded to the cloud.

Q5: What if the device has no biometric sensor?
Always check sensor availability and fallback gracefully to password-based login if biometrics are not available.

React Native

Yash Nayi

Software Engineer