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.
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:
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 🚀