Biometric authentication has become an essential feature for mobile applications, providing users with a convenient and secure way to access their accounts.

Biometric login offers a seamless and secure user authentication experience, allowing users to access their accounts with fingerprint, face recognition, or device credentials like PIN or pattern. In this blog post, we’ll walk through implementing biometric login in a React Native application using native code and bridging it with React Native application using Android’s BiometricPrompt API.

Why Biometric Authentication?

In today’s digital landscape, security and user experience are paramount. Biometric authentication offers:

Quick and seamless login experience

Enhanced security compared to traditional password methods

Support for multiple authentication types (fingerprint, face recognition, device credentials)

What You’ll Learn

• How to check biometric authentication availability on the device.
• How to implement biometric authentication with fallback to device credentials.
• How to bridge native code with React Native.
• How to use the functionality in your React Native app.

Step 1: Permissions Required for Biometric Authentication

To implement biometric authentication in your React Native app, you need to declare specific permissions in the Android AndroidManifest.xml file. These permissions ensure your app can access and use the device’s biometric features, such as fingerprint or face recognition.

Add the following permissions to your AndroidManifest.xml file:

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

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

Step 2: Checking Biometric Authentication Availability

First, we need to verify whether the device supports biometric authentication or device credentials.

Native Code (Android)

Here’s the native code to check biometric authentication availability using BiometricManager:

@ReactMethod 
public void checkBiometricAuthAvailable(Promise promise) { 
    BiometricManager biometricManager = BiometricManager.from(getReactApplicationContext()); 
 
    int canAuthenticateWithBiometric = biometricManager.canAuthenticate( 
        BiometricManager.Authenticators.BIOMETRIC_STRONG |  
        BiometricManager.Authenticators.BIOMETRIC_WEAK 
    ); 
 
    int canAuthenticateWithCredential = biometricManager.canAuthenticate( 
        BiometricManager.Authenticators.DEVICE_CREDENTIAL 
    ); 
 
    boolean isAuthAvailable = (canAuthenticateWithBiometric == BiometricManager.BIOMETRIC_SUCCESS) ||  
                              (canAuthenticateWithCredential == BiometricManager.BIOMETRIC_SUCCESS); 
 
    promise.resolve(isAuthAvailable); 
}

This method checks if biometric or device credential authentication is supported and returns a boolean value.

Step 3: Implementing Biometric Authentication

Next, we create a method to authenticate users using biometrics. If biometrics aren’t available, we fallback to device credentials (PIN, pattern, etc.).
Native Code (Android)

@ReactMethod 

public void authenticateWithBiometric(Promise promise) { 

    FragmentActivity activity = (FragmentActivity) getCurrentActivity(); 

    if (activity == null) { 

        promise.reject("NO_ACTIVITY", "No activity found"); 

        return; 

    } 

    BiometricManager biometricManager = BiometricManager.from(activity); 

    int canAuthenticateWithBiometric = biometricManager.canAuthenticate( 

        BiometricManager.Authenticators.BIOMETRIC_WEAK 

    ); 

    int canAuthenticateWithDeviceCredential = biometricManager.canAuthenticate( 

        BiometricManager.Authenticators.DEVICE_CREDENTIAL 

    ); 

    if (canAuthenticateWithBiometric != BiometricManager.BIOMETRIC_SUCCESS && 

        canAuthenticateWithDeviceCredential != BiometricManager.BIOMETRIC_SUCCESS) { 

        promise.reject("AUTH_NOT_AVAILABLE", "No authentication methods available"); 

        return; 

    } 

    executor = ContextCompat.getMainExecutor(activity); 

    final int[] attemptCounter = {0}; 

    biometricPrompt = new BiometricPrompt(activity, executor, new BiometricPrompt.AuthenticationCallback() { 

        @Override 

        public void onAuthenticationError(int errorCode, @NonNull CharSequence errString) { 

            promise.reject("AUTH_ERROR", errString.toString()); 

        } 

        @Override 

        public void onAuthenticationSucceeded(@NonNull BiometricPrompt.AuthenticationResult result) { 

            promise.resolve("AUTH_SUCCESS"); 

        } 

        @Override 

        public void onAuthenticationFailed() { 

            attemptCounter[0]++; 

            if (attemptCounter[0] >= 3) { 

                promise.reject("AUTH_FAILED", "Authentication failed after 3 attempts"); 

                biometricPrompt.cancelAuthentication(); 

            } 

        } 

    }); 

    int allowedAuthenticators = (canAuthenticateWithBiometric == BiometricManager.BIOMETRIC_SUCCESS) ? 

        BiometricManager.Authenticators.BIOMETRIC_WEAK | BiometricManager.Authenticators.DEVICE_CREDENTIAL : 

        BiometricManager.Authenticators.DEVICE_CREDENTIAL; 

    try { 

        BiometricPrompt.PromptInfo promptInfo = new BiometricPrompt.PromptInfo.Builder() 

                .setTitle("Unlock to login") 

                .setSubtitle("Just one glance or touch, and you're in!") 

                .setAllowedAuthenticators(allowedAuthenticators) 

                .build(); 

        activity.runOnUiThread(() -> biometricPrompt.authenticate(promptInfo)); 

    } catch (Exception e) { 

        promise.reject("AUTH_ERROR", "Error building prompt: " + e.getMessage()); 

    } 

} 

This method:

Displays the biometric prompt to the user.

Authenticates the user with biometrics or device credentials.

Handles success, error, and failed attempts.

Step 4: Bridging Native Code with React Native

We need to expose the native methods to React Native using a custom native module.

Native Code: NativeBridge

public class NativeBridgePackage implements ReactPackage { 

    @Override 

    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { 

        return Collections.emptyList(); 

    } 

    @Override 

    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { 

        List<NativeModule> modules = new ArrayList<>(); 

        modules.add(new NativeBridge(reactContext)); 

        return modules; 

    } 

} 

 

Register the package in MainApplication.java: 

@Override 

protected List<ReactPackage> getPackages() { 

    List<ReactPackage> packages = new PackageList(this).getPackages(); 

    packages.add(new NativeBridgePackage()); 

    return packages; 

} 
 

Step 5: React Native Integration 

In your React Native app, create utility functions to call the native methods: 

import { NativeModules } from 'react-native'; 

  

export const checkBiometricAuthAvailability = async () => { 

  try { 

    const isAvailable = await NativeModules.NativeBridge.checkBiometricAuthAvailable(); 

    return isAvailable; 

  } catch (error) { 

    return false; 

  } 

}; 

  

export const authenticateWithBiometric = async () => { 

  try { 

    const result = await NativeModules.NativeBridge.authenticateWithBiometric(); 

    return result === 'AUTH_SUCCESS'; 

  } catch (error) { 

    console.log('Authentication Error:', error); 

    return false; 

  } 

}; 

Use these methods to: 

Check if biometric authentication is available. 

Authenticate users when they press the login button. 
Next Steps 

Implement credential storage with proper encryption 

Add support for iOS biometric authentication 

Create comprehensive error handling and user feedback mechanisms 

Happy coding! 🚀🔐 

References: 

• For a deeper dive into the APIs used, check out the official Android BiometricManager documentation. 

Conclusion 

With the implementation above, you’ve added biometric authentication to your React Native app, providing users with a secure and user-friendly login experience. This guide can serve as a template for enhancing the security features of your app. 

Let us know your thoughts or share your challenges in the comments below! 🚀