How to keep client JSON web token secure in a React Native app?

Question

We are building a React Native app for iOS and we are using an internal API built on node + express + jsonwebtoken.

When the user logs in with username/password, the ser

Answer 1

I recently built a keychain manager in react-native so I may be able to help you.

NOTE: This solution does require that your app be running on expo.

To encrypt and store your tokens locally on the device you can use a package called expo-secure-store.

This will give you easy access to the iOS keychain and android keystore system and can be implemented as below:

import * as SecureStore from "expo-secure-store";

/**
 * Saves the value to the ios keychain or Android keystore
 * @param {string} key => the key you want to save the value for
 * @param {any} value => the value you want to encrypt
 * @return => A promise that will reject if value cannot be stored on the device.
 */
SecureStore.setItemAsync(key, value);

/**
 * Fetches the value from the keychain/keystore for the specified key
 * @param {string} key => the key you set for the value
 * @returns {any} => A promise that resolves to the previously stored value, or null if there is no entry for the given key.
 * The promise will reject if an error occurred while retrieving the value.
 */
SecureStore.getItemAsync(key);

/**
 * Saves the value to the ios keychain or Android keystore
 * @param {string} key => the key you want to save the value for
 * @param {any} value => the value you want to encrypt
 * @return => A promise that will reject if value cannot be stored on the device.
 */
SecureStore.deleteItemAsync(key);