michelonsouza/encrypt-storage

EncryptStorage provide a little more security in frontend

Olá, meu nome é Michelon Souza (eu sei... nome estranho né....)

Sou aficionado por tecnologia e, apesar de gostar muito de Javascript, gosto de aprender novas tecnologias sempre, porém com o foco para não pilhar no primeiro framework/lib/linguagem que sair na semana.

Estudo sempre que posso (quase todo o dia) para me manter atualizado e sempre validar velhos conceitos, o que tem se mostrado muito produtivo pra mim, tanto pessoalmente quanto profissionalmente.

O que eu faço e de onde venho?

💻 Desenvolvedor Front-end - @SOMOS Educação 🌎 São Paulo ✈️ Brasil

Se quiser conversar, me chame por aqui

Linguagens e Frameworks

💻 Atualmente desenvolvendo em ReactJS
📚 Estudando mais afundo o Clean Arquiteture
🍺 Gosto de uma boa cerveja artesanal aos fins de semana

👍 Se precisar, pode me chamar!

encrypt-storage's Issues

API inconsistency

Hi,

I've run into an error using this library it looks like the library implements Storage interface as defined here:

https://developer.mozilla.org/en-US/docs/Web/API/Storage

but after revisiting the documentation looks like that's not true, since getItem

the getItem function is slightly different from the native api because it does not need to have its data treated, when the data exists, by JSON.parse as follows:

this is a problem because the original Storage interface doesn't do that, so any other libraries that use an Storage implementation will fail when you try to use encrypted-storage Storage implementation.

I think its not a good idea to disregard the HTML Standard in this manner, and right now this is the cause of my bug.

I'm going to fork the project and remove this problematic feature for my project. Could send a PR back.

Regards,

redux-persist: Cannot read properties of undefined (reading 'then')

Codesandbox: https://codesandbox.io/s/redux-persist-example-forked-6svqp?file=/store.js
I think return statement of encrypt-storage doesn't return a promise.

get length(): Promise<number>;

Not working with NextJs(SSR)

Describe the bug
ReferenceError: self is not defined

To Reproduce
Install this package in project with next js

Additional context
I guess this is due to the special behavior of the localStorage in the nextJs. I mean document or window should be defined for work with localStorage.

Can't getItem

Describe the bug
A clear and concise description of what the bug is.

Got to create a new instance in one component:
new EncryptStorage('cid', { prefix: '@instance1', });

And tried to get the value in another component:
const token = encryptStorage.getItem<T = any>('cid');

Console message:
'encryptStorage' is not defined no-undef

Using Windows 10,
VSCode,
React

Any idea?

Type 'EncryptStorage' is not assignable to type 'Storage'.

Hi,

I'm trying to use this plugin ([email protected]) with 'pinia-plugin-persist' ( [email protected])

I get the following TypeScript error:

Type 'EncryptStorage' is not assignable to type 'Storage'.
The types returned by 'getItem(...)' are incompatible between these types.

Any suggestion on how to make it work?

tsconfig.json

{
"$schema": "https://json.schemastore.org/tsconfig.json",
"extends": "@vue/tsconfig/tsconfig.web.json",
"compilerOptions": {
"target": "esnext",
(...)
"types": ["vite/client", "vitest/globals", "vue", "pinia-plugin-persist"]
},
"include": ["src//*.ts", "src//.d.ts", "src/**/.tsx", "src/**/*.vue"],
"exclude": ["node_modules", "dist", "src/client/Api.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}

encryptStorage.ts

import { EncryptStorage } from 'encrypt-storage';

export const encryptStorage = new EncryptStorage(
import.meta.env.SECRET_KEY,
{
storageType: 'localStorage',
stateManagementUse: true,
}
);

SystemStore.ts

import { defineStore } from 'pinia';
import type { encryptStorage } from '@/utils/encryptStorage';

type SystemStoreState = {

};

export default defineStore('systemStore', {
state: (): SystemStoreState => ({
persist: {
enabled: true,
strategies: [{ storage: encryptStorage }],
},
});

Error: Can't resolve 'crypto'

Describe the bug
Error occurs when building React project locally.

...

WARNING in ./node_modules/encrypt-storage/dist/index.js 2:104-121
Module not found: Error: Can't resolve 'crypto' in '/Users/foobar/workspace/ui-react/node_modules/encrypt-storage/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }
 @ ./config/amplify.ts 1:0-49 3:27-41
 @ ./src/App.tsx 6:0-42 21:18-27
 @ ./src/index.tsx 5:0-24 14:118-121

 ...

To Reproduce
Steps to reproduce the behavior:
$ npm run build

Expected behavior
Application build with no errors.

Desktop (please complete the following information):

• OS: macOS Big Sur 11.6
• Browser: n/a
• Version: "encrypt-storage": "^2.2.5"

Uncaught ReferenceError: globalThis is not defined

Describe the bug
After installing this package and running the app I am getting this error.

Can somebody check?

Node version - 14.19.1

Native crypto module could not be used to get secure random number.

Having issue with crypto module, it could be an issue with crypto-js version.
@michelonsouza can you please check this? I am using in React app
Much thanks!

Invalid left-hand side in assignment (Angular)

Hey, I'm using your plugin in an angular application.
Since some weeks I have the problem, that when I try to deploy the application to the server I get the message "Invalid left-hand side in assignment"
No I was able to figure out the issue.

It's caused by two lines of your code:

window && window?.globalThis && (window?.globalThis.AsyncEncryptStorage = A)
window && window?.globalThis && (window?.globalThis.EncryptStorage = b)

And appears since this commit: 296629d and/or 85d2e7d

I can run the app again if I remove the ? behind window.
I'm not sure why you using this when you checking before if window is defined?

I hope you know what I mean and you can help me with this issue.
Thank you so much already! :-)

(If you need more information, please ask!)

decryptValue get method return null for plain data

Describe the bug
When trying to read encrypted data from LS and using decryptValue, getting result as null.

Expected behavior
The data which was encrypted and stored back in LS should be retrieved back by using decrypt method

Desktop (please complete the following information):

• OS: Linux
• Browser - Application
• Version 16.04

Additional context
While using decryptString, it says it is deprecated by decryptValue

ReferenceError: self is not defined

Describe the bug
Getting this error in next js.

To Reproduce
Steps to reproduce the behavior:
const encryptStorage = new EncryptStorage('secret-key-value', {
prefix: '@instance1',
});

encryptStorage.setItem('local', 'anyvalue');

Expected behavior
it shouldn't give any error

Desktop (please complete the following information):

• OS: macOS
• Browser [ chrome, safari, brave, firefox]

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context

error - ReferenceError: self is not defined
at Object.<anonymous> (/<path>/node_modules/encrypt-storage/dist/index.js:2:236)

    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

  at Object.encrypt-storage (/<path>/.next/server/pages/login.js:4065:18)
      at __webpack_require__ (/<path>/.next/server/webpack-runtime.js:33:42)
      at eval (webpack-internal:///./src/pages/login.tsx:19:73)
      at Function.__webpack_require__.a (/<path>/.next/server/webpack-runtime.js:97:13)
      at eval (webpack-internal:///./src/pages/login.tsx:1:21)
      at Object../src/pages/login.tsx (/<path>/.next/server/pages/login.js:3276:1)
      at __webpack_require__ (/<path>/.next/server/webpack-runtime.js:33:42)
      at __webpack_exec__ (/<path>/.next/server/pages/login.js:4669:39)
      at /<path>/.next/server/pages/login.js:4670:28 {
    page: '/login'
}```

Add example for `pinia-plugin-persistedstate`

Add example for pinia-plugin-persistedstate

pinia-plugin-persistedstate is maintained and used more than pinia-plugin-persist
https://npmtrends.com/pinia-plugin-persist-vs-pinia-plugin-persistedstate

(untested.. something like?)

import { defineStore } from 'pinia'
import { encryptStorage } from 'path/to/encryptStorage';

export const useStore = defineStore('store', {
  state: () => ({
    return: {
      first: 'John',
      last: 'Doe',
      accessToken: 'xxxxxxxxxxxxx'.
    },
  }),
  persist: {
    storage: encryptStorage,
    paths: ['accessToken'],
  },
})

[question] BADENGINE

Hi,
sorry for not using the pre-defined issue template, as this is hopefully neither a bug nor an enhancement.. But I'm kinda lost and maybe someone can bring light into the dark..

Since I updated my project to the latest version of encrypt-storage I got this strange warning:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { npm: 'You must run yarn in this project', yarn: '1.22.x' },
npm WARN EBADENGINE   current: { node: 'v18.7.0', npm: '8.17.0' }
npm WARN EBADENGINE }

Can someone explain me what exacly this means. (yeah using yarn - haha, but with 3.7.x it worked flawlessly using npm)
Or in other words, is this critical or ignorable?

Many thanks in advance.

Invalid left-hand side in assignment (Angular)

Hey 😃

the bug from #583 is still in the current version of the plugin.
People (including me) are very confused about it. Because in your comment you wrote that you promise a fix in the next version but the added tag is saying WON'T FIX.

Since the issue is closed and still people are commenting it I open this issue to continue the talk.

Hope you have a good week and greetings!

Mocking localStorage when Unit Testing Modules using Pinia/Encrypt-Storage

Hi,

We are using Vue 3 and Pinia with Encrypt-Storage.

We are implementing some unit tests in Vue and we need to mock the localStorage behind Encrypt-Storage/Pinia.

As we are using Vitest, it seems the way to is using the following package vitest-localstorage-mock.

My questions are: Do you suggest any other way to implement the unit tests of the modules using Pinia/Encrypt-Storage ? Any code example?

Thanks,

Juan

self is not defined

when installing the module and starting the project I get this module error

ReferenceError: self is not defined
at Object. (F:\ProyectosPago\Search\node_modules\encrypt-storage\dist\index.js:2:358)
at Module._compile (node:internal/modules/cjs/loader:1099:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Module._compile (node:internal/modules/cjs/loader:1099:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

Name and logo of the package

The name of the repo is "Encrypt Storage" but the logo says "EncrypStorage", without the T and with no space on it.

Which one is the correct?