Understanding React Native encryption libraries

As app developers, it is crucial to manage the security of our app. Let’s take the example of a banking app: implementing the encryption component won’t be an easy feat. We have to:

1. Discuss with the team to agree on an encryption algorithm, such as RSA or Triple DES
2. Use complicated math to write an algorithm
3. Test out the function and make sure it is secure against cryptography attacks
4. In the end, ensure that the cryptography method is also performant

This isn’t an easy task for small teams because it involves hiring security professionals, which costs time and money. Instead, it’s likely better to use a third-party library that has already done the heavy lifting for us.

In this article, you will learn how to use encryption libraries in React Native. We will be using Expo to set up our apps in this article. To set up a bare Expo project:

npx create-expo-app --template bare-minimum

Let’s get started!

What is RSA encryption?

RSA is a household name when it comes to the cryptography world; HTTPS and SSH use RSA encryption because it is a robust algorithm. It uses two keys, a public and a private, to encrypt and decrypt messages.

How does it work?

The algorithm executes these steps to generate keys and perform encryption:

1. 1. Create two large prime numbers, p and q. The larger the numbers, the better the security
   2. Multiply p and q. Name this result n:

      n = p*q

   3. Choose a number, e, where e should be relatively prime to n
   4. Calculate the private key, d, using this formula:
      
   5. For encryption, take the message, m, convert it to a number, and encrypt it like so:
      
      Here, c is the encrypted message or the ciphertext
   6. To decrypt, one can use this formula:
      

Now that we have learned about the fundamentals of RSA encryption, let’s learn about initialization vectors.

Initialization vectors

An initialization vector (IV) is a random number that ensures that the ciphertext is always different, even if the secret key is the same. This prevents attackers from decoding the data.

Though the IV is not secret, it is critical to use a different IV for each encryption step. If the algorithm reuses an IV for an encryption operation, it could allow an attacker to decrypt the ciphertext, even if they do not know the secret key.

Here is a simpler analogy:

• Imagine that you are encoding a message using a secret code. You start the encryption process by writing down a random word: this is the IV
• Re-encrypting the same message with a different random word produces different ciphertext. This is because the random word changes the encryption starting point
• However, if you encrypt your message using an old IV, we will get a similar ciphertext to that of previous operations, which gives attackers an opening to inspect and decode the contents of the message

Salts

A salt is a random string of characters that is added to a password before it is hashed. This helps to protect the password from being cracked, even if the attacker has a list of pre-computed hashes, such as a rainbow table.

When a user creates a password, the website or application generates a random salt and adds it to the password before hashing it. The server then stores the salt and the hashed password in the database.

Moreover, salts are important because they make it much trickier to crack passwords. Even if an attacker has a list of precomputed hashes, they will not be able to crack the passwords unless they also have the salts. This is because salts change function output, making the same hashed password differ.

In the next section of this article, we will explore some of the most used React Native encryption libraries.

Expo SecureStore

Introduced by the Expo team, SecureStore is a library that allows developers to encrypt and store key-value pairs in device storage.

To use Expo SecureStore, first install in your project:

# note, if you are building a React Native app, 
#make sure you have Expo libraries installed  
npx expo install expo-secure-store

The code below uses SecureStore to encrypt, save, and retrieve data from storage:

import React, { useEffect, useState } from "react";
import { Text, View } from "react-native";
import * as SecureStore from "expo-secure-store";

//first store the data in the encrypted database using a key:
async function storeData() {
  await SecureStore.setItemAsync(
    "encryption_message_expo",
    "This message was encrypted using Expo Secure store"
  );
}

//now retrieve it with the given key:
async function retrieveData() {
  const result = await SecureStore.getItemAsync("encryption_message_expo");
  if (result) {
    return result;
  }
  alert("The value could not be saved");

}
export default function ExpoSecureStore() {
  const [obtainedData, setObtainedData] = useState("");
  const performEncryption = async () => {
    await storeData();
    const data = await retrieveData();
    setObtainedData(data);
  };

  //when component is first mounted, save and retrieve the value:
  useEffect(() => {
    performEncryption();
  }, []);

  //now display it:
  return (
    <View>
      <Text style={{ fontSize: 15 }}>
        Encrypted value for 'encryption_message_expo':
      </Text>
      <Text style={{ fontSize: 20 }}> {obtainedData}</Text>
    </View>
  );
}

To run this app, run this terminal command:

npm run start 

Pros and cons of SecureStore

Here are some reasons why you would want to use this technology in your project:

• Supported by Expo, which means that a large team actively works on updating and optimizing the library
• Clear and understandable documentation
• Easy to use
• Updated regularly
• Supports constants to ensure that data is only unencrypted in specific situations, for example, if a device has been unlocked

However, there are a couple of drawbacks:

• Each key-value pair can be up to 2MB in size. As a result, you can’t save large files or data in encrypted storage
• No support for custom Hooks

React Native MMKV Storage

