🔑 Keychain Access for React Native
Go to file
Vojtech Novak 7e3b8642bd Update KeychainModule.java 2016-12-11 16:30:50 +01:00
KeychainExample Update example to RN 0.36 & ES 2016 2016-11-02 21:58:27 +01:00
RNKeychain.xcodeproj Added project structure. 2015-05-20 18:23:04 +02:00
RNKeychainManager Added generic password support. 2015-05-29 18:25:56 +02:00
android Update KeychainModule.java 2016-12-11 16:30:50 +01:00
typings Add Typescript definitions and adapt callback interface fixed to match de facto usage (#38) 2016-10-27 10:58:02 +02:00
.editorconfig Added first implementation. 2015-05-20 20:39:52 +02:00
.flowconfig Added Android support w/ Facebook Conceal (#19) 2016-06-01 00:25:51 +02:00
.gitignore Added project structure. 2015-05-20 18:23:04 +02:00
.npmignore Removes KeychainExample from npm #15 2016-01-19 11:17:53 -06:00
LICENSE Initial commit 2015-05-20 17:33:48 +02:00
README.md Add a note about iOS 10 keychain sharing entitlement to the README (#33) 2016-09-18 16:30:07 +02:00
RNKeychain.podspec Makes podspec use version from package.json. 2016-06-02 22:40:16 +02:00
index.js Refactor to es2016 2016-11-04 11:42:12 +01:00
package.json Add Typescript definitions and adapt callback interface fixed to match de facto usage (#38) 2016-10-27 10:58:02 +02:00

README.md

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.

screen shot 2016-09-16 at 20 56 33

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.

Option: With CocoaPods

Add the following to your Podfile and run pod update:

pod 'RNKeychain', :path => 'node_modules/react-native-keychain'

$ react-native link

Usage

See KeychainExample for fully working project example.

var Keychain = require('react-native-keychain');

var username = 'zuck';
var password = 'poniesRgr8';

// Generic Password, service argument optional
Keychain
  .setGenericPassword(username, password)
  .then(function() {
    console.log('Credentials saved successfully!');
  });

// service argument optional
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);
  });

// service argument optional
Keychain
  .resetGenericPassword()
  .then(function() {
    console.log('Credentials successfully deleted');
  });

// Internet Password, server argument required
var server = 'http://facebook.com';
Keychain
  .setInternetCredentials(server, username, password)
  .then(function() {
    console.log('Credentials saved successfully!');
  });

Keychain
  .getInternetCredentials(server)
  .then(function(credentials) {
    console.log('Credentials successfully loaded for user ' + credentials.username);
  });

Keychain
  .resetInternetCredentials(server)
  .then(function() {
    console.log('Credentials successfully deleted');
  });

Android

$ 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 MainActivity.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()
          );
      }
      ...
    }
    

Todo

  • iOS support
  • Android support
  • Storing objects as JSON
  • Expose wider selection of underlying native APIs

License

MIT © Joel Arvidsson 2016