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?

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 😊

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

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".