Using biometrics in React Native

Lukasz Kurant
4 min readAug 10, 2023

--

Use of the react-native-biometrics library for local and remote user authentication.

Photo by Immo Wegmann on Unsplash

Biometrics is a field that uses a person’s unique physical or behavioural characteristics to identify them. Biometrics solutions are widely used on mobile devices — the use of such solutions allows us to provide a higher level of security and a more personalised interaction with mobile applications.

Using our unique characteristics, we can use them to interact with our mobile application. In this article, I would like to show how such technologies can be used to restrict access to application functionality and user authentication in the application’s communication with the backend. This will be done using the example of a React Native (CLI) application along with the use of the react-native-biometrics library.

Project creation and installation of the library

Let’s start by creating a new project with the command:

npx react-native init biometrics

Next, let’s install the library for handling biometrics in React Native:

yarn add react-native-biometrics && npx pod-install

In addition, before launching for iOS, we must remember to add the following records in Info.plist (we specify the reason for using FaceID as the value):

<key>NSFaceIDUsageDescription</key>
<string>Only for testing</string>

Types of biometrics

The library supports the following three types of biometrics:

  • FaceID (iOS)
  • TouchID (iOS)
  • Biometrics (Android)

To find out what type is available to us, we need to perform the following method:

const biometrics = new ReactNativeBiometrics();
const {available, biometryType} = await biometrics.isSensorAvailable();

The result obtained in the variable biometryType, will have a value of one of the enumeric type BiometryTypes, so we can easily check this.

if (biometryType === BiometryTypes.FaceID && available) {
// ...
}

In addition, in the resulting object we have an available field that specifies whether the validation method is available to our application (e.g. whether the application has the appropriate permissions).

When creating the ReactNativeBiometrics object, we can provide the allowDeviceCredentials parameter, which will allow us to use a different device code, e.g. in case of unsupported face validation. We can add this parameter as follows:

const biometrics = new ReactNativeBiometrics({allowDeviceCredentials: true);
Process using FaceID and a message about an unrecognised face.
Process using FaceID and a message about an unrecognised face.

Local authentication

To easily biometrically validate a user, simply use the simplePrompt method, which asks the user to use a fingerprint or FaceID.

const {success} = await biometrics.simplePrompt({
promptMessage: 'Confirmation',
});

if (success) {
// ...
}

Note, however, that the method given is only used when we are restricting locally, specific application functionality, not when we are authenticating a user on the server, in which case we must use other methods.

Server authentication

Source: New in Android Samples: Authenticating to remote servers using the Fingerprint API (2015) https://android-developers.googleblog.com/2015/10/new-in-android-samples-authenticating.html

In order to authenticate the user using Biometrics on the server, it is necessary to use asymmetric encryption with RSA keys. In this case, after generating a private and a public key, we can send the public one to the server, and all the information we will direct to it will be encrypted with the private key which will remain off the device.

To generate the key pair, we can use a previously downloaded library.

const {publicKey} = await biometrics.createKeys();

We can then forward the generated key to the server, in order to link it to our user.

Now, to prepare a message that the server can process to authenticate the user, we need to use the createSignature method:

const {signature} = await biometrics.createSignature({
payload: 'sample message',
promptMessage: 'Confirmation',
});

if (success) {
//... send signature and payload
}

The result of such a process will be a signature, which together with the payload, i.e. our message, will be sent to the server. This is how we can authenticate the correct user using biometrics on the device and the backend.

Summary

Biometrics will provide an interesting and modern way of interacting for authentication in mobile applications. By taking advantage of a user’s unique characteristics, we can restrict selected application functionality and validate identity when required. However, important security issues related to such processes and good practice must be kept in mind.

Sources

--

--

Lukasz Kurant

Fullstack Developer interested in solving difficult problems.