How to store tokens in react native?
As an addition to the other answer, you might want to consider encrypting the token on the user device when storing it.
So in addition to storing it via AsyncStorage you might want to use something like: react-native-keychain to encrypt it on the device.
If you're using create-react-native-app
or exp
, you can use Expo.SecureStore
to store your token.
import {SecureStore} from 'expo';
await SecureStore.setItemAsync('secure_token','sahdkfjaskdflas$%^&');
const token = await SecureStore.getItemAsync('secure_token');
console.log(token); // output: sahdkfjaskdflas$%^&
Details: https://docs.expo.io/versions/latest/sdk/securestore
Update in Dec 2020:
The SecureStore module is now become expo-secure-store
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('secure_token','sahdkfjaskdflas$%^&');
const token = await SecureStore.getItemAsync('secure_token');
console.log(token); // output: sahdkfjaskdflas$%^&
Here are some ways to store persistent data in React Native:
async-storage stores unencrypted, key-value data. Do not use Async Storage for storing Token, Secrets and other confidential data. Do use Async Storage for persisting Redux state, GraphQL state and storing global app-wide variables.
react-native-keychain stores username/password combination in the secure storage in string format. Use JSON.stringify/JSON.parse when you store/access it.
react-native-sensitive-info - secure for iOS, but uses Android Shared Preferences for Android (which is not secure by default). There is however a fork) that uses Android Keystore.
redux-persist-sensitive-storage - wraps react-native-sensitive-info
More info about React Native Storage & Security