SecureStore for sensitive data in React Native

Introduction

SecureStore helps you save secret information safely on a phone. It keeps passwords or tokens hidden from others.

Saving a user's login password securely.

Storing an API token for accessing a web service.

Keeping a secret key for encrypting data.

Remembering user preferences that should stay private.

Syntax

React Native

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

// Save data
await SecureStore.setItemAsync(key, value);

// Get data
const result = await SecureStore.getItemAsync(key);

// Delete data
await SecureStore.deleteItemAsync(key);

Use setItemAsync to save data securely.

Use getItemAsync to read saved data.

Examples

Saves the token 'abc123' under the key 'userToken'.

React Native

await SecureStore.setItemAsync('userToken', 'abc123');

Reads the token saved with key 'userToken'.

React Native

const token = await SecureStore.getItemAsync('userToken');

Deletes the saved token for 'userToken'.

React Native

await SecureStore.deleteItemAsync('userToken');

Sample App

This app has three buttons to save, read, and delete a secret value securely. The secret is shown below when read.

React Native

import React, { useState } from 'react';
import { View, Button, Text, Alert } from 'react-native';
import * as SecureStore from 'expo-secure-store';

export default function App() {
  const [storedValue, setStoredValue] = useState('');

  async function saveValue() {
    await SecureStore.setItemAsync('secret', 'myPassword123');
    Alert.alert('Value saved securely!');
  }

  async function readValue() {
    const result = await SecureStore.getItemAsync('secret');
    setStoredValue(result || 'No value found');
  }

  async function deleteValue() {
    await SecureStore.deleteItemAsync('secret');
    setStoredValue('');
    Alert.alert('Value deleted!');
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Save Secret" onPress={saveValue} />
      <Button title="Read Secret" onPress={readValue} />
      <Button title="Delete Secret" onPress={deleteValue} />
      <Text style={{ marginTop: 20 }}>{storedValue}</Text>
    </View>
  );
}

Important Notes

SecureStore works differently on iOS and Android but keeps data safe on both.

Always use async/await because these functions return promises.

Do not store very large data; SecureStore is for small secrets only.

Summary

SecureStore saves sensitive data safely on mobile devices.

Use setItemAsync, getItemAsync, and deleteItemAsync to manage data.

It is perfect for passwords, tokens, and private keys.