Securing your React Native App using Keychain

Security is of paramount importance for your mobile application. Learn about securing your React Native app by using Keychains

Securing your mobile application is crucial when dealing with passwords, touch ids, account names, credit card information and so on.

In my previous post, we saw how to integrate touch id and face id to your app. When storing user passwords, biometric information, and other sensitive information at login, you will have to store them in a secure keychain. The react-native-keychain library provides keychain/keystore access to your React Native application, making your application secure.

Installation

Installation is fairly simple with the react-native-keychain library.

Run the following command:

yarn add react-native-keychain

Make sure to link your library:

react-native link react-native-keychain

You can verify if the linking was complete by making sure that the library was added to the MainApplication.java.

Now, you are ready to rebuild your application.

react-native run-ios
react-native run-android

Once the above steps are complete, you are all set to start using the react-native-keychain library within your app.

Usage

In the simple example below, we are storing and retrieving the credentials using the keychain library.

https://gist.github.com/adhithiravi/4ab75b63cb4db09728ef53d7c7fd420b

setGenericPassword

This function will store the username/password combination in the secure storage. It resolves to true or rejects in case of an error scenario.

This function can only store strings. If your credentials are in the form of an object, you will have to use JSON.stringify while storing it.

getGenericPassword

This function retrieves the credentials from the secure storage.

It resolves to {username, password} if the entry exists or resolves to false if there is no entry. It will reject if there are any unexpected errors related to permissions.

Just like setGenericPassword, this function can also only retrieve strings. If your credentials are in the form of an object, you will have to use JSON.parse while accessing it.

resetGenericPassword

This function as the name suggests will remove the credentials from the secure storage completely and reset it.

getSupportedBiometryType

This function can be used to check the phone’s hardware biometry that is supported. It works for both Android and iOS devices. It returns a Keychain.BIOMETRY_TYPE enum.

The biometry types that are returned are

TOUCH_ID (iOS only)
FACE_ID (iOS only)
FINGERPRINT (android only)

Keychain.ACCESSIBLE enum

The API also provides this enum to determine when the keychain information can be accessible.

There are several options that are available to determine this based on the user/developer preference.

Some of the common options that you can leverage are:

WHEN_UNLOCKED Keychain is accessible when the device is unlocked.

ALWAYS Keychain is always accessible. This is probably the most unsafe method.

WHEN_UNLOCKED_THIS_DEVICE_ONLY Keychain is accessible only when it is unlocked on a specific device.

ALWAYS_THIS_DEVICE_ONLY Keychain is accessible only when it is on a specific device.

AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY Keychain is accessible only after the first time it was unlocked from a specific device. This seems to be the most secure option.

The amount of security you want to add depends on your application and what you are trying to secure and there are number of different options available to make the keychain accessible.

setInternetCredentials

If you wanted to store the server name along with the username and password, this function supports it.

It will store the server/username/password combination in the secure storage.

getInternetCredentials

This is the corresponding function to the above function. It will retrieve the server/username/password combination from the secure storage.

It resolves to {username, password} if the entry exists or resolves to false if there is no entry. It will reject if there are any unexpected errors related to permissions.

resetInternetCredentials

This function as the name suggests will remove the server, username and password from the secure storage completely and reset it.