React Native Bulletproof Redux Provider

Encrypted Redux Provider wrapper for React Native based on AsyncStorage, react-native-keychain and react-native-securerandom.

Under the hood, it uses redux-persist and redux-persist-transform-encrypt for persistence and encryption.

Why ?

By default, the local storage mechanism in React Native (AsyncStorage) is unencrypted. So we're adding a wrapper around it to make it more bulletproof.

A random key is generated at runtime using react-native-securerandom on the user's device and permanently stored using the react-native-keychain module. That key is used to encrypt our Redux store, so nobody from outside can read that data.

For a more extensive explanation on how this works, check out the blog post I wrote about this approach.

Installation

$ yarn add react-native-bulletproof-redux-provider
$ yarn add @react-native-async-storage/async-storage react-native-keychain react-native-securerandom

OR

$ npm install react-native-bulletproof-redux-provider
$ npm install @react-native-async-storage/async-storage react-native-keychain react-native-securerandom

$ cd ios && pod install

Usage

import Provider from 'react-native-bulletproof-redux-provider';

Now simply pass in your initialState and rootReducer:

<Provider
  initialState={...}
  rootReducer={...}>
    // your app
</Provider>

After wrapping your app inside of Provider you can use the usual React bindings to access the store from your components.

Props

| Property | Description | Default value | | ------------------------------ | ----------------------------------------------------------------------------------- | ------------------------- | | rootReducer | Redux reducer used in the store configuration | none | | initialState | Initial Redux reducer state | none | | getEncryptionKey (optional) | Custom encryption key method, check types/getEncryptionKeyType for interface | getEncryptionKeyDefault | | configureStore (optional) | Custom configureStore method, check types/configureStore for interface | configureStoreDefault | | encryptionErrorCb (optional) | Gets called when encryption fails, can be used to show an error message to the user | none |

Todos

• [ ] Unit and component tests
• [ ] Allow passing in additional middleware array to configureStore function
• [ ] Allow passing in additional transforms array to createPersistenceConfig function
• [ ] Allow passing in key to createPersistenceConfig function (defaults to root)
• [ ] Allow defining encryptionKey (username) to getEncryptionKey function (defaults to ENCRYPTED_REDUX)
• [x] Optional callback function when encryption error occurs in StoreGate
• [ ] Make compatible with redux-toolkit

License

MIT