What is the best way to store private data in react-native?

Question

How can i implement feature like remember me when authenticating via react application? I think unencrypted AsyncStorage isn't the best way to do it, because data is open for users. I've tried to use realm, but stuck into problem that cannot be resolved in android using expo to test application. It says that i need to compile native code for android and edit that (Add realm object creation in MainApplication.js). I don't want to compile my project while it's not released yet. How does instagram and the other RN-apps store authentication data? What is the best approach?

Anachronous

Answer 1

What is the best way to store private data in react-native?

I would recommend using a library like react-native-keychain to store private data in react-native

You can use it like that:

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

I hope my answer was helpful 😊

Militate

I've seen this package. But installation of it uses native ios and android code, but not any JS api – Anachronous

@Herrgott Yes it use native code for technical reasons – Militate

i thought that native code using only in production. But i still didn't make react-native upgrade. And i partially solved this problem with using react-native-sqlite-storage and my own written CRUD-library – Anachronous

Answer 2

Expo.SecureStore provides a way to encrypt and securely store key–value pairs locally on the device.

Use SecureStore.setItemAsync(key, value, options) to store and SecureStore.getItemAsync(key, options) to retrieve data.

Documentation: https://docs.expo.io/versions/latest/sdk/securestore

Oreilly

Answer 3

You can use the simply storage of react-native to save the pair key=>value, the next class in TypeScript can help you:

export class MyStorage {

     handler: Storage;

    constructor(){
        this.handler = require('react-native-local-storage');
    }

    public saveData(key: string, value: string){
        this.handler.save(key,value).then(() => {
            this.handler.get(key).then((data) => {console.log("get: ", data)});

          })
    }

    public getData(key: string) : Promise<any> {        
      return this.handler.get(key);
    }

}

• saveData method storage a "value" that can be accessed by a "key".
• getData return the Promise that wrap the value saved with "key".

Iodize

OP does not want to store unencrypted credentials to storage. This answer does not help with that concern. – Appointive