← Back to Chapters

Secure Storage in React Native

? Secure Storage in React Native

? Quick Overview

Secure storage in React Native is used to safely store sensitive information such as authentication tokens, passwords, API keys, or user secrets. Unlike AsyncStorage, secure storage encrypts data and stores it in platform-specific protected locations.

? Key Concepts

  • Encrypted storage for sensitive data
  • Uses Keychain on iOS and Keystore on Android
  • Prevents easy access through rooted or jailbroken inspection
  • Commonly implemented using react-native-keychain

? Syntax / Theory

React Native does not provide secure storage out of the box. Libraries like react-native-keychain abstract native secure APIs and expose simple JavaScript methods to store, retrieve, and delete secrets.

? Code Example(s)

? View Code Example 
// Import secure keychain library
import * as Keychain from 'react-native-keychain';

// Save credentials securely
await Keychain.setGenericPassword('username', 'securePassword');

// Retrieve stored credentials
const credentials = await Keychain.getGenericPassword();

if (credentials) {
console.log(credentials.username, credentials.password);
}

? Live Output / Explanation

What Happens?

The username and password are encrypted and stored in the device’s secure storage. When retrieved, the decrypted values are returned only to your app. If the user clears app data or uninstalls the app, the stored credentials are removed.

? Interactive Example

Simulate the "Keychain" process below. Notice how the data stored in the "System Vault" is encrypted (unreadable), but your app retrieves the original value.

System Secure Storage (Keychain) [ Empty ]
System ready. Waiting for input...

? Use Cases

  • Storing JWT or OAuth tokens
  • Saving user login credentials
  • Persisting refresh tokens securely
  • Protecting sensitive configuration values

✅ Tips & Best Practices

  • Never store passwords in plain text
  • Prefer secure storage over AsyncStorage for secrets
  • Clear secure data on logout
  • Handle errors when secure storage is unavailable

? Try It Yourself

  1. Install react-native-keychain in a new project
  2. Store a dummy token after login
  3. Retrieve and display it on app reload
  4. Clear the token on logout