React Native Secure Storage

React Native is a popular JavaScript framework used to build mobile applications. One of the critical requirements of most mobile applications is the need to store sensitive user data securely. This could be user credentials, access tokens, or any other private data. React Native provides a module called react-native-sensitive-info to help with storing sensitive data securely.

In this article, we will guide you through the process of using react-native-sensitive-info to store sensitive data in your React Native application. We will provide step-by-step instructions for installation and usage, including code snippets. Additionally, we will provide instructions for setting up react-native-sensitive-info in Expo.

Installation

Before we get started with using react-native-sensitive-info, we need to install it. You can install the module using either npm or yarn. Here’s how to do it with npm:

npm install react-native-sensitive-info --save

And here’s how to do it with yarn:

yarn add react-native-sensitive-info

Once the installation is complete, you need to link the module to your React Native project. Here’s how to do it with react-native-cli:

react-native link react-native-sensitive-info

If you are using Expo, you don’t need to link the module manually because Expo manages it automatically.

Usage

Now that we have installed react-native-sensitive-info, let’s take a look at how to use it in our React Native application.

Setting a value

The first thing we need to do is set a value for the sensitive data we want to store. Here’s an example of how to set a value:

javascriptCopy code

import SInfo from 'react-native-sensitive-info';  SInfo.setItem('key', 'value', {   sharedPreferencesName: 'mySharedPrefs',   keychainService: 'myKeychain', }).then(() => console.log('Successfully stored data'));

In the example above, we are setting the value value for the key key. We are also specifying the name of the shared preferences and keychain service to use. If you are using iOS, you can omit the sharedPreferencesName parameter.

Getting a value

To retrieve the value we set earlier, we can use the getItem method. Here’s an example:

import SInfo from "react-native-sensitive-info";
SInfo.getItem("key", {
  sharedPreferencesName: "mySharedPrefs",
  keychainService: "myKeychain",
}).then((value) => console.log(`Retrieved value: ${value}`));

In the example above, we are retrieving the value for the key key. We are also specifying the name of the shared preferences and keychain service to use. If you are using iOS, you can omit the sharedPreferencesName parameter.

Deleting a value

If we want to delete a value, we can use the deleteItem method. Here’s an example:

import SInfo from "react-native-sensitive-info";
SInfo.deleteItem("key", {
  sharedPreferencesName: "mySharedPrefs",
  keychainService: "myKeychain",
}).then(() => console.log("Successfully deleted data"));

In the example above, we are deleting the value for the key key. We are also specifying the name of the shared preferences and keychain service to use. If you are using iOS, you can omit the sharedPreferencesName parameter.

Using react-native-sensitive-info in Expo

If you are using Expo to develop your React Native application, you don’t need to link react-native-sensitive-info manually. Expo manages this for you automatically.

To use react-native-sensitive-info in Expo, you need to install

the Expo SecureStore API, which is a secure storage solution that works across different platforms. Here’s an example of how to use react-native-sensitive-info with Expo:

import * as SecureStore from "expo-secure-store";
import SInfo from "react-native-sensitive-info";
const keychainService = "myKeychain";
const setSecureValue = async (key, value) => {
  try {
    await SecureStore.setItemAsync(key, value);
    await SInfo.setItem(key, value, { keychainService });
  } catch (error) {
    console.log("Error setting secure value: ", error);
  }
};
const getSecureValue = async (key) => {
  try {
    const value = await SecureStore.getItemAsync(key);
    if (value) {
      return value;
    } else {
      return await SInfo.getItem(key, { keychainService });
    }
  } catch (error) {
    console.log("Error getting secure value: ", error);
  }
};
const deleteSecureValue = async (key) => {
  try {
    await SecureStore.deleteItemAsync(key);
    await SInfo.deleteItem(key, { keychainService });
  } catch (error) {
    console.log("Error deleting secure value: ", error);
  }
};

In the example above, we are using both SecureStore and react-native-sensitive-info to store sensitive data securely. We define a keychainService constant to specify the name of the keychain service to use. We then define three functions for setting, getting, and deleting secure values. These functions first try to use SecureStore to store the value and fall back to using react-native-sensitive-info if SecureStore is not available.

Conclusion

In this article, we have shown you how to use react-native-sensitive-info to store sensitive data securely in your React Native application. We provided step-by-step instructions for installation and usage, including code snippets. We also showed you how to use react-native-sensitive-info with Expo and SecureStore. By using react-native-sensitive-info, you can ensure that your users’ sensitive data is stored securely and protected from unauthorized access.