How To Build A Secure Mobile Application With React Native

React Native App 

Source Code Security 

• Minification and Obfuscation
It is a powerful method for code security that makes your application code unreadable to human eyes. Uglify is a popular obfuscation library that can convert multi-line source code to the simplest form and is unreadable to users.

• Jscrambler
Jscrambler service enables advanced JavaScript obfuscation and protection; it transforms your JScode into a form that has protection against reverse-engineering. This service is based on automated static analysis attacks and provides a number of security layers for code protection, including: 

• Hermes 
Hermes was unravelled in React Native 0.60.1 by Facebook, as a new JS Engine for mobile apps. Now, you can use it only with Android. In react native 0.60.4, you can use it by setting enableHermes flag in build.gradle. 

Server Connection Security 

Storage Security

const encrypt = (text: string) => {
  const textBytes = aes.utils.utf8.toBytes(text);
  const aesCtr = new aes.ModeOfOperation.ctr(aes256key);
  const encryptedBytes = aesCtr.encrypt(textBytes);
  const encryptedHex = aes.utils.hex.fromBytes(encryptedBytes);
  return encryptedHex;
};
Encrypting SecureStorage item
let aes256key: ?Array<number>;
sha256([brand, deviceId, ...otherIds].join('')).then(
  (hash: string) => {
    aes256key = Array.from(
      Array.from(hash)
        .map((c, i) => (i % 2 ? c : null))
        .filter(Boolean)
        .map(c => c.charCodeAt(0))
    );
  }
);

export async function setItem(key: string, value: string) {
  try {
    return Keychain.setGenericPassword(key, encrypt(value), {
      service: `${BUNDLE_ID}.${key}`,
    });
  } catch (error) {
    Logger.warn(error.message);
    return null;
  }
}

Here are some plugins you can use for local storage security of React Native application : 

1. RN KeyChain: It enables access to Keychain for iOS, Key store for Android application, and conceal. Supports biometric authentication, and storage of username & Pass.
2. React Native Sensitive Info: Similar to RN KeyChain and based on Keychain and shared preferences for data storage. It allows you to store multiple key-value parts. 
3. RN Security Storage: Similar to React Native Sensitive Info and provide multiple key-value pair storage via Keystore and Keychain 

JavaScript Vulnerabilities You Shouldn't Miss Out. 

What Else Must You Know?

1. Learn about security problems and issues your application poses, their scope and risk. There are chances the vulnerable code can be not useful within the project, and you can remove or replace. If you can't get a complete picture of risk, it is better to seek an expert's assistance. 
2. Jot down the issue and share with the team (ensure proper documentation), update or replace dependency on predefined time. 
3. Figure out the degree of dependency eradication urgency with your security team and work on the update. 
4.  Ensure to set time for the team to deal with risks. 

Wrapping UP