13

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 server validates those credentials and sends the client back a JSON web token that they must then send along with every API request. So the React native app must store this token.

How do I securely store this client token in the React native app? Is it necessary to take any additional steps besides just storing the token in a variable?

Ryan
  • 5,883
  • 13
  • 56
  • 93
  • To store sensitive information in React-native you can take a look at this: https://stackoverflow.com/a/45550361/7618742 – Julien Kode Aug 09 '17 at 08:29

3 Answers3

9

For iOS, you'd store that in the keychain... https://auth0.com/docs/libraries/lock-ios/save-and-refresh-jwt-tokens

Here's a couple ways of doing that in react native that I found. There may be others. There may be better options. This is just what I found quickly.

https://github.com/search?utf8=%E2%9C%93&q=react-native+keychain

For Android, you'd store that in either the SharedPreferences or maybe even better the KeyStore since it's encrypted there.

Chris Geirman
  • 9,474
  • 5
  • 37
  • 70
  • Hi, any one please help me to find hood resource for JWT in react native.i think you guys using it , can any one share it please – mychar Jul 05 '16 at 06:18
7

To be app agnostic, I would store it using ASyncStorage. In fact I am testing this on a new project.

James
  • 3,597
  • 11
  • 41
  • 76
  • 3
    this isnt encryped though – Tom Jan 26 '17 at 14:22
  • Although AsyncStorage stores data [unencrypted](https://facebook.github.io/react-native/docs/asyncstorage.html#asyncstorage), depending on the security level you're after it could be an option. See this answer: https://stackoverflow.com/a/39112472/747962 – Daniel Bang May 23 '17 at 16:47
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);
Ryan Forte
  • 499
  • 5
  • 6