This content originally appeared on Level Up Coding - Medium and was authored by Sara Khan
With the growth of using React Native cross-platform app development framework for various mobile app development solutions, the core focus of businesses is on using the one codebase for two separate applications, faster development, and advantages of JavaScript.
But, have you ever thought about how secure it is to store your app credentials in it?
So here we shed some light on React Native App’s security, explaining how to React Native keychains help you keep your app credentials secure in the app along with some risks and threats that you need to address while planning to develop an application with React Native.
Here are the highlights of the blog at the glance:
- Should You Trust React Native Platform for App Development?
- React Native Key Chains: A Single Point of Success
- React-Native-KeyChain: How to Use It In Mobile Apps?
- Understanding the Risks and Benefits Associated With React-Native-KeyChain
- Conclusion: Be Ready To React!
Let’s explore each point in detail for better understanding:
1. Should You Trust React Native Platform for App Development?
In this highly competitive market where already 5.5 million applications are flooded in the app store, creating a mobile application is not just left with an idea about choosing the best app development framework or stuffing it with amazing navigation and functionality features.
The central concern of app development is revolving around the security of the app data. When the data is really sensitive, any security breach can lead to irreversible damage.
“According to the survey, 5.91 million people are using various applications and spending 90% of their mobile time on the application. Despite being a major revenue-generating asset, many organisations often overlook the basic security measures. During a pandemic, when 90% of employees are forced to work from home with remote access, it has been observed that nearly 11 million files are open to access by anyone. And out of these 11 million files, 1000+ files are sensitive finance-related files.“
Let’s Go With Financing!
The problem actually came to the light when they decided to build a financial app with React Native right from the scratch, including a GraphQL server that would support it. Despite everything and the delightful UX of the app, the biggest challenge that comes upfront was indeed securing the app and its conditionals.
From there the question arises, whether hiring a top React Native App development company is really a trustworthy platform for the app development?
Let’s understand!
If the truth to be told, React Native is an open-source app development framework created by Facebook. While developing apps for iOS and Android, developers trust the functionality provided by the iOS and Android systems, their libraries, and their hardware. And developing an app with React Native means, developers should have trust in its libraries and APIs as well.
And did you know that by default, the local storage mechanism in React Native is Unencrypted…
On iOS, the main storage library for React Native is based on the Apple File System, using Filemanager to read and store files on the device unencrypted.
On Android, AsyncStorage uses either the key-value store RocksDB or SQLite based on the availability. But, data remains unencrypted there.
So what is the potential way to secure your sensitive data in React Native applications… Let’s get an answer to this point!
2. React Native Key-chains: A Single Point of Success
While we are talking about the security of the app, it is directly concerned with user authentication as well. And there are multiple strategies to deal with these security issues, but the most common methods are:
- Using an Identity Provider that supports OpenID Connect Code Grant Flow. This helps your mobile app in receiving a refresh token to retrieve new access tokens to invoke the API.
- Directly storing the sensitive data in the app using a keychain after authentication for re-authentication.
So the first thing that you need to keep in mind while using React Native Application, not to store sensitive data or any key in your app codebase. Because anything included in the codebase could be accessed in plain text by inspecting the app bundle. So that’s where keychain and Keystore come into the role to store secure data. Both are abstracted away and nicely encapsulated by the powerful library React Native Keychain. — STATEMENT (i)
Let this statement (i) on hold, and come to the next point!
Is react native library the only option to secure your app data? The simple answer to this question is NO!
There is an alternative to everything. But for both iOS and Android, we recommend you to use:
- iOS Keychain Services
- Android Secure Shared preferences
Let’s understand it in depth!
iOS Keychain Services: SecureStore uses a keychain to store the data in iOS. KeyChain is encrypted system storage that stays longer across app reinstalls. The best part about using the keychain is, it supports hardware-backed encryption with Secure Enclave starting with iPhone 5s. In other words, you can also interpret it as, devices running the two latest iOS versions (iOS 13 and 14), support hardware-backed encryption mechanisms. Otherwise, the keychain gets decrypted when the device is unlocked with a passcode or just by pressing the home button.
Android Secure Shared Preferences: When it comes to securing the credentials of the app on an Android device, things are different to handle. SecureStore stores the data in SharedPreferences, providing a way to encrypt it using Android KeyStore. Since there are multiple versions of Android devices, and there are chances that your app may run on the one that may not support a hardware-backed KeyStore. Values stored this way are decrypted on-demand as SharedPreferences storage is not constant across app reinstalls.
In a Nutshell: To use these two services, you can either write a bridge by yourself or more quickly you can use libraries. react-native-keychain, react-native-secure-storage and react-native-sensitive-info are the few best options to look for to secure the app data.
Coming to the STATEMENT — (I), With the reference of this graph showing the statistical analysis for downloads for three packages over the last 6 months that React-Native-Keychain is the most downloaded library as it contains everything that any developer is looking for.
3. React-Native-KeyChain: How to Use It In Mobile Apps?
Only knowing the best way-outs will not help you protect your sensitive data in a mobile app until you don’t know how to implement it in a mobile app.
So let’s start learning with the installation process of react-native-keychain in the react-native project.
Step 1: Installing Packages
Installing react-native-keychain is as straightforward as installing any of the NPM packages. But you can ask the mobile app development company to use both npm or yarn to install the package.
npm i react-native-keychain
yarn add react-native-keychain
In case, if you are using React-Native version 0.59 or less, you are advised to run the below command to link your library with React Native.
react-native link react-native-keychain
But, keep in mind things always vary between iOS and Android devices. So if you have hired a mobile app developer for developing iOS, then run pos install in iOS/ directory to install iOS dependencies. Finally, recreate the application.
Then, by using the library’s default APIs, you can now access the iOS keychain and Android Secure SharedPreferences further…
Pro Tip: When you are using the react-native-keychain, it’s important to note that only specific methods are compatible with iOS and Android. But, here are a few specific approaches that you can use in both Android and iOS:
In addition, you can also use some of the platform-specific features if you have any advanced requirements related to authentication.
Step 2: Using The Library in Practice
Using the library in practice in regard to how to store, retrieve, and use credentials for re-login to an app.
Let’s start with saving credentials…
- Save Credentials
In keychain, most of the developers prefer using setGenericPassword that function to store user credentials (Username and password) in Keychain. In addition, it is recommended to use JSON.stringify, so strings can be stored using setGenericPassword function.
- Retrieve Credentials
Even to retrieve credentials, you can use the same function getGenericPassword to obtain the saved user credentials from the Keychain. And by default, this function returns the string. All you need to retrieve objects is to use JSON.parse.
Here are the commands that mobile app development companies in UAE, prefer using while retrieving credentials from the app.
- Using in a Real-World Applications
In the following code snippet, firstly the “checkUserStatus()” function will be called within the useEffect hook during the component mount and set user credentials by retrieving them by the Keystore. Then it comes to the “login()”, this function will be used to log in to the user using obtained credentials.
- Removing Credentials
Whether you are doing it this own or hiring a mobile app developer for the task, by using the function of resetGenricPassword, you can remove all Keychain credentials in a scenario where users are logging out from the app.
All these 4 steps of using the react-native-keychain library in the application are explained and drafted in a very simple and sorted manner so that all levels of programmers can easily gulp it without any error. Now the question is, what are the benefits and risks concerned with this procedure…
Understanding the Risks and Benefits Associated With React-Native-KeyChain
While everything comes up with its pitfalls and benefits and while talking about the security of app data, you must be extra conscious about using any library as well.
- Major Risk of Using the React-Native-KeyChain in Android Development
So if you are using the react-native-keychain in Android development, keep in mind that SharedPreferences are not 100% secured to use. It is safe enough from storing your data but never recommended for storing key-value pairs.
Let’s understand how storing files with React-Native-Keychain in Android devices can be leaky!
SharePreferences are stored in a file and if the developer roots the phone and manages to mount its file system, then anyone can easily read the preferences. In that case, the only solution left for them is using Conceal to seal the preferences. This function handles the encryption and decryption of what is stored on rooted devices. But despite all these practices, data will not be 100% secure because the key is present locally.
Secondly, the SharedPrefsBackedKeyChain is used in data encryption and this approach is storing 256-bit encryption keys in the SharedPreferences.
So the problem is, encryption keys and encrypted data are stored in the same place which makes encryption totally pointless here. Still, you can choose to hire an app developer to find the perfect solution for this.
But the good news is, on the newer devices, all the encryption keys are stored on the hardware level rather than the inside of the app itself which ultimately increase the protection.
- Benefits of Using React-Native-Keychain in iOS And Android
The biggest advantage of using React-Native Keychain is, with one library you will have access to both iOS Keychain and Android Keystore in React Native apps.
Apart, there are many other reasons as well that make this library popular for securing sensitive data in iOS and Android Apps:
- To access the keychain, the device must be unlocked.
- Restoring the keychain to another device is restricted.
- In newer devices, the encryption keys are already stored on the hardware level.
Conclusion: Ready to React!
No doubt react native app development solutions have become the top priority among startups and leading entrepreneurs, but at the same time, you can’t overlook the fact of data security.
Based on my experience with react native app development, using a powerful library of react-native-keychain is the best option to store credentials of the app securely.
In case, if you have any doubts in your mind, then by hiring a mobile app development company, applications written with react native can be well protected. However, adding this security keychain to your app can add up its own cost and time.
But to make your app highly secured and protected, you need to follow the best practices of the app development lifecycle by defining its possible risk, plan your security controls and get prepared for the remediation strategy. So before you invest your time in building an application with a lack of security, it is worth going through this blog to understand how react-native-keychains can help you to store credentials securely.
Securing Sensitive Mobile App Data By Using React Native Keychain was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Sara Khan
Sara Khan | Sciencx (2021-04-13T13:20:58+00:00) Securing Sensitive Mobile App Data By Using React Native Keychain. Retrieved from https://www.scien.cx/2021/04/13/securing-sensitive-mobile-app-data-by-using-react-native-keychain/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.