Programming Tutorials

expo-secure-store to store sensitive data securely in React Native

By: James in React-Native Tutorials on 2023-04-07  

expo-secure-store provides an API to securely store sensitive data such as authentication tokens, passwords, and other secrets. This library uses the operating system's secure storage mechanism to store the data.

Here's an example of how to use expo-secure-store to store a user's authentication token securely:

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

// Store the user's authentication token
const saveAuthToken = async (token) => {
  try {
    await SecureStore.setItemAsync('authToken', token);
    console.log('Token saved successfully');
  } catch (error) {
    console.log('Error saving token:', error);
  }
}

// Retrieve the user's authentication token
const getAuthToken = async () => {
  try {
    const token = await SecureStore.getItemAsync('authToken');
    if (token) {
      console.log('Token retrieved successfully');
      return token;
    } else {
      console.log('No token found');
      return null;
    }
  } catch (error) {
    console.log('Error retrieving token:', error);
    return null;
  }
}

// Delete the user's authentication token
const deleteAuthToken = async () => {
  try {
    await SecureStore.deleteItemAsync('authToken');
    console.log('Token deleted successfully');
  } catch (error) {
    console.log('Error deleting token:', error);
  }
}

In this example, we have defined three functions to save, retrieve, and delete the user's authentication token. The setItemAsync() method is used to securely store the token. The getItemAsync() method is used to retrieve the token. If the token is found, we return it; otherwise, we return null. The deleteItemAsync() method is used to delete the token from the secure storage.

It is important to note that the data stored using expo-secure-store is encrypted and can only be accessed by the same application that stored it. The data is also automatically cleared when the application is uninstalled.






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native