Probably the best approach to store credentials across platforms for React-Native apps.

Security is one of the most prominent factors when building mobile apps. And user authentication lies at the forefront of security. Therefore you can find multiple strategies for user authentication serving different security requirements.

Out of them, the two most common methods are,

1. Using an Identity Provider supporting OpenID Connect Code Grant Flow, the mobile app receives a refresh token to retrieve new access tokens to invoke the API.
2. Directly store user credentials in the app using a keychain after authentication for re-authentication.

This article will explore the latter approach using an NPM library called react-native-keychain to secure the credential storage in mobile devices.

Why we need a Keychain?

By default, React-Native does not come bundled with any method of storing secure data.

Keep in mind not to store sensitive data or Keys in your app codebase. Anything included in the codebase could be accessed in plain text by inspecting the app bundle.

But, there are two separate existing solutions for Android and iOS, which are,

• iOS Keychain service
• Android Secure Shared Preferences

To use these two services, either you can write a bridge by yourself or more quickly you can use libraries. There are three standard libraries developers use, which are react-native-keychain, react-native-secure-storage, and react-native-sensitive-info.

The statistical analysis for downloads for three packages within one year shows that react-native-keychain is the most downloaded library that wraps up what you need.

Tip: Share your reusable components between projects using Bit (Github).

Bit makes it simple to share, document, and reuse independent components between projects. Use it to maximize code reuse, keep a consistent design, collaborate as a team, speed delivery, and build apps that scale.

Bit supports React Native, React, Node, TypeScript, Vue, Angular, and more.

Using react-native-keychain in mobile apps

First and foremost, we can start by installing the react-native-keychain in our React-Native project.

Installing packages

Installing react-native-keychain is as straight forwards as installing any of the npm packages. You can use both npm or yarn to install the package.

npm i react-native-keychain
yarn add react-native-keychain

If you are using React-Native version 0.59 or less, run the following command, it will link your library with React-Native.

react-native link react-native-keychain

If you are developing iOS, Run pod install in ios/ directory to install iOS dependencies. Finally, rebuild the application.

Then, by using the library’s default APIs, you can now access the iOS Keychain and Android Secure Shared Preferences.

Note: When you are using react-native-keychain, it’s important to note that only specific methods are compatible with iOS or Android. However, the ones we use in this article are equally usable in both Android and iOS.

You can also use some of the platform-specific features if you have any advance requirements related to authentication.

Using the library in practice

This example shows how to store, retrieve, and use credentials for re-login to an app.

Step 01 — Save credentials

We can use setGenericPassword function to store user credentials (username and password) in the Keychain. (Note: By default, strings can be stored using their function. When storing objects, it is recommended to use JSON.stringify).

Step 02 — Retrieve Credentials

Use the function getGenericPassword to get the saved user credentials from the Keychain. (Note: By default, the function returns String. So when retrieving objects, it is recommended to use JSON.parse).

Step 03 — Using in a real-world scenario

In the following code snippet, the first checkUserStatus() the function will be called within the useEffect hook during the component mount and set user credentials by retrieving them by the Keystore. Then login() the function will be invoked to log in to the user using obtained credentials.

Step 04 — Remove credentials

The function resetGenericPassword can remove all Keychain credentials in a scenario where users are logging out from the app.

Understanding the risks with Keychain

However, there is one common pitfall in the React-Native Keychain when it comes to Android development.

Shared Preferences are not 100% secure. It is safe for storing your data but not recommended for storing key-value pairs.

Shared Preferences are stored in a file, and if the developer roots the phone and manages to mount its file system, anyone can read the preferences. Using Conceal is the standard answer. It handles the encryption and decryption of what is stored on rooted devices, But still, data will not be 100% secret because the key is present locally.

Furthermore, The SharedPrefsBackedKeyChain is used in data encryption. The method is storing 256-bit encryption keys in the SharedPreferences on the device. The issue is the encryption key and encrypted data are stored in the same place. However, encryption becomes pointless.

However, on newer devices, all the encryption keys are stored on the hardware level, not inside the app itself, which increased the protection.

Benefits of using react-native-keychain

One library to access both iOS Keychain and Android Keystore in React-Native apps.

There are many reasons why react-native-keychain is the most popular library. Let us look at some significant pros.

• The device must be unlocked to access the Keychain.
• The Keychain cannot be restored to a different device.
• In never devices, the encryption keys are stored on the hardware level.

Conclusion

Based on my experience, using a react-native-keychain is the best option to store credentials in React-Native mobile apps. As I can see, the main advantage is that the usage of the existing iOS Keychain and Android shared preferences under the hood.

As I have shown above, it is easier to use the library and implement storing credentials for your React-Native mobile apps.

I hope the approach discuss here is helpful for most of you. Thank you for reading, and please comment below if you need any clarifications.