use-encrypt-storage
use-encrypt-storage is a simple and secure react hook for managing browser localStorage with encryption. It provides a React hook that seamlessly integrates with the brower's localStorage and leverages the robust encryption capabilities of crypto-js. This package ensures that sensitive information stored in localStorage with encryption, adding an extra layer of protection to your application's data.
Roadmap
Documentation
Installation
Install with npm
npm install use-encrypt-storageor :
Install with yarn
yarn add use-encrypt-storageExamples
Use with Vite ( in main.js )
import App from './App';
import { EncryptProvider } from "use-encrypt-storage";
...
function App() {
return (
<EncryptProvider secretKey={import.env.meta.VITE_SECRET_KEY}>
<App />
</EncryptProvider>
);
}Use with CRA ( in index.js )
import App from './App';
import { EncryptProvider } from "use-encrypt-storage";
...
function App() {
return (
<EncryptProvider secretKey={process.env.REACT_APP_SECRET_KEY}>
<App />
</EncryptProvider>
);
}Use with both
Set Data
import { useCallback } from "react";
import { useEncryptStorage } from "use-encrypt-storage";
...
function App() {
const { set } = useEncryptStorage();
// set( key: string , value: string , expireTime?: number | undefinded )
// expireTime is in minutes
const onSetHandler = useCallback(() => {
set("name", "Ma Ma Thwe");
}, []);
return (
<button onClick={onSetHandler}>
Set Name
</button>
);
}Get Data
import { useCallback } from "react";
import { useEncryptStorage } from "use-encrypt-storage";
...
function App() {
const { get } = useEncryptStorage();
// get( key: string )
const onGetHandler = useCallback(() => {
const name = get("name");
console.log(name); // Ma Ma Thwe
}, []);
return (
<button onClick={onGetHandler}>
Get Name
</button>
);
}Remove Data
import { useCallback } from "react";
import { useEncryptStorage } from "use-encrypt-storage";
...
function App() {
const { remove } = useEncryptStorage();
// remove( key: string )
const onRemoveHandler = useCallback(() => {
remove("name");
}, []);
return (
<button onClick={onRemoveHandler}>
Remove Name
</button>
);
}Environment Variables
To run this project, you will need to add the following environment variables to your .env file
# For Vite
VITE_SECRET_KEY="mamakochittel"
# For CRA
REACT_APP_SECRET_KEY="mamakochittel"Tech Stack
Client: React, crypto-js
Features
- set data in browser's localStorage with encrypted value
- get data from browser's localStorage
- remove data from browser's localStorage
Feedback
If you have any feedback, please reach out to me at dennykate22@gmail.com