feat: Insomnia vault key management UI[INS-4715] #8296
Conversation
cwangsmv
force-pushed
the
feat/insomnai-vault-setting-ui
branch
from
0730ce9 to
d0f5b17
Compare
packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
Outdated
Show resolved
Hide resolved
| @@ -93,6 +93,7 @@ | |||
| "@fortawesome/free-solid-svg-icons": "^6.5.2", | |||
| "@fortawesome/react-fontawesome": "^0.2.0", | |||
| "@getinsomnia/api-client": "0.0.4", | |||
| "@getinsomnia/srp-js": "1.0.0-alpha.1", | |||
There was a problem hiding this comment.
as this was removed from the project over a year ago, we should discuss the need for this further with @gatzjames
There was a problem hiding this comment.
Introduce this lib back is for key generation and validation using SRP protocol. I've checked that website is also using this for e2ee with same purpose.
|
Nice job so far. I'm curious about the choice to use the There's more diving I can do into the UI components but I want to get a better high level view first. Are there any concerns or ideas have you considered but chosen to scope out of this PR? |
| const getLocalStorage = () => { | ||
| if (!localStorage) { | ||
| localStorage = initLocalStorage(); | ||
| } | ||
| return localStorage; | ||
| }; | ||
|
|
||
| const setSecret = async (key: string, secret: string) => { | ||
| try { | ||
| const secretStorage = getLocalStorage(); | ||
| const encrypted = encryptString(secret); | ||
| secretStorage.setItem(key, encrypted); | ||
| } catch (error) { | ||
| console.error(`Can not save secret ${error.toString()}`); | ||
| return Promise.reject(error); | ||
| } | ||
| }; | ||
|
|
||
| const getSecret = async (key: string) => { | ||
| try { | ||
| const secretStorage = getLocalStorage(); | ||
| const encrypted = secretStorage.getItem(key, ''); | ||
| return encrypted === '' ? null : decryptString(encrypted); | ||
| } catch (error) { | ||
| console.error(`Can not get secret ${error.toString()}`); | ||
| return Promise.reject(null); | ||
| } | ||
| }; | ||
|
|
||
| const deleteSecret = async (key: string) => { | ||
| try { | ||
| const secretStorage = getLocalStorage(); | ||
| secretStorage.deleteItem(key); | ||
| } catch (error) { | ||
| console.error(`Can not delele secret ${error.toString()}`); | ||
| return Promise.reject(error); | ||
| } | ||
| }; |
packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
Outdated
Show resolved
Hide resolved
This is a trade-off to replace keytar with Electron's safeStorage api. The requirement is that we expose an option for user to save the encrypted vault key(symmetric key for encryption) locally. So whenever user logout and login again, the user do not need to manual input the vault key, we will decrypt and load the vault key automatically. The reason why I am not using |
Good points, I think my criticism is more about the naming of the existing localstorage.ts code, perhaps we can rename it to electronstorage.ts/ElectronStorage to clear this up. But no need to block this PR. Just remove the input ref and copied behavior and I can approve. |
I agree, current naming of |
Changes:
As part of the Insomnia vault feature, this PR includes the UI changes for vault key management.
The vault key is used to encrypt local secret environment variables.
Add a new UI in Preferences page for vault key generation:
When user has logged on other devices/re-login, user needs to enter the vault key for validation. We also provide reset feature if the vault key is lost.
There will be two new options related to vault key:
User could choose to save the encrypted vault key locally to avoid entering vault key after re-login. The vault key is encrypted using OS native secret manager(like KeyChain in MacOS).
There's another option to choose whether to allow pre-request/post-response scripts to access secret environment variables