Expo Local Authentication — Face ID and Touch ID

A great package to enable FaceID and TouchID authentication is expo-local-authentication. This package also works for ejected react-native projects (bare react-native projects).

LocalAuthentication - Expo Documentation

Installation

expo install expo-local-authentication

In your /ios directory, run pod-install

And in your root directory, run npx react-native link expo-local-authentication

These two commands should automatically install the necessary dependencies and update the required files.

Usage

Usually, an onPress event triggers enables biometric. So we can attach an event handler function that will check for the following:

1. Hardware Compatibility
2. Biometric Enrollment Availability
3. Authentication

To start, I created a function in a utilities /utils folder, in the directory of my react-native project.

import { 
   hasHardwareAsync,
   isEnrolledAsync,
   authenticateAsync 
} from 'expo-local-authentication';
const biometricsAuth = async () => {
// Starter function
}
export default biometricsAuth

1. Hardware Compatibility

We need to determine what type of biometric scanner is available on the device. If no biometric scanner is available, then throw an error (remember to handle this error accordingly in the front-end component).

const compatible = await hasHardwareAsync()
if (!compatible) throw 'This device is not compatible for biometric authentication'

2. Biometric Enrollment Availability

Determine if biometric data is on the device. Although a user may have biometric authentication available, that doesn’t necessarily mean a user is enrolled. Therefore, biometric data may not necessarily be available on the user's device. We have to verify that data exists.

An important note (if you’re working in an expo environment), to use biometric authentication via FaceID on IOS devices, you must supply infoPlist.NSFaceIDUsageDescription to app.json

const enrolled = await isEnrolledAsync()
if (!enrolled) throw 'This device doesn't have biometric authentication enabled`

3. Authentication

The last step is to authenticate the user using whatever biometric data that is available. The authenticateAsync method returns an object containing success and error. Success is a boolean indicating if the authentication was successful, and the error key contains an error code.

There are a few options you can pass into this method, such as a promptMessage, cancelLabel, fallbackLabel. All these methods are ways of customizing the alerts shown on the device.

A really important option is disableDeviceFallback This option allows us to disable the default fallback option. The default fallback option, which is the device's passcode, is used when the user fails to authenticate. However, if you want to use an alternative fallback method, feel free to disable the default device fallback. This option, by default, is false.

const result = await authenticateAsync()
if (!result.success) throw `${result.error} - Authentication unsuccessful`
return

Final Results

And voila, here is your compact code for dealing with biometric authentication.

import { 
   hasHardwareAsync,
   isEnrolledAsync,
   authenticateAsync 
} from 'expo-local-authentication';
const biometricsAuth = async () => {
    const compatible = await hasHardwareAsync()
    if (!compatible) throw 'This device is not compatible for biometric authentication'
    const enrolled = await isEnrolledAsync()
    if (!enrolled) throw 'This device doesn't have biometric authentication enabled`
    const result = await authenticateAsync()
    if (!result.success) throw `${result.error} - Authentication unsuccessful`
    return
}
export default biometricsAuth

Add a button and use this method in the onPress event within the component that’s handling biometric authentication.

I hope this tutorial was helpful!