Where to store user information after login — React Native

Jaka Tertinek
3 min readJul 29, 2021

If you want to start developing right away and not think about adding a secure storage plus other useful functionalities(navigation, state management, Typescript), you can check out the starter project that I created.

Code for storing user information after login.

Here comes the long-debated question about what to do with user information once the user logins. In other more “technical” words, where should we store some data indicating that the user has already logged in? This also includes data used for connecting with the back-end.

Now securely saving information is frowned upon. We don’t want users to think that their data is freely available for everybody to see. If they do not feel that they can trust our application, they will reluctantly use it or not use it at all.

What information should be stored permanently on the phone depends on each use case. What we can say with certainty is that if we have a login functionality build into our application we have to store some information about the authenticated user. This usually includes a user ID, user email/username and a token or ID used for communicating with the back-end. This way our backend knows that the user was already authenticated.

What are our options for storing sensitive information?

Usually, the first solution that developers think about is AsyncStorage. It’s a simple key/value database. AsyncStorage simply saves data into documents on the phone’s hard drive, and therefore anyone with access to the phone’s file system can read that data. On iOS, the data is indeed only available to the app that wrote it, because of Apple’s sandboxing policy. This doesn’t stop jailbroken iPhones with root access to the file system from getting whatever they want, since AsyncStorage does not encrypt any of its data. But in general, don’t save sensitive data to AsyncStorage, for the same reason you shouldn’t hard code sensitive data in your javascript code, since it can be easily decompiled and read. [1]

So we can agree that AsyncStorage is not an option. Wouldnt it be great if there would be a solution similar to AsyncStorage just secure? Luckily, there are quite many libraries that can be used. For example, there are react-native-keychain and react-native-encrypted-storage. At the end of the day, all of them use the same native functionalities to achieve the goal. Which one to use comes down to personal preference. My personal favourite is react-native-encrypted-storage, but I encourage you to check out the others as well.

How do react-native-encrypted-storage and other similar packages securely store data?

They do not use any new technologies developed exclusively for React Native and they do not use encryption. What they do is create a bridge between JavaScript and Keychain Services (iOS) and Secure Shared Preferences (Android) or Keystore (Android).

iOS — Keychain Services

Keychain Services allows you to securely store small chunks of sensitive info for the user. This is an ideal place to store certificates, tokens, passwords, and any other sensitive information that doesn’t belong in Async Storage. [2]

Android — Secure Shared Preferences

Shared Preferences is the Android equivalent for a persistent key-value data store. Data in Shared Preferences is not encrypted by default, but Encrypted Shared Preferences wraps the Shared Preferences class for Android, and automatically encrypts keys and values. [2]

Example using react-native-encrypted-storage

The easiest way to manage data is to create a gateway. In general, we only need three simple functions that help us to save, load and remove data. It works pretty much the same as AsyncStorage. Keep in mind that “user_session” in the example is the key with which we access data. It can be anything you want.

The secure user data gateway

Further reading

(a) react-native-keychain

(b) AsyncStorage Example — Persisting Login Credentials in React Native

(c) What is the best way to store private data in react-native?

(d) React Native Security

Bibliography

[1] https://stackoverflow.com/questions/39148714/is-react-natives-async-storage-secure

[2]https://reactnative.dev/docs/security

--

--

Jaka Tertinek

I’m a software developer trough and trough. I worked with mostly React Native and Node.js. Currently, I’m working as a CTO for a small startup.