When developing mobile apps, security is one of the most important considerations. Furthermore, user authentication is at the core of security. As a result, there are several user authentication mechanisms available to meet various security needs.
React Native, being a mobile app development framework, we need to ensure that we provide the user with the sense of security when saving their credentials for future use. Saving user credentials can be done in React Native using AsyncStorage, but here the main disadvantage would be the fact that AsyncStorage is insecure and can be read by anyone with access to device storage.
The issue of how to save credentials securely in React Native then arises.
For this, today we will be using the react-native-keychain library. This library acts as a bridge for iOS Keychain service and Android Secure Shared Preferences, which are used to save data securely in iOS and Android respectively. Hence, using this single library, we will be able to securely store credentials for both iOS and Android devices.
Now let's look at how to use this library.
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
Similar to installing any other npm package, installing react-native-keychain is simple. The package can be installed using either npm or yarn.
or
yarn add react-native-keychain
Run the command below to link your library with React-Native if you are using React-Native 0.59 or an earlier version.
Install iOS dependencies when developing for iOS by running pod install in the ios/ directory. Rebuild the application at the end.
Using the library in practice
This example demonstrates how to save, retrieve, and use login information for logging back into an app.
We will be using the below-mentioned three functions to save, retrieve and use login information:
- setGenericPassword
- getGenericPassword
- resetGenericPassword
Let us look at these functions one by one:
setGenericPassword
This function is used to save credentials (username and password) to the Keychain.
const LoginScreen = props => {
const username = 'Shubham';
const password = 'tellNoOne';
await Keychain.setGenericPassword(username, password);
}
getGenericPassword
This function is used to retrieve the saves credentials (username and password) from the Keychain.
const LoginScreen = props => {
const getUserCredetials = async () => {
try {
const credentials = await Keychain.getGenericPassword();
resetGenericPassword
The function resetGenericPassword can remove all Keychain credentials in a scenario where users are logging out from the app.
const LoginScreen = props => {
const removeCredentials = async () => {
try {
const credentials = await Keychain.resetGenericPassword();
} catch (error) {
console.log('Keychain couldn\'t be accessed!', error);
}
}
}
Note: It's vital to keep in mind that only specified methods of react-native-keychain work with iOS or Android. The ones we used in this article can be used on both iOS and Android, though. To check various methods compatible with iOS and Android, you can check the library home page.
I have found that the best method for storing credentials in mobile React-Native apps is to use a react-native-keychain. The biggest benefit, as far as I can tell, is the use of the already-existing iOS Keychain and Android shared preferences.
It is simpler to use the library and implement storing credentials for your React-Native.
I hope most of you find the strategy discussed here to be useful. Thank you for reading, and feel free to ask any questions in the comments section below.
0 Comments