React Native MMKV Storage is another alternative that aids in saving data locally. Although the saved data is unencrypted by default, the library makes it easy to switch to secure storage.

As a first step, integrate react-native-mmkv-storage in your Expo project like so:

npx expo install react-native-mmkv-storage
npx expo prebuild #generate native code

Then, in your project, create a blank file called useStorage.js. Here, write the following code:

// file name: useStorage.js. This file will hold our custom Hook 
// this hook will encrypt, save and retrieve our data.
import { MMKVLoader, useMMKVStorage } from "react-native-mmkv-storage";

//create a db. The 'withEncryption' function encrypts the database.
const MMKV = new MMKVLoader().withEncryption().initialize();

export const useStorage = (key, defaultValue) => {
  //our custom hook will get and store data:
  const [value, setValue] = useMMKVStorage(key, MMKV, defaultValue);
  return [value, setValue];
};

The code snippet below demonstrates our custom Hook in action:

import { View, Text } from "react-native";
import { useStorage } from "./useStorage"; //import the Hook

export default function ReactNativeMMKVStorage() {
    //access the database and set a field called 'user'. It's default value will be 'LoRocket'.
  const [data, setData] = useStorage("user", "LogRocket");

  return (
    <View>
      <Text>value for user in MMKV {data}</Text>
    </View>
  );
}

Pros and cons of React Native MMKV Storage

Here are some factors that make it suitable for your next project:

• Uses JSI modules, which make it performant
• Small and lightweight
• Clear, concise documentation
• Supports custom Hooks
• Updated regularly

However, there is one thing I would like to point out: later updates have brought in breaking changes. This means that you cannot use recent versions of this library without upgrading your project’s React Native version.

React Native Keychain

Built by reputed developer Oblador, React Native Keychain allows developers to securely store credentials in their apps. Unlike other libraries mentioned in this article, Keychain has built-in support for Apple’s FaceID.

Run this terminal command to install react-native-keychain in your project:

npm install react-native-keychain

The block of code below shows the basic usage of React Native Keychain:

import { useEffect, useState } from "react";
import { View, Text } from "react-native";
import * as Keychain from "react-native-keychain";

async function saveCredentials() {
  const username = "LogRocketName";
  const password = "LogPassword";
  //save credentials to database
  await Keychain.setGenericPassword(username, password);
}

async function getCredentials() {
  //now retrieve credentials
  const credentials = await Keychain.getGenericPassword();
  return credentials;
}

export default function ReactNativeKeychain() {
  const [unencryptedData, setUnencryptedData] = useState({});

  const performEncryption = async () => {
    saveCredentials();
    const data = await getCredentials();
    setUnencryptedData(data);
  };

  useEffect(() => {
    performEncryption();
  }, []);
//finally, display user data:
  return (
    <View>
      <Text>Your username is: {unencryptedData.username}</Text>
      <Text>Password is: {unencryptedData.password}</Text>
    </View>
  );
}

Pros and cons of React Native Keychain

There are a few things I loved about it:

• Updated frequently
• Has support for biometrics, such as FaceID or fingerprints
• Just like Expo’s SecureStore, it also has support for access control. This means that the library can also decode data in specific circumstances
• Great documentation

However, there was one major flaw: Keychain is only geared towards storing credentials, not key-value pairs.

React Native Encrypted Storage (RNES)

RNES uses platform-native cryptography tools to encrypt and store sensitive data.

To install react-native-encrypted-storage in your app:

npm install react-native-encrypted-storage

This code snippet shows sample usage of the library:

import EncryptedStorage from "react-native-encrypted-storage";
//some of the code removed for brevity purposes
const [textData, setTextData] = useState(null);

//first, save an item to the encrypted DB
async function storeUserSession() {
  try {
    await EncryptedStorage.setItem("user_name", "LogRocket");
  } catch (error) {
    console.log("An error occurred! ", error);
  }
}

//now try to retrieve this item:
async function retrieveUserSession() {
  try {
    const session = await EncryptedStorage.getItem("user_name");
    //if item is found, then store it in a state variable
    if (session !== undefined) {
      setTextData(session);
    }
  } catch (error) {
    console.log(error);
  }
}

const performEncryption = async () => {
  await storeUserSession();
  await retrieveUserSession();
};

//on first mount, save and retrieve the user_name item:
useEffect(() => {
  performEncryption();
}, []);

return (
  <View>
    <Text>Encrypted stored value for 'user_name': {textData}</Text>
    <StatusBar style="auto" />
  </View>
);

Pros and cons of RNES

RNES might be a great fit for your project for these reasons:

• Provides an asynchronous interface for encryption
• A secure alternative to async storage

However, one major flaw of this library is that the project is not frequently updated. As a result, this can introduce bugs and dependency conflicts in the future.

Conclusion

In this article, you learned about the basics of RSA encryption, IVs, and salts. We also explored some trustworthy security libraries for React Native.

In my projects, I use React Native Keychain. This is because it is feature-rich and has excellent community support.

Thank you so much for reading!