How to store tokens in React Native?

Sometimes, we want to store tokens in React Native.

In this article, we’ll look at how to store tokens in React Native.

How to store tokens in React Native?

To store tokens in React Native, we can use the expo-secure-store package.

To install it, we run expo install expo-secure-store.

Then we write:

import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import * as SecureStore from 'expo-secure-store';

export default function App() {
  const getToken = async () => {
    await SecureStore.setItemAsync('secureToken', 'secret');
    const token = await SecureStore.getItemAsync('secureToken');
    console.log(token);
  };

  React.useEffect(() => {
    getToken();
  }, []);

  return <View></View>;
}

to call SecureStore.setItemAsync with the key and value to store the entry.

And then we call SecureStore.getItemAsync with the key to return a promise with the entry with the given key.

Finally, we call getToken tin the useEffect callback to run it when App mounts.

Therefore, we see 'secret' logged.

Conclusion

To store tokens in React Native, we can use the expo-secure-store package.

To install it, we run expo install expo-secure-store.