Encrypted persistent state for React applications. Secure secrets locally. No backend. No WebCrypto. No leaks.
npm install @p47h/vault-reactlocalStorage is readable by any injected script
@p47h/vault-react is a React integration for P47H Vault, a browser-side encrypted storage powered by a Rust core compiled to WebAssembly.
bash
npm install @p47h/vault-react
`
---
Quick Start
$3
`tsx
import { P47hProvider } from '@p47h/vault-react';
export default function App() {
return (
Loading vault…
That's it.
No WASM config. No async bootstrapping. No globals.
---
$3
`tsx
import { useIdentity } from '@p47h/vault-react';
function Login() {
const { register, login, logout, isAuthenticated, isLoading } = useIdentity();
if (isAuthenticated) {
return ;
}
return (
);
}
`
---
$3
`tsx
import { useSecret } from '@p47h/vault-react';
function SecretNote() {
const { value, set, status, locked } = useSecret('my_private_note');
if (locked) return Vault locked;
if (status === 'loading') return Decrypting…;
return (
value={value ?? ''}
onChange={e => set(e.target.value)}
placeholder="This text is encrypted locally"
/>
);
}
`
That's it.
You are now storing encrypted data in the browser
without touching cryptography.
---
Mental Model
Think of useSecret() as:
> useState() — but encrypted and persisted securely.
| React | P47H |
| ------------ | ------------- |
| useState() | useSecret() |
| Plaintext | Encrypted |
| JS memory | WASM memory |
| Unsafe | Hardened |
---
API Overview
$3
`tsx
fallback={
errorFallback={(error) =>
/>
`
Handles:
* WASM loading
* Vault lifecycle
* Global error handling
* React Strict Mode compatibility
---
$3
`ts
const {
did,
isAuthenticated,
login,
register,
logout,
recover,
isLoading,
error,
storedIdentities
} = useIdentity();
`
Manages:
* Vault unlock / lock
* Identity lifecycle
* Recovery code generation
* Multiple identity support
---
$3
`ts
const {
value, // string | null - The decrypted value
set, // (v: string) => void - Save (auto-encrypts)
status, // 'idle' | 'loading' | 'saving' | 'error'
exists, // boolean - true if value !== null
locked, // boolean - true if !identity
error // Error | null
} = useSecret('secret_key');
`
States:
* locked → vault not unlocked (show lock UI)
* status === 'loading' → decrypting in progress
* status === 'saving' → encrypting/persisting
* exists → secret exists vs empty placeholder
---
Advanced Usage
$3
`tsx
function RegisterForm() {
const { register } = useIdentity();
const [recoveryCode, setRecoveryCode] = useState(null);
const handleRegister = async (password: string) => {
const result = await register(password);
setRecoveryCode(result.recoveryCode);
// ⚠️ IMPORTANT: Show this to the user!
};
if (recoveryCode) {
return (
⚠️ Save your Recovery Code!
{recoveryCode}
This is the ONLY way to recover your vault
if you forget your password.
);
}
// ... registration form
}
`
$3
`tsx
function SettingsPanel() {
const apiKey = useSecret('api_key');
const privateNote = useSecret('private_note');
const encryptedToken = useSecret('auth_token');
// Each secret is independent and cached
return (
apiKey.set(e.target.value)} />