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.

KeychainExample.js

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)

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.

Usage with server

This library also provides APIs to store and retrieve the server information along with the username and password. See example below:

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.

Android specific note

Some of the older API levels that do not support Android keystore, will still work with this library. But Facebook Conceal is used to encrypt and decrypt the data instead.

On API levels 23 and higher, the key is stored in the Android Keystore, making it more secure.

Detailed Example

For a more detailed example, checkout the example from the library here:

Note: Always remember to use tokens instead of saving user credentials on the device. Also, get the user to login again with passcode or biometry when they have been inactive for a certain amount of time.


I am Adhithi Ravichandran a Software Consultant working on React Native Apps. I am also a Pluralsight Author and love teaching. You can checkout my latest course on React Native from pluralsight below:

https://www.pluralsight.com/courses/react-native-big-picture

For more information and posts from me visit http://adhithiravichandran.com/ and follow me on twitter @AdhithiRavi.

React Native Training

Stories and tutorials for developers interested in React Native

Adhithi Ravichandran

Written by

Software Consultant, Pluralsight Author, Speaker, React Native|React|GraphQL Dev & Indian Classical Musician http://adhithiravichandran.com/

React Native Training

Stories and tutorials for developers interested in React Native

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade