React Native, using Async Storage to store JWTs.
By: Andrew Zimmer
Tags: Jwt Token, React Native, App Development, Security, Asyncstorage

Before we get started, lets talk about security. We all want to feel safe, right? And we should, especially when using any mobile applications. Chances are, there might be some private information you don’t want someone to have access to. So before we start trying to store user information with Async Storage, let’s ask ourselves- can it be trusted? Short answer, yes. Long answer, yyeesssssssss. On a serious note though, it can be trusted according Androids documentation, the databases created by the application are saved in private disk space that’s associated application. Your data is secure, because by default this area is not accessible to other applications (source). The same is said for iOS systems as well. Here is a good link from Stack Overflow. With that said, there are vulnerabilities if a person has physical access to the devise or if the devise has either been jailbroken (iOS) or is without root (Android). All in all, I feel pretty confident about using the method of storing data. Although, do not store user passwords this way. Use tokens.

Now to get started with installation. Here are the docs if you have more questions after this. First you’ll want to run this line in your command line, within your project, with either yarn or npm, to install Async Storage:

yarn add @react-native-async-storage/async-storage

or

npm install @react-native-async-storage/async-storage

You may need to manually link Async Storage with React Native, depending on the version of React Native you’re using. To be sure you are linked up run this in your command line:

react-native link @react-native-async-storage/async-storage

Next, usage. Just like anything else in React, you’ll need to import what you need to the JavaScript file you need it in. So you’ll add this to the top of your file:

import AsyncStorage from '@react-native-async-storage/async-storage';

This will give you access to Async Storage and the ability to start storing data. There are two ways of storing data, depending on the type of data you are using. First, you have storing data as a string value, like so:

const storeData = async (value) => { try { await AsyncStorage.setItem('@storage_Key', value) } catch (e) { // saving error } }

Second, you can store you data as an JSON object:

const storeData = async (value) => { try { const jsonValue = JSON.stringify(value) await AsyncStorage.setItem('@storage_Key', jsonValue) } catch (e) { // saving error } }

This is for when you want to store an array or object. Now the only thing you’ll have to do is call the function you just made and pass in the value you want to store and you’re done.

I’ll also so you how to read data from Async Storage using both methods. First I’ll show how to read data with a string value:

const getData = async () => { try { const value = await AsyncStorage.getItem('@storage_Key') if(value !== null) { // value previously stored } } catch(e) { // error reading value } }

Basically the same as before, except this time we use the ‘getItem’ method with Async Storage and pass in the variable name we want to read.

The same is true for reading JSON data, but we just need to remember to parse the data back to its original data type.

const getData = async () => { try { const jsonValue = await AsyncStorage.getItem('@storage_Key') return jsonValue != null ? JSON.parse(jsonValue) : null; } catch(e) { // error reading value } }

And that’s the basic setup and usage of Async Storage. To get more familiar, I suggest checking out the docs. To see all the other methods you can use with Async Storage, again, check out the docs. They’re pretty great. Thanks for reading and happy coding!