Using SecureStore in React Native and Expo
๐
Expo SecureStore encrypts key-value pairs and stores them locally on the device. Each Expo project has its own storage and cannot access another project's data. (Expo documentation)
npx expo install expo-secure-storeapp.json.{
"expo": {
"plugins": [
[
"expo-secure-store",
{
"configureAndroidBackup": true,
"faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
}
]
]
}
}
npx pod-install
ios.config.usesNonExemptEncryption to false to declare that the app does not use non-exempt encryption.{
"expo": {
"ios": {
"config": {
"usesNonExemptEncryption": false
}
}
}
}import * as SecureStore from 'expo-secure-store';
import { useState } from 'react';
import { Text, View, StyleSheet, TextInput, Button, Alert } from 'react-native';
async function save(key: string, value: string) {
await SecureStore.setItemAsync(key, value);
}
async function getValueFor(key: string) {
let result = await SecureStore.getItemAsync(key);
if (result) {
Alert.alert("๐ Here's your value ๐ \n" + result);
} else {
Alert.alert('No values stored under that key.');
}
}
const App = () => {
const [key, onChangeKey] = useState('Your key here');
const [value, onChangeValue] = useState('Your value here');
return (
<View style={styles.container}>
<Text style={styles.paragraph}>Save an item, and grab it later!</Text>
{}
<TextInput
style={styles.textInput}
clearTextOnFocus
onChangeText={(text) => onChangeKey(text)}
value={key}
/>
<TextInput
style={styles.textInput}
clearTextOnFocus
onChangeText={(text) => onChangeValue(text)}
value={value}
/>
{}
<Button
title="Save this key/value pair"
onPress={() => {
save(key, value);
onChangeKey('Your key here');
onChangeValue('Your value here');
}}
/>
<Text style={styles.paragraph}>๐ Enter your key ๐</Text>
<TextInput
style={styles.textInput}
onSubmitEditing={(event) => {
getValueFor(event.nativeEvent.text);
}}
placeholder="Enter the key for the value you want to get"
/>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: 10,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
marginTop: 34,
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
textInput: {
height: 35,
borderColor: 'gray',
borderWidth: 0.5,
padding: 4,
},
});
SecureStore.setItemAsync(key, value) and reads it with SecureStore.getItemAsync(key). The API is similar to AsyncStorage, with the benefit of encrypted storage.
Use SecureStore.deleteItemAsync(key, options) to delete a value by key. The original article also mentions SecureStore.deleteAllItemsAsync(), but that method is not part of the documented Expo SecureStore API. To clear values, delete each key you manage.requireAuthentication to require it and authenticationPrompt to supply a message for the prompt.
Use SecureStore.canUseBiometricAuthentication() to check whether biometric authentication is available on the device.// ...
async function save(key: string, value: string) {
if (SecureStore.canUseBiometricAuthenticationAsync()) {
await SecureStore.setItemAsync(key, value, {
requireAuthentication: true,
authenticationPrompt: 'Authenticate to save the value',
});
} else {
await SecureStore.setItemAsync(key, value);
}
}
// ...