How to Use Face ID With React Native or Expo

Bring biometric auth to your React Native or Expo app. Let your users sign in with it.

Unsplash: Debby Hudson

Introduction

Like many applications, your app may have authentication. Your users might sign in with an email/password.

So once they sign in everyone using their phone can access the data inside the app. It can be a problem if your apps keep sensitive data. One solution is to re-ask the password each time the user uses the application. It is a good solution but it affects the user experience.

You may have seen that apps like banking, health, etc.. use biometric to let users continue, that is the solution we will experience in this article.

We will see both approaches:

• React Native
• Expo

Setup

To follow the article, you will need an Expo or a React Native app. We will create a dummy auth application as follow:

App.tsx

In the file above, I have created a simple button with a callback. We will implement the method in the next parts.

Biometric with Expo

Once you have an expo and our dummy App.tsx file, you will be able to install the expo module for Local Authentication:

expo install expo-local-authentication

Now, the Expo module that handles Face ID is installed. We can edit our app as follow:

This sample code:

• Check if device is compatible with biometrics methods
• Check if a Face or Finger exists
• And finally authenticate the user

It is as simple as that. You can pass options to the authenticateAsync method, such as:

• promptMessage: Label shown on Face ID / Touch ID.
• cancelLabel: Customize the cancel label.
• fallbackLabel: Customize the passcode label.
• disableDeviceFallback: Decide if after multiple tries for Face / Finger to fallback on device passcode.

You can find more information about local authentication on Expo docs.

Permissions

As a lot of native modules, you may need to handle permisssions. With expo-local-authentication, you don’t really have to carry about it.

On Android, permissions are automatically added. On iOS, you will need to add “infoPlist.NSFaceIDUsageDescription” in your app.json file

Permissions on Bare project

For iOS, you will need to add “NSFaceIDUsageDescription” in your info.plist file.

For Android, you will need below lines in your AndroidManifest.xml:

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

Biometric with React Native

On React Native, it exists a few libraries to handle Local Authentication. Such as react-native-biometrics, react-native-touch-id, etc..

We can also use expo-local-authentication in our bare React Native app.

What ? The same package as Expo ? Exactly, when I have chosen a package to add Local Authentication, I found that expo-local-authentication was really good to realise the job.

But it’s an Expo Package, so it’s no compatible ? Effectively, by default some Expo packages can’t be used in a bare project. But it exists a solution provided by Expo, the Expo unimodules. React Native Unimodules will allow you tu use Expo modules in a bare app.

How can I use it ? Expo has written a really good documentation about unimodules that you can find here.

Once you have installed unimodules, you can implement Local Authentication the same way as for Expo. 😎

Bonus — Check if device is compatible on mount

In the sample code below, you can see how to check if device is compatible on component mount:

Expo-local-authentication allows you to add Face ID / Touch ID to your React Native app.

GitLab Repo: dmg.link/blog-biometric-repo

You can find my other articles and follow me here. Thanks for reading, I hope you learned something new today 🚀

Automate your React Native App with Fastlane

Schedule your Node.js task with agenda.js 📔