How to store tokens in react native?

Question

I used to develop in android previously and i used to used SharePreference for storing user tokens. Is there anything such available in react native for both ios and android?

Answer 1

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$%^&

Answer 2

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

Answer 3

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.

Answer 4

You might want to use AsyncStorage

Since AsyncStorage is deprecated now. You can use https://github.com/react-native-community/async-storage

Edit:

For everyone who has pointed out that AsyncStorage is not secure please refer to this post.

Answer 5

use expo-secure-store

// to install it 'expo install expo-secure-store'

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

const setToken = (token) => {
    return SecureStore.setItemAsync('secure_token', token);
};

const getToken = () => {
    return SecureStore.getItemAsync('secure_token');
};

setToken('#your_secret_token');
getToken().then(token => console.log(token)); // output '#your_secret_token'

Answer 6

According to the React Native docs:

React Native does not come bundled with any way of storing sensitive data. However, there are pre-existing solutions for Android and iOS platforms.

But here are some alternatives using iOS - Keychain Services & Android - Secure Shared Preferences. See the following docs

Also, here are a few options out of the box:

• expo-secure-store
• react-native-encrypted-storage
• react-native-keychain

Answer 7

Try this example from React Native Expo

Note: This example is for unencrypted usage so if you want secure storage so visit this page for nore information https://docs.expo.io/versions/latest/sdk/securestore

Reference: Unencrypted https://reactnavigation.org/docs/en/auth-flow.html#set-up-our-navigators Encrypted https://docs.expo.io/versions/latest/sdk/securestore

class SignInScreen extends React.Component {
  static navigationOptions = {
    title: 'Please sign in',
  };

  render() {
    return (
      <View>
        <Button title="Sign in!" onPress={this._signInAsync} />
      </View>
    );
  }

  _signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate('App');
  };
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome to the app!',
  };

  render() {
    return (
      <View>
        <Button title="Show me more of the app" onPress={this._showMoreApp} />
        <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
      </View>
    );
  }

  _showMoreApp = () => {
    this.props.navigation.navigate('Other');
  };

  _signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
  };
}

// More code like OtherScreen omitted for brevity