Secure Local Data with React Native and Expo’s SecureStore

Unlock the Power of Encrypted Local Storage in React Native

When it comes to storing data locally in React Native, AsyncStorage is often the go-to solution. But what if you need to store sensitive information, like a JWT token? That’s where things get tricky. AsyncStorage is unencrypted, which means anyone with access can read your data – not ideal for sensitive info.

The Risks of AsyncStorage

Imagine storing a user’s theme setting or allowing them to pick up where they left off after restarting their phone or app. That’s exactly what AsyncStorage does – but at a cost. The data you save with AsyncStorage is unencrypted, making it vulnerable to prying eyes.

Enter Encrypted Data Storage Alternatives

For sensitive information, you need an encrypted and secure way of storing data locally. Luckily, there are options:

• react-native-keychain
• react-native-sensitive-info
• expo-secure-store

In this article, we’ll dive into Expo SecureStore, a powerful and secure solution for storing sensitive data.

Getting Started with Expo SecureStore

To create a React Native project, simply paste the following command into your Terminal:

npx react-native init MyProject --template react-native-template-typescript

This will create a new React Native project with a TypeScript template. Now, let’s build the app and see it in action!

Configuring Expo SecureStore for iOS

If you’re adding unimodules to an existing project, pay close attention to where you delete and add new lines of code. Make sure to update your AppDelegate.h, AppDelegate.m, and Podfile accordingly.

Configuring Expo SecureStore for Android

Update your android/build.gradle, android/app/build.gradle, and android/settings.gradle files to get started with Expo SecureStore on Android.

Exploring the Expo SecureStore API

SecureStore has three main API methods: set, get, and delete. Let’s explore them in our App.tsx file. Replace the contents with:
“`
import React, { useState } from ‘eact’;
import { View, Button, Text } from ‘eact-native’;
import { SecureStore } from ‘expo-secure-store’;

enum Key {
TOKEN,
}

const App = () => {
const [token, setToken] = useState(”);

return (




{token}

);
};
“`
Now, let’s add functionality to our buttons!

Storing Data with SecureStore

Use the setItemAsync method to store a fake token on your device:

SecureStore.setItemAsync(Key.TOKEN, 'fake_token');

Retrieving Data with SecureStore

Use the getItemAsync method to retrieve the stored token:

SecureStore.getItemAsync(Key.TOKEN).then(token => {
if (token) {
alert(`Token: ${token}`);
}
});

Deleting Data with SecureStore

Use the deleteItemAsync method to delete the stored token:

SecureStore.deleteItemAsync(Key.TOKEN).then(() => {
setToken('');
});

And that’s it! You now have a secure and encrypted way of storing sensitive data locally in your React Native app.

Take Your App to the Next Level with LogRocket

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps. Try LogRocket for free today!