TypeError: _ExpoSecureStore.default.getValueWithKeyAsync is not a function

Question

I am trying to use expo-secure-store in my React Native. I am getting the error below:

Possible Unhandled Promise Rejection (id: 2): TypeError: _ExpoSecureStore.default.getValueWithKeyAsync is not a function. (In '_ExpoSecureStore.default.getValueWithKeyAsync(key, options)', '_ExpoSecureStore.default.getValueWithKeyAsync' is undefined)

I tried to look for solutions but couldn't find one. So I tried to check it using the sample code given in the docs, but the error is still a similar error:

Possible Unhandled Promise Rejection (id: 1): Error: The method or property SecureStore.setItemAsync is not available on android, are you sure you've linked all the native dependencies properly?

Here is the code that I used:

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

async function save(key, value) {
  await SecureStore.setItemAsync(key, value);
}

async function getValueFor(key) {
  let result = await SecureStore.getItemAsync(key);
  if (result) {
    alert("🔐 Here's your value 🔐 \n" + result);
  } else {
    alert('No values stored under that key.');
  }
}

export default function App() {
  const [key, onChangeKey] = React.useState('Your key here');
  const [value, onChangeValue] = React.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>
  );
}

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,
  },
});

Answer 1

Seems like you tried to use expo-secure-store in web. Expo Secure Store API doesn't work for web. It only works on mobile. Use this approach instead.

import * as React from 'react';
import { Text, View, StyleSheet, TextInput, Button, Platform } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as SecureStore from 'expo-secure-store';

async function save(key, value) {
  try {
    if (Platform.OS === 'web') {
      await AsyncStorage.setItem(key, value);
    } else { // mobile
      await SecureStore.setItemAsync(key, value.toString());
    }
  } catch (error) {
    console.error("Error saving data:", error); 
  }
}

async function getValueFor(key) {
  try {
    if (Platform.OS === 'web') {
      const result = await AsyncStorage.getItem(key);
      if (result) {
        alert("🔐 Here's your value 🔐 \n" + result);
      } else {
        alert('No values stored under that key.');
      }
    } else {
      const result = await SecureStore.getItemAsync(key);
      if (result) {
        alert("🔐 Here's your value 🔐 \n" + result);
      } else {
        alert('No values stored under that key.');
      }
    }
  } catch (error) {
    console.error("Error retrieving data:", error);
  }
}

Answer 2

I had a similar issue and from researching tried 3 solutions:

1. Import Secure Store as follows:

    import * as SecureStore from "expo-secure-store"
   

2. Rebuild your dev client after installing and using Secure Store.

3. Make sure you are using the correct platform for your build such as an Android Device or Emulator, or an IOS Device or emulator. Secure Store does not support a Web platform.