The problem statement!

Most of the people save data into local storage, Is this a safe method to store ? No! Local storage writes the data as a plan string and any one who has the access to the device can read this data and manipulate.

Most of the people thinks that we can encrypt the data and save it on local storage, But in this case, you need to have a secure key to decrypt this data,

Let's consider this Scenario, You have encrypted the user login information and saved on local storage, When the platform reload, You are decrypting the data which is written on local storage and marking the user as logged or logged out, Here your website share a common secure key to encrypt and decrypt, which means only your website knows how to decrypt,

In this case, if someone copies the data from local storage and past on a different browser, then load your website, Your website will authenticate the user, Why ? because your website knows how the decrypt the data!

This is the problem when you have a single secure key! Then how do we solve this issue ?

Why Encrypted Storage ?

Encrypted storage is created to securely write the data to local storage ( Basically its a wrapper written on top of default localStorage to write the data securely to the localStorage ), here secure storage library generate a secure key for every browser and encrypt the data using this key, which means only the browser which encrypted the data can decrypt it,

Additionally encrypted storage preserve the data format for every data type, As out of the box it supports the following data types

String | Object | Number | Boolean

Which means you don't need to explicitly convert every data to string

How does it work ?

Encrypted storage is written in Singleton design pattern, and when the library initialized it reads all the data from local storage and decrypt all the data which is written using react-secure-storage and keeps on the memory, This ensure faster reading of all the data,

The key is generated using browser fingerprint, which is generated using 10+ browser key identifiers and user input secure key,

The user specific Secure key can be configured using .env file as

SECURE_LOCAL_STORAGE_HASH_KEY=xxxxxxxxxxxxxxxx

or

REACT_APP_SECURE_LOCAL_STORAGE_HASH_KEY=xxxxxxxxx

How to use

To use the library first you need to install using

yarn add encrypted-storage

or

npm install encrypted-storage

You can use the following methods to read and write items to secure local storage

| Function | Usecase | Datatype | | --------------------- | ---------------------------------------------------- | -------------------------------------------------------- | | setItem(key, value) | To set values to secure storage | Supports 'String - Object - Number - Boolean' as value | | getItem(key) | To get values which is saved on secure local storage | Return null if the key does not exits | | removeItem(key) | To remove specified key from secure local storage | | | clear() | Removed all data from secure local storage | |

Sample React Code

import { useEffect } from "react";
import encryptedStorage from "encrypted-storage";

const App = () => {
    useEffect(() => {
	    encryptedStorage.setItem("object", {
		    message:  "This is testing of local storage",
	    });
	    encryptedStorage.setItem("number", 12);
	    encryptedStorage.setItem("string", "12");
	    encryptedStorage.setItem("boolean", true);
	    let value = encryptedStorage.getItem("boolean");
	}, []);

   return (
	    <div>
		    This is a sample code
	    </div>
	);
}

export default App;

Build Size ! 7.6KB