@filipigustavo/enc-dec

Enc-Dec

A simple library to hide values in localStorage easily.

Usage

The useHash hook returns enc and dec methods. Use it to save encrypted data and get it from localStorage.

enc(key: string, value: any)

dec(key: string)

• You can have one or more instances in your application using namespaces in useHash.
• You can change the way useHash generate security hash.

Example: simple usage

import { useState } from 'react'
import { useHash } from '@filipigustavo/enc-dec'

function App() {
  const { enc, dec } = useHash()
  const [raw, setRaw] = useState('')
  const [decrypted, setDecrypted] = useState('')
  
  const handleEnc = () => enc('local-storage-key', raw)

  const handleDec = () => {
    const val = dec('local-storage-key')
    setDecrypted(val)
  }

  return (
    <div>
      <h1>Enc/Dec</h1>

      <div>
        <input value={raw} onChange={(ev) => setRaw(ev.target.value)} />
        <button onClick={handleEnc}>Encrypt data</button>
        <button onClick={handleDec}>Decrypt data</button>
        <br />
        Decrypted Value: {decrypted}
      </div>
    </div>
  )
}

export default App

If you want another namespaced instance, just pass a prefix as first parameter of useHash. You can have so many instances you want.

// default usage
const { enc, dec } = useHash()
// using with a namespace
const { enc: enc2, dec: dec2 } = useHash('my_prefix-')

IMPORTANT: Don't forget to always use the same prefix to get data from this new namespace.

Changing the way useHash generates security hash

To do it, you should make a class that extends AbstractGenerator with generateHashParts and handleHash methods.

AbstractGenerator accepts a Generic type. generateHashParts should return the same type declared in the class and handleHash accepts a parameter with these type and always returns a string.

AbstractGenerator<H>

This is the base class that works with hashs. You should extend it and implement generateHashParts and handleHash methods.

generateHashParts(): H

This method generates the base to make the real hash. This value will be persisted in localStorage.

handleHash(hash: H): string

This method takes the value generated by generateHashParts and transforms it in the real hash used to encrypt/decrypt data. This value WILL NOT be persisted in localStorage.

class NewHash extends AbstractGenerator<string> {
  generateHashParts = (): string => {
    // You can do whatever you want here.
    // This value will be saved in localStorage as the base to real hash.
    return "hello"
  }

  handleHash = (rawHash: string): string => {
    // You can modify the rawHash the way you want to generate the real hash.
    // This new value will be used to encrypt/decrypt data.
    const hash = rawHash.split('').reverse().join('-')
    return hash
  };
}