Photo by NeONBRAND on Unsplash

React Native Secure Storage (rn-secure-storage)

Secure Storage for React Native (Android & iOS)

https://github.com/talut/rn-secure-storage

Almost 3 months later I’m publising a new package. I developing apps with “React Native” at work, also I’m working with Android apps too. After 9 months React Native is became my favourite framework for developing apps.
Of course with in these times, I needed a lot of different packages.

Some packages has a lot of beautiful feature with a lot of benefits. Like react-native-vector-icons or react-native-maps but with this benefits, also some packages has some lacks. They’re good but a little problem is blocking everything.
Like react-native-keychain this package has a lot contributors and a lot of solved issues. Also that package written by Joel Arvidsson , which he is the publisher of react-native-vector-icons. But that package only storing username and password.

Photo by Markus Spiske on Unsplash

So that wasn’t good for my app. So I start to looking different packages and different ideas. But none of them didn’t help me. And I wrote my own package. But before then I was never wrote a full native package. Yes, I used native modules and other things but I never wrote/publish full native package.

I start reviewing some published packages on npm/github. And wrote an Android native modules. But this isn’t worked with npm publish. And I start searching again. And I found a post written by @Adrian Hall : Creating a React Native Bridge Library , this post was referencing to this npm packages react-native-create-library which is good for me because only one command I created a library and then I only write native parts and some JS codes.

Android

At Android there is no tools to equals IOS Keychain. After API 18 it’s supporting Keystore, but that’s not exact same of Keychain but it’s secure, BTW some Keystore API was deprecated. So KeyStore can only supporting to after the API 23. That’s means below the API 23 we need something different. Yes we can store key & values at directly in SharedPreferences but this isn’t safe. I’m using secure-preferences, this Android package is storing data encrypted in SharedPreferences, yes that’s not secure as KeyStore but it’s working good. Facebook also has a secure storage package for Android https://github.com/facebook/conceal

IOS

Actually I really not know much about IOS, I’m an Android user for years. Because of this the IOS parts wasn’t written fully by me. IOS part was helped by my coworker https://github.com/cagriyilmaz

I tried square/Valet for keychain but that’s not worked wel. I copied IOS part from pradeep1991singh/react-native-secure-key-store. (thanks)

How to use?

This package has a really simple usage.
First of all, you must do same things like other packages.

With NPM

npm install --save rn-secure-storage

With YARN

yarn add rn-secure-storage

Automatic linking

react-native link rn-secure-storage

Manual Installation

You can see manual linking from here: Manual Installation (If something went wrong with react-native link)

Usage

import RNSecureStorage, { ACCESSIBLE } from 'rn-secure-storage'

SET a Key & Value

// {accessible: ACCESSIBLE.WHEN_UNLOCKED} -> This for IOS
RNSecureStorage.set("key1", "this is a value", {accessible: ACCESSIBLE.WHEN_UNLOCKED})
.then((res) => {
console.log(res);
}, (err) => {
console.log(err);
});

GET a value with key

RNSecureStorage.get("key1").then((value) => {
console.log(value) // Will return direct value
}).catch((err) => {
console.log(err)
})

REMOVE a value with key

RNSecureStorage.remove("key1").then((val) => {
console.log(val)
}).catch((err) => {
console.log(err)
});

If you wonder why we’re using Promise you can see from here : https://facebook.github.io/react-native/docs/native-modules-ios#promises

Options

Please look at the README.md for options.

Keychain.ACCESSIBLE enum

If you are wondering what other `ACCESSIBLE` options click here : https://github.com/talut/rn-secure-storage#keychainaccessible-enum

Example App

I wrote an example app for usage. If you try this commands, they’re will help you.

git clone https://github.com/talut/rn-secure-package
cd rn-secure-package/example
npm install
react-native run-ios/android

Some answers for some thoughts

If you have any questions about this package this F.A.Q will help you. 😐

p.s

Because of #hacktoberfest I opened an issue about translation of README.md right now package README.md has 6 languages translation support.

Many thanks for these translations. 😍

French , Indonesia , German , Dutch , Brazilian Portuguese

My other packages for React Native

talut/react-native-pin-view

talut/react-native-simple-card-view

Feel free for contribution, thank you for reading.