What is react-native-keychain?
The react-native-keychain package provides a secure way to store and retrieve sensitive information such as passwords, tokens, and other credentials in a React Native application. It leverages the native keychain services on iOS and the Keystore system on Android to ensure data is stored securely.
What are react-native-keychain's main functionalities?
Storing Credentials
This feature allows you to securely store a username and password in the device's keychain or keystore.
import * as Keychain from 'react-native-keychain';
async function saveCredentials(username, password) {
await Keychain.setGenericPassword(username, password);
}
Retrieving Credentials
This feature allows you to retrieve stored credentials from the device's keychain or keystore.
import * as Keychain from 'react-native-keychain';
async function getCredentials() {
const credentials = await Keychain.getGenericPassword();
if (credentials) {
console.log('Credentials successfully loaded for user ' + credentials.username);
} else {
console.log('No credentials stored');
}
}
Resetting Credentials
This feature allows you to reset or delete the stored credentials from the device's keychain or keystore.
import * as Keychain from 'react-native-keychain';
async function resetCredentials() {
await Keychain.resetGenericPassword();
}
Storing Internet Credentials
This feature allows you to securely store internet credentials (e.g., server, username, password) in the device's keychain or keystore.
import * as Keychain from 'react-native-keychain';
async function saveInternetCredentials(server, username, password) {
await Keychain.setInternetCredentials(server, username, password);
}
Retrieving Internet Credentials
This feature allows you to retrieve stored internet credentials from the device's keychain or keystore.
import * as Keychain from 'react-native-keychain';
async function getInternetCredentials(server) {
const credentials = await Keychain.getInternetCredentials(server);
if (credentials) {
console.log('Internet credentials successfully loaded for server ' + server);
} else {
console.log('No internet credentials stored for server ' + server);
}
}
Other packages similar to react-native-keychain
react-native-sensitive-info
react-native-sensitive-info is another package that provides secure storage for sensitive information in React Native applications. It supports storing data in the Android Keystore and iOS Keychain, similar to react-native-keychain. However, it also offers additional features like encryption and the ability to store data in shared preferences or user defaults.
react-native-secure-storage
react-native-secure-storage is a package that provides secure storage for sensitive data in React Native applications. It uses the Android Keystore and iOS Keychain for secure storage, similar to react-native-keychain. It also supports encryption and offers a simple API for storing and retrieving data.
react-native-encrypted-storage
react-native-encrypted-storage is a package that provides secure and encrypted storage for sensitive data in React Native applications. It uses the Android Keystore and iOS Keychain for secure storage, similar to react-native-keychain. It also offers encryption and decryption of data, ensuring that sensitive information is stored securely.
react-native-keychain
Keychain Access for React Native
Currently functionality is limited to just storing internet and generic passwords.
❗ Enable Keychain Sharing
entitlement for iOS 10
For iOS 10 you'll need to enable the Keychain Sharing
entitlement in the Capabilities
section of your build target. (See screenshot). Otherwise you'll experience the error shown below.
Error: {
code = "-34018";
domain = NSOSStatusErrorDomain;
message = "The operation couldn\U2019t be completed. (OSStatus error -34018.)";
}
Installation
$ npm install --save react-native-keychain
Option: Manually
- Right click on Libraries, select Add files to "…" and select
node_modules/react-native-keychain/RNKeychain.xcodeproj
- Select your project and under Build Phases -> Link Binary With Libraries, press the + and select
libRNKeychain.a
.
Add the following to your Podfile
and run pod update
:
pod 'RNKeychain', :path => 'node_modules/react-native-keychain'
Option: With react-native link
$ react-native link
Usage
See KeychainExample
for fully working project example.
import * as Keychain from 'react-native-keychain';
const username = 'zuck';
const password = 'poniesRgr8';
Keychain
.setGenericPassword(username, password)
.then(function() {
console.log('Credentials saved successfully!');
});
Keychain
.getGenericPassword()
.then(function(credentials) {
console.log('Credentials successfully loaded for user ' + credentials.username);
}).catch(function(error) {
console.log('Keychain couldn\'t be accessed! Maybe no value set?', error);
});
Keychain
.resetGenericPassword()
.then(function() {
console.log('Credentials successfully deleted');
});
const server = 'http://facebook.com';
Keychain
.setInternetCredentials(server, username, password)
.then(function() {
console.log('Credentials saved successfully!');
});
Keychain
.getInternetCredentials(server)
.then(function(credentials) {
if (credentials) {
console.log('Credentials successfully loaded for user ' + credentials.username);
}
});
Keychain
.resetInternetCredentials(server)
.then(function() {
console.log('Credentials successfully deleted');
});
Keychain
.requestSharedWebCredentials()
.then(function(credentials) {
if (credentials) {
console.log('Shared web credentials successfully loaded for user ' + credentials.username);
}
})
Keychain
.setSharedWebCredentials(server, username, password)
.then(function() {
console.log('Shared web credentials saved successfully!');
})
Android
Option: With react-native link
$ react-native link
and check MainApplication.java to verify the package was added.
- Note: Android support requires React Native 0.19 or later
- on Android, the
setInternetCredentials(server, username, password)
call will be resolved as call to setGenericPassword(username, password, server)
and the data will be saved in SharedPreferences
, encrypted using Facebook conceal. Use the server
argument to distinguish between multiple entries.
Option: Manually
-
Edit android/settings.gradle
to look like this (without the +):
rootProject.name = 'MyApp'
include ':app'
+ include ':react-native-keychain'
+ project(':react-native-keychain').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keychain/android')
-
Edit android/app/build.gradle
(note: app folder) to look like this:
apply plugin: 'com.android.application'
android {
...
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.facebook.react:react-native:0.19.+'
+ compile project(':react-native-keychain')
}
-
Edit your MainApplication.java
(deep in android/app/src/main/java/...
) to look like this (note two places to edit):
package com.myapp;
+ import com.oblador.keychain.KeychainPackage;
....
public class MainActivity extends extends ReactActivity {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
+ new KeychainPackage()
);
}
...
}
License
MIT © Joel Arvidsson 2016-2017