encrypted-electron-store

Simple encrypted data persistence for your Electron app - Save and load user settings, app state, cache, and more.

You can use it as a single store for both the main and renderer processes.

It has the same features as the well-known electron-store library, but solves several other things:

- Encrypts the data saved on disk (using Electron's built-in safeStorage API)
- Support for React hooks (auto re-renders view on store update)
- Works in the renderer process (unlike electron-store - issue link)
- Has CommonJS exports (electron-store has only ESM exports)
- Uses the same API as zustand for getting values from store (via useEncryptedStore React hook)
- e.g. const encrypted = useEncryptedStore(store => store.encrypted)

Install

``sh
npm i encrypted-electron-store
`

`sh
pnpm i encrypted-electron-store
`

`sh
yarn add encrypted-electron-store
`

Usage

$3

`typescript
import EncryptedStore from 'encrypted-electron-store/main'

const store = EncryptedStore.create()
// or: const store = EncryptedStore.create<{ encrypted: string }>()
// or: const store = EncryptedStore.create()

store.set('encrypted', '🔒')
console.log(store.get('encrypted'))
//=> '🔒'

store.delete('encrypted')
console.log(store.get('encrypted'))
//=> undefined

// IMPORTANT: If you want to use the store in the renderer process
window.webContents.on('did-finish-load', () => {
encryptedStore.setBrowserWindow(window)
})
`

$3

If you want to use this library in the renderer process, you first need to call this function in the preload.ts/js file.

`typescript
// preload.ts/js
import { preloadEncryptedStore } from 'encrypted-electron-store/preload'

preloadEncryptedStore()

// ... rest of the file
`

#### React

Add the EncryptedStoreProvider component in main.tsx/jsx or wherever you want in your React project.

`typescript
// main.tsx/jsx
import { EncryptedStoreProvider } from 'encrypted-electron-store/react'

ReactDOM.createRoot(document.getElementById("root")!).render(





);
`

Use the useEncryptedStore() hook wherever you want in your React project.

`typescript
// e.g. App.tsx/jsx
import { useEncryptedStore } from 'encrypted-electron-store/react'

function App() {
const { store, setStore } = useEncryptedStore<{ encrypted: string }>()
const encrypted = useEncryptedStore<{ encrypted: string }>((store) => store.encrypted);

setStore({ encrypted: '🔒' });

return (
/ Gets automatically re-rendered when the value changes /


{encrypted}

`typescript
import EncryptedStore from 'encrypted-electron-store/vanilla'

// You need to use await because the library reads the initial store from the file on disk.
const store = await EncryptedStore.create<{ encrypted: string }>()

store.set('encrypted', '🔒')
console.log(store.get('encrypted'))
// => '🔒'
`

Docs

You can find examples of usage in real projects in the examples folder.

_todo: Here will be specified detailed documentation; or just link to the official docs_

Contribution

1. Clone this repo:

`sh
git clone https://github.com/rixcian/encrypted-electron-store
`

2. Make sure you have node v22:

`sh
nvm use
`

3. Install dependencies:

`sh
npm i
`

4. After making changes, run tests:

`sh
npm run test
`

5. Create changelog:

`sh
npx @changesets/cli
`

6. As a maintainer, after review, I will run:

`sh
npx @changesets/cli version
`

7. Build the library:

`sh
npm run build
`

8. And publish it to NPM with:

`sh
npx @changesets/cli publish
`

Comparison to electron-store

| Feature | encrypted-electron-store | electron-store |
| ---------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Works in main & renderer processes | ✅ Yes | 🟡 Only in main process |
| ESM & CommonJS exports | ✅ ESM & CJS Supported | ❌ Only ESM exports supported |
| Encryption | ✅ Uses Electron's built-in encryption | 🟡 Not sufficient (encryption password in plaintext) |
| React Integration | ✅ Built-in React hooks | ❌ No React integration |
| Vanilla JS Integration | ✅ Simple API | ✅ Simple API |
| File Extensions | ✅ Configurable | ✅ Configurable |
| Works with files atomically | ✅ Yes | ✅ Yes |
| JSON Schema validation | 🟡 Work in progress | ✅ Yes |
| Migrations | ❌ Yes, if there'll be demand | 🟡 Yes, with bugs (more info) |

Todos

- [x] Finish basic React implementation
- [x] Make const time = useEncryptedStore((store, setStore) => store.time) architecture possible (similar to zustand)

`typescript
// Usage
const { store, setStore } = useEncryptedStore()
const time = useEncryptedStore((store) => store.time)
const setStore = useEncryptedStore((_, setStore) => setStore)

// Another possible usage
const { store, setStore } = useEncryptedStore()
const { time, setStore } = useEncryptedStore((store, setStore) => ({
time: store.time,
setStore,
}))
``