Implementing Face ID and Touch ID Authentication in React Native

Introduction

In the ever-evolving world of mobile technology, security is paramount. With the advent of biometric authentication methods like Face ID and Touch ID, users can enjoy a seamless and secure way to access their devices and applications. In this tutorial, we will explore how to implement Face ID and Touch ID authentication in a React Native application using the react-native-touch-id library.

Prerequisites

Before we dive into the implementation, make sure you have the following prerequisites installed:

• Node.js and npm (Node Package Manager)
• React Native development environment set up
• An existing React Native project

Installing react-native-touch-id

To get started, you need to install the react-native-touch-id library. Open your terminal or command prompt and navigate to your React Native project directory. Run the following command:

npm install react-native-touch-id --save 

or

yarn add react-native-touch-id

In React Native 0.60 and higher, linking is automatic. So you don’t need to runreact-native link.

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

Permissions

After the installation is done, we should need to add the app permissions to both Android and iOS.

In theAndroidManifest.xml, add this permission:

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

In theInfo.plist add this key and string:

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

Implementing Face ID and Touch ID Authentication

Now that you have installed the required library, let’s implement Face ID and Touch ID authentication in your React Native application.

1. Import the Library:

In your component file, import the react-native-touch-id library.

import TouchID from 'react-native-touch-id';

2. Check biometric support:

Before authenticating the user, check if the device supports biometric authentication.

 useEffect(() => {
   
      const username = storage.getString('username')
const UUID = storage.getString('UUID')
      if (UUID && username)
        TouchID.isSupported(optionalConfigObject)
          .then(biometryType => {
            console.log(biometryType);

            // Success code
            if (biometryType === 'FaceID') {
              setBiometryType('FaceID');
            } else {
              setBiometryType('TouchID');
            }
          })
          .catch(error => {
            // Failure code
            console.log(error);
          });
    
  }, []);

useEffect(() => {
    if (biometryType === 'FaceID' || biometryType === 'TouchID') {
      authenticate()
    }
  }, [biometryType]);

Authenticate User:

To authenticate the user, use the TouchID.authenticate method. This method will show the Face ID or Touch ID prompt to the user for authentication.

const authenticate = () => {
    const optionalConfigObject = {
      title: 'App Name',
      imageColor: '#B69377', // Android
      imageErrorColor: '#B69377',// Android
      sensorDescription: 'Touch sensor', // Android
      sensorErrorDescription: 'Failed', // Android
      cancelText: 'Cancel', // Android
      fallbackLabel: 'Show Passcode', // iOS (if empty, then label is hidden)
      unifiedErrors: false, // use unified error messages (default false)
passcodeFallback: true; // iOS: allows the device to fall back to using the passcode if faceid or touch is not available. This does not mean that if touchid or faceid fails the first few times, it will revert to a passcode; rather, if the former are not enrolled, then it will use the passcode.
    };
    TouchID.authenticate('App Name Require TouchID for Verification ', optionalConfigObject)
      .then((success: any) => {
        if (success) {
          onLoginwithFingerprint() /// login with logic
        }

      })
      .catch((error: any) => {

      });
  };

Customize the authentication prompt message to provide clear instructions to the user.

Conclusion

In this tutorial, we explored how to implement Face ID and Touch ID authentication in a React Native application using the react-native-touch-id library. By incorporating biometric authentication methods, you can enhance the security and user experience of your mobile app.

Biometric authentication not only adds an extra layer of security but also provides a convenient and seamless way for users to access your application. Implementing this feature in your React Native projects can significantly improve user satisfaction and trust in your app.

Feel free to experiment further with thereact-native-touch-id library and explore additional customization options to tailor the authentication experience according to your app's requirements.