Securing your React Native App using Keychain

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.

import * as Keychain from 'react-native-keychain';

async () => {
  const username = 'zuck';
  const password = 'poniesRgr8';

  // Store the credentials
  await Keychain.setGenericPassword(username, password);

  try {
    // Retreive the credentials
    const credentials = await Keychain.getGenericPassword();
    if (credentials) {
      console.log('Credentials successfully loaded for user ' + credentials.username);
    } else {
      console.log('No credentials stored')
    }
  } catch (error) {
    console.log('Keychain couldn\'t be accessed!', error);
  }
  await Keychain.resetGenericPassword()
}

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.

Keychain.getSupportedBiometryType().then(biometryType => {
    this.setState({ biometryType });
 });

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.

Usage with server

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

import * as Keychain from 'react-native-keychain';
import DeviceInfo from 'react-native-device-info'

async () => {
  const username = 'adhithi';
  const password = 'poniesRgr8';
  const server = DeviceInfo.getBundleId()

  // Store the credentials
  await  Keychain.setInternetCredentials(server, email, password).then(() => {

  try {
    // Retreive the credentials
    const credentials = await getInternetCredentials(server);
    if (credentials) {
      console.log('Credentials successfully loaded for user ' + credentials.username);
    } else {
      console.log('No credentials stored')
    }
  } catch (error) {
    console.log('Keychain couldn\'t be accessed!', error);
  }
  await Keychain.resetInternetCredentials(server)
}

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.

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 Sanjay Vaghasiya a Software Consultant working on React Native Apps.