kccleoc/seedpgp-web
0
0
Fork 0
mirror of https://github.com/kccleoc/seedpgp-web.git synced 2026-03-07 09:57:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(v1.3.0): add ephemeral session-key encryption for sensitive state

Browse Source
This commit is contained in:
LC mac
2026-01-29 23:14:42 +08:00
parent 5a4018dcfe
commit 8e656749fe
8 changed files with 856 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
AGENTS.md Normal file
View File

@@ -0,0 +1,53 @@
# SeedPGP Agent Brief (read first)
## What this repo is
SeedPGP: a client-side BIP39 mnemonic encryption web app.
Goal: add features without changing security assumptions or breaking GH Pages deploy.
## Non-negotiables
- Small diffs only: one feature slice per PR (1-5 files if possible).
- No big code dumps; propose plan first, then implement.
- Never persist secrets (mnemonic, passphrases, private keys) to localStorage/sessionStorage.
- Prefer “explain what you found in the repo” over guessing.
## How to run
- Install deps: `bun install`
- Dev: `bun run dev`
- Build: `bun run build`
- Tests/lint (if present): `bun run test`, `bun run lint`, `bun run typecheck`
## Repo map (confirm/update)
- UI entry: `src/main.tsx`
- Components: `src/components/`
- Core logic/types: `src/lib/`
## Deploy
There is a deploy script (see `scripts/deploy.sh`) and a separate public repo for built output.
## Required workflow for every task
1) Repo study: identify entry points + relevant modules, list files to touch.
2) Plan: smallest vertical slice, with acceptance criteria.
3) Implement: code + minimal tests or manual verification steps.
4) Evidence: paste command output (build/test) and note any tradeoffs.
## Security Architecture (v1.3.0+)
- **Session-key encryption**: Ephemeral AES-GCM-256 key (non-exportable) encrypts sensitive state
- **Auto-clear**: Plaintext mnemonic cleared from UI immediately after QR generation
- **Encrypted cache**: Only ciphertext stored in React state; key lives in memory only
- **Lock/Clear**: Manual cleanup destroys session key + clears all state
- **Lifecycle**: Session key auto-destroyed on page close/refresh
## Module: src/lib/sessionCrypto.ts
- `getSessionKey()` - Generates/returns non-exportable AES-GCM key (idempotent)
- `encryptJsonToBlob(obj)` - Encrypts to {v, alg, iv_b64, ct_b64}
- `decryptBlobToJson(blob)` - Decrypts back to original object
- `destroySessionKey()` - Drops key reference for GC
- Test: `await window.runSessionCryptoTest()` (DEV only)

956
src/App.tsx
View File

@@ -1,16 +1,16 @@
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { import {
Shield, Shield,
QrCode, QrCode,
RefreshCw, RefreshCw,
CheckCircle2, CheckCircle2, Lock,
AlertCircle, AlertCircle,
Lock,
Unlock, Unlock,
Eye, Eye,
EyeOff, EyeOff,
FileKey, FileKey,
Info Info,
WifiOff
} from 'lucide-react'; } from 'lucide-react';
import { PgpKeyInput } from './components/PgpKeyInput'; import { PgpKeyInput } from './components/PgpKeyInput';
import { QrDisplay } from './components/QrDisplay'; import { QrDisplay } from './components/QrDisplay';
@@ -22,431 +22,523 @@ import * as openpgp from 'openpgp';
import { StorageIndicator } from './components/StorageIndicator'; import { StorageIndicator } from './components/StorageIndicator';
import { SecurityWarnings } from './components/SecurityWarnings'; import { SecurityWarnings } from './components/SecurityWarnings';
import { ClipboardTracker } from './components/ClipboardTracker'; import { ClipboardTracker } from './components/ClipboardTracker';
import { ReadOnly } from './components/ReadOnly';
console.log("OpenPGP.js version:", openpgp.config.versionString); import { getSessionKey, encryptJsonToBlob, decryptBlobToJson, destroySessionKey, EncryptedBlob } from './lib/sessionCrypto';
function App() { console.log("OpenPGP.js version:", openpgp.config.versionString);
const [activeTab, setActiveTab] = useState<'backup' | 'restore'>('backup');
const [mnemonic, setMnemonic] = useState(''); function App() {
const [backupMessagePassword, setBackupMessagePassword] = useState(''); const [activeTab, setActiveTab] = useState<'backup' | 'restore'>('backup');
const [restoreMessagePassword, setRestoreMessagePassword] = useState(''); const [mnemonic, setMnemonic] = useState('');
const [backupMessagePassword, setBackupMessagePassword] = useState('');
const [publicKeyInput, setPublicKeyInput] = useState(''); const [restoreMessagePassword, setRestoreMessagePassword] = useState('');
const [privateKeyInput, setPrivateKeyInput] = useState('');
const [privateKeyPassphrase, setPrivateKeyPassphrase] = useState(''); const [publicKeyInput, setPublicKeyInput] = useState('');
const [hasBip39Passphrase, setHasBip39Passphrase] = useState(false); const [privateKeyInput, setPrivateKeyInput] = useState('');
const [qrPayload, setQrPayload] = useState(''); const [privateKeyPassphrase, setPrivateKeyPassphrase] = useState('');
const [recipientFpr, setRecipientFpr] = useState(''); const [hasBip39Passphrase, setHasBip39Passphrase] = useState(false);
const [restoreInput, setRestoreInput] = useState(''); const [qrPayload, setQrPayload] = useState('');
const [restoredData, setRestoredData] = useState<SeedPgpPlaintext | null>(null); const [recipientFpr, setRecipientFpr] = useState('');
const [error, setError] = useState(''); const [restoreInput, setRestoreInput] = useState('');
const [loading, setLoading] = useState(false); const [restoredData, setRestoredData] = useState<SeedPgpPlaintext | null>(null);
const [showMnemonic, setShowMnemonic] = useState(false); const [error, setError] = useState('');
const [copied, setCopied] = useState(false); const [loading, setLoading] = useState(false);
const [showQRScanner, setShowQRScanner] = useState(false); const [showMnemonic, setShowMnemonic] = useState(false);
const [copied, setCopied] = useState(false);
const copyToClipboard = async (text: string) => { const [showQRScanner, setShowQRScanner] = useState(false);
try { const [isReadOnly, setIsReadOnly] = useState(false);
await navigator.clipboard.writeText(text); const [encryptedMnemonicCache, setEncryptedMnemonicCache] = useState<EncryptedBlob | null>(null);
setCopied(true);
window.setTimeout(() => setCopied(false), 1500); useEffect(() => {
} catch { // When entering read-only mode, clear sensitive data for security.
const ta = document.createElement("textarea"); if (isReadOnly) {
ta.value = text; setMnemonic('');
ta.style.position = "fixed"; setBackupMessagePassword('');
ta.style.left = "-9999px"; setRestoreMessagePassword('');
document.body.appendChild(ta); setPublicKeyInput('');
ta.focus(); setPrivateKeyInput('');
ta.select(); setPrivateKeyPassphrase('');
document.execCommand("copy"); setQrPayload('');
document.body.removeChild(ta); setRestoreInput('');
setCopied(true); setRestoredData(null);
window.setTimeout(() => setCopied(false), 1500); setError('');
} }
}; }, [isReadOnly]);
const handleBackup = async () => { // Cleanup session key on component unmount
setLoading(true); useEffect(() => {
setError(''); return () => {
setQrPayload(''); destroySessionKey();
setRecipientFpr(''); };
}, []);
try {
const validation = validateBip39Mnemonic(mnemonic);
if (!validation.valid) { const copyToClipboard = async (text: string) => {
throw new Error(validation.error); if (isReadOnly) {
} setError("Copy to clipboard is disabled in Read-only mode.");
return;
const plaintext = buildPlaintext(mnemonic, hasBip39Passphrase); }
try {
const result = await encryptToSeedPgp({ await navigator.clipboard.writeText(text);
plaintext, setCopied(true);
publicKeyArmored: publicKeyInput || undefined, window.setTimeout(() => setCopied(false), 1500);
messagePassword: backupMessagePassword || undefined, // Changed } catch {
}); const ta = document.createElement("textarea");
ta.value = text;
setQrPayload(result.framed); ta.style.position = "fixed";
if (result.recipientFingerprint) { ta.style.left = "-9999px";
setRecipientFpr(result.recipientFingerprint); document.body.appendChild(ta);
} ta.focus();
} catch (e) { ta.select();
setError(e instanceof Error ? e.message : 'Encryption failed'); document.execCommand("copy");
} finally { document.body.removeChild(ta);
setLoading(false); setCopied(true);
} window.setTimeout(() => setCopied(false), 1500);
}; }
};
const handleRestore = async () => {
setLoading(true); const handleBackup = async () => {
setError(''); setLoading(true);
setRestoredData(null); setError('');
setQrPayload('');
try { setRecipientFpr('');
const result = await decryptSeedPgp({
frameText: restoreInput, try {
privateKeyArmored: privateKeyInput || undefined, const validation = validateBip39Mnemonic(mnemonic);
privateKeyPassphrase: privateKeyPassphrase || undefined, if (!validation.valid) {
messagePassword: restoreMessagePassword || undefined, // Changed throw new Error(validation.error);
}); }
const plaintext = buildPlaintext(mnemonic, hasBip39Passphrase);
setRestoredData(result);
} catch (e) { const result = await encryptToSeedPgp({
setError(e instanceof Error ? e.message : 'Decryption failed'); plaintext,
} finally { publicKeyArmored: publicKeyInput || undefined,
setLoading(false); messagePassword: backupMessagePassword || undefined,
} });
};
setQrPayload(result.framed);
if (result.recipientFingerprint) {
return ( setRecipientFpr(result.recipientFingerprint);
<> }
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 text-slate-900 p-4 md:p-8">
<div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200"> // Encrypt mnemonic with session key and clear plaintext state
const blob = await encryptJsonToBlob({ mnemonic, timestamp: Date.now() });
{/* Header */} setEncryptedMnemonicCache(blob);
<div className="bg-gradient-to-r from-slate-900 to-slate-800 p-6 text-white flex items-center justify-between"> setMnemonic(''); // Clear plaintext mnemonic
<div className="flex items-center gap-3"> } catch (e) {
<div className="p-2 bg-blue-600 rounded-lg shadow-lg"> setError(e instanceof Error ? e.message : 'Encryption failed');
<Shield size={28} /> } finally {
</div> setLoading(false);
<div> }
<h1 className="text-2xl font-bold tracking-tight"> };
SeedPGP <span className="text-blue-400 font-mono text-base ml-2">v1.2</span>
</h1> const handleRestore = async () => {
<p className="text-xs text-slate-400 mt-0.5">OpenPGP-secured BIP39 backup</p> setLoading(true);
</div> setError('');
</div> setRestoredData(null);
<div className="flex bg-slate-800/50 rounded-lg p-1 backdrop-blur">
<button try {
onClick={() => { const result = await decryptSeedPgp({
setActiveTab('backup'); frameText: restoreInput,
setError(''); privateKeyArmored: privateKeyInput || undefined,
setQrPayload(''); privateKeyPassphrase: privateKeyPassphrase || undefined,
setRestoredData(null); messagePassword: restoreMessagePassword || undefined,
}} });
className={`px-5 py-2 rounded-md text-sm font-semibold transition-all ${activeTab === 'backup'
? 'bg-white text-slate-900 shadow-lg'
: 'text-slate-300 hover:text-white hover:bg-slate-700/50' setRestoredData(result);
}`} } catch (e) {
> setError(e instanceof Error ? e.message : 'Decryption failed');
Backup } finally {
</button> setLoading(false);
<button }
onClick={() => { };
setActiveTab('restore');
setError(''); const handleLockAndClear = () => {
setQrPayload(''); destroySessionKey();
setRestoredData(null); setEncryptedMnemonicCache(null);
}} setMnemonic('');
className={`px-5 py-2 rounded-md text-sm font-semibold transition-all ${activeTab === 'restore' setBackupMessagePassword('');
? 'bg-white text-slate-900 shadow-lg' setRestoreMessagePassword('');
: 'text-slate-300 hover:text-white hover:bg-slate-700/50' setPublicKeyInput('');
}`} setPrivateKeyInput('');
> setPrivateKeyPassphrase('');
Restore setQrPayload('');
</button> setRecipientFpr('');
</div> setRestoreInput('');
</div> setRestoredData(null);
setError('');
<div className="p-6 md:p-8 space-y-6"> setShowMnemonic(false);
{/* Error Display */} setCopied(false);
{error && ( setShowQRScanner(false);
<div className="p-4 bg-red-50 border-l-4 border-red-500 rounded-r-xl flex gap-3 text-red-800 text-sm items-start animate-in slide-in-from-top-2"> };
<AlertCircle className="shrink-0 mt-0.5" size={20} />
<div>
<p className="font-bold mb-1">Error</p> return (
<p className="whitespace-pre-wrap">{error}</p> <>
</div> <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 text-slate-900 p-4 md:p-8">
</div> <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200">
)}
{/* Header */}
{/* Info Banner */} <div className="bg-gradient-to-r from-slate-900 to-slate-800 p-6 text-white flex items-center justify-between">
{recipientFpr && activeTab === 'backup' && ( <div className="flex items-center gap-3">
<div className="p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-3 text-blue-800 text-xs animate-in fade-in"> <div className="p-2 bg-blue-600 rounded-lg shadow-lg">
<Info size={16} className="shrink-0 mt-0.5" /> <Shield size={28} />
<div> </div>
<strong>Recipient Key:</strong> <code className="bg-blue-100 px-1.5 py-0.5 rounded font-mono">{recipientFpr}</code> <div>
</div> <h1 className="text-2xl font-bold tracking-tight">
</div> SeedPGP <span className="text-blue-400 font-mono text-base ml-2">v{__APP_VERSION__}</span>
)} </h1>
<p className="text-xs text-slate-400 mt-0.5">OpenPGP-secured BIP39 backup</p>
{/* Main Content Grid */} </div>
<div className="grid gap-6 md:grid-cols-3"> </div>
<div className="md:col-span-2 space-y-6"> {encryptedMnemonicCache && ( // Show only if encrypted data exists
{activeTab === 'backup' ? ( <button
<> onClick={handleLockAndClear}
<div className="space-y-2"> className="flex items-center gap-2 text-sm text-red-400 bg-slate-800/50 px-3 py-1.5 rounded-lg hover:bg-red-900/50 transition-colors"
<label className="text-sm font-semibold text-slate-700">BIP39 Mnemonic</label> >
<textarea <Lock size={16} />
className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all resize-none" <span>Lock/Clear</span>
data-sensitive="BIP39 Mnemonic" </button>
placeholder="Enter your 12 or 24 word seed phrase..." )}
value={mnemonic} <div className="flex items-center gap-4">
onChange={(e) => setMnemonic(e.target.value)} {isReadOnly && (
/> <div className="flex items-center gap-2 text-sm text-amber-400 bg-slate-800/50 px-3 py-1.5 rounded-lg">
</div> <WifiOff size={16} />
<span>Read-only</span>
<PgpKeyInput </div>
label="PGP Public Key (Optional)" )}
icon={FileKey} <div className="flex bg-slate-800/50 rounded-lg p-1 backdrop-blur">
placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----&#10;&#10;Paste or drag & drop your public key..." <button
value={publicKeyInput} onClick={() => {
onChange={setPublicKeyInput} setActiveTab('backup');
/> setError('');
</> setQrPayload('');
) : ( setRestoredData(null);
<> }}
<div className="flex gap-2"> className={`px-5 py-2 rounded-md text-sm font-semibold transition-all ${activeTab === 'backup'
<button ? 'bg-white text-slate-900 shadow-lg'
onClick={() => setShowQRScanner(true)} : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
className="flex-1 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 hover:from-purple-700 hover:to-purple-800 transition-all shadow-lg" }`}
> >
<QrCode size={18} /> Backup
Scan QR Code </button>
</button> <button
</div> onClick={() => {
setActiveTab('restore');
<div className="space-y-2"> setError('');
<label className="text-sm font-semibold text-slate-700">SEEDPGP1 Payload</label> setQrPayload('');
<textarea setRestoredData(null);
className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-xs font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all resize-none" }}
placeholder="SEEDPGP1:0:ABCD:..." className={`px-5 py-2 rounded-md text-sm font-semibold transition-all ${activeTab === 'restore'
value={restoreInput} ? 'bg-white text-slate-900 shadow-lg'
onChange={(e) => setRestoreInput(e.target.value)} : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
/> }`}
</div> >
Restore
<PgpKeyInput </button>
label="PGP Private Key (Optional)" </div>
icon={FileKey} </div>
data-sensitive="PGP Private Key" </div>
placeholder="-----BEGIN PGP PRIVATE KEY BLOCK-----&#10;&#10;Paste or drag & drop your private key..."
value={privateKeyInput} <div className="p-6 md:p-8 space-y-6">
onChange={setPrivateKeyInput} {/* Error Display */}
/> {error && (
<div className="p-4 bg-red-50 border-l-4 border-red-500 rounded-r-xl flex gap-3 text-red-800 text-sm items-start animate-in slide-in-from-top-2">
{privateKeyInput && ( <AlertCircle className="shrink-0 mt-0.5" size={20} />
<div className="space-y-2"> <div>
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Private Key Passphrase</label> <p className="font-bold mb-1">Error</p>
<div className="relative"> <p className="whitespace-pre-wrap">{error}</p>
<Lock className="absolute left-3 top-3 text-slate-400" size={16} /> </div>
<input </div>
type="password" )}
data-sensitive="Message Password"
className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all" {/* Info Banner */}
placeholder="Unlock private key..." {recipientFpr && activeTab === 'backup' && (
value={privateKeyPassphrase} <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-3 text-blue-800 text-xs animate-in fade-in">
onChange={(e) => setPrivateKeyPassphrase(e.target.value)} <Info size={16} className="shrink-0 mt-0.5" />
/> <div>
</div> <strong>Recipient Key:</strong> <code className="bg-blue-100 px-1.5 py-0.5 rounded font-mono">{recipientFpr}</code>
</div> </div>
)} </div>
</> )}
)}
</div> {/* Main Content Grid */}
<div className="grid gap-6 md:grid-cols-3">
{/* Security Panel */} <div className="md:col-span-2 space-y-6">
<div className="space-y-6"> {activeTab === 'backup' ? (
<div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4"> <>
<h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2"> <div className="space-y-2">
<Lock size={14} /> Security Options <label className="text-sm font-semibold text-slate-700">BIP39 Mnemonic</label>
</h3> <textarea
className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all resize-none"
<div className="space-y-2"> data-sensitive="BIP39 Mnemonic"
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label> placeholder="Enter your 12 or 24 word seed phrase..."
<div className="relative"> value={mnemonic}
<Lock className="absolute left-3 top-3 text-slate-400" size={16} /> onChange={(e) => setMnemonic(e.target.value)}
<input readOnly={isReadOnly}
type="password" />
className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all" </div>
placeholder="Optional password..."
value={activeTab === 'backup' ? backupMessagePassword : restoreMessagePassword} <PgpKeyInput
onChange={(e) => activeTab === 'backup' ? setBackupMessagePassword(e.target.value) : setRestoreMessagePassword(e.target.value)} label="PGP Public Key (Optional)"
/> icon={FileKey}
</div> placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----&#10;&#10;Paste or drag & drop your public key..."
<p className="text-[10px] text-slate-500 mt-1">Symmetric encryption password (SKESK)</p> value={publicKeyInput}
</div> onChange={setPublicKeyInput}
readOnly={isReadOnly}
/>
{activeTab === 'backup' && ( </>
<div className="pt-3 border-t border-slate-300"> ) : (
<label className="flex items-center gap-2 cursor-pointer group"> <>
<input <div className="flex gap-2">
type="checkbox" <button
checked={hasBip39Passphrase} onClick={() => setShowQRScanner(true)}
onChange={(e) => setHasBip39Passphrase(e.target.checked)} disabled={isReadOnly}
className="rounded text-blue-600 focus:ring-2 focus:ring-blue-500 transition-all" className="flex-1 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 hover:from-purple-700 hover:to-purple-800 transition-all shadow-lg disabled:opacity-50"
/> >
<span className="text-xs font-medium text-slate-700 group-hover:text-slate-900 transition-colors"> <QrCode size={18} />
BIP39 25th word active Scan QR Code
</span> </button>
</label> </div>
</div>
)} <div className="space-y-2">
</div> <label className="text-sm font-semibold text-slate-700">SEEDPGP1 Payload</label>
<textarea
{/* Action Button */} className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-xs font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all resize-none"
{activeTab === 'backup' ? ( placeholder="SEEDPGP1:0:ABCD:..."
<button value={restoreInput}
onClick={handleBackup} onChange={(e) => setRestoreInput(e.target.value)}
disabled={!mnemonic || loading} readOnly={isReadOnly}
className="w-full py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:from-blue-600 disabled:hover:to-blue-700" />
> </div>
{loading ? (
<RefreshCw className="animate-spin" size={20} /> <PgpKeyInput
) : ( label="PGP Private Key (Optional)"
<QrCode size={20} /> icon={FileKey}
)} data-sensitive="PGP Private Key"
{loading ? 'Generating...' : 'Generate QR Backup'} placeholder="-----BEGIN PGP PRIVATE KEY BLOCK-----&#10;&#10;Paste or drag & drop your private key..."
</button> value={privateKeyInput}
) : ( onChange={setPrivateKeyInput}
<button readOnly={isReadOnly}
onClick={handleRestore} />
disabled={!restoreInput || loading}
className="w-full py-4 bg-gradient-to-r from-slate-800 to-slate-900 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-slate-900 hover:to-black transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed" {privateKeyInput && (
> <div className="space-y-2">
{loading ? ( <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Private Key Passphrase</label>
<RefreshCw className="animate-spin" size={20} /> <div className="relative">
) : ( <Lock className="absolute left-3 top-3 text-slate-400" size={16} />
<Unlock size={20} /> <input
)} type="password"
{loading ? 'Decrypting...' : 'Decrypt & Restore'} data-sensitive="Message Password"
</button> className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
)} placeholder="Unlock private key..."
</div> value={privateKeyPassphrase}
</div> onChange={(e) => setPrivateKeyPassphrase(e.target.value)}
readOnly={isReadOnly}
{/* QR Output */} />
{qrPayload && activeTab === 'backup' && ( </div>
<div className="pt-6 border-t border-slate-200 space-y-6 animate-in fade-in slide-in-from-bottom-4"> </div>
<div className="flex justify-center"> )}
<QrDisplay value={qrPayload} /> </>
</div> )}
<div className="space-y-2"> </div>
<div className="flex items-center justify-between gap-3">
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider"> {/* Security Panel */}
Raw payload (copy for backup) <div className="space-y-6">
</label> <div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4">
<h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
<button <Lock size={14} /> Security Options
type="button" </h3>
onClick={() => copyToClipboard(qrPayload)}
className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-900 text-white text-xs font-semibold hover:bg-black transition-colors" <div className="space-y-2">
> <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label>
{copied ? <CheckCircle2 size={14} /> : <QrCode size={14} />} <div className="relative">
{copied ? "Copied" : "Copy"} <Lock className="absolute left-3 top-3 text-slate-400" size={16} />
</button> <input
</div> type="password"
className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
<textarea placeholder="Optional password..."
readOnly value={activeTab === 'backup' ? backupMessagePassword : restoreMessagePassword}
value={qrPayload} onChange={(e) => activeTab === 'backup' ? setBackupMessagePassword(e.target.value) : setRestoreMessagePassword(e.target.value)}
onFocus={(e) => e.currentTarget.select()} readOnly={isReadOnly}
className="w-full h-28 p-3 bg-slate-900 rounded-xl font-mono text-[10px] text-green-400 border border-slate-700 shadow-inner leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-blue-500" />
/> </div>
<p className="text-[11px] text-slate-500"> <p className="text-[10px] text-slate-500 mt-1">Symmetric encryption password (SKESK)</p>
Tip: click the box to select all, or use Copy. </div>
</p>
</div>
</div> {activeTab === 'backup' && (
)} <div className="pt-3 border-t border-slate-300">
<label className="flex items-center gap-2 cursor-pointer group">
{/* Restored Mnemonic */} <input
{restoredData && activeTab === 'restore' && ( type="checkbox"
<div className="pt-6 border-t border-slate-200 animate-in zoom-in-95"> checked={hasBip39Passphrase}
<div className="p-6 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300 rounded-2xl shadow-lg"> onChange={(e) => setHasBip39Passphrase(e.target.checked)}
<div className="flex items-center justify-between mb-4"> disabled={isReadOnly}
<span className="font-bold text-green-700 flex items-center gap-2 text-lg"> className="rounded text-blue-600 focus:ring-2 focus:ring-blue-500 transition-all"
<CheckCircle2 size={22} /> Mnemonic Recovered />
</span> <span className="text-xs font-medium text-slate-700 group-hover:text-slate-900 transition-colors">
<button BIP39 25th word active
onClick={() => setShowMnemonic(!showMnemonic)} </span>
className="p-2.5 hover:bg-green-100 rounded-xl transition-all text-green-700 hover:shadow" </label>
> </div>
{showMnemonic ? <EyeOff size={22} /> : <Eye size={22} />} )}
</button>
</div> <ReadOnly
isReadOnly={isReadOnly}
<div className={`p-6 bg-white rounded-xl border-2 border-green-200 shadow-sm transition-all duration-300 ${showMnemonic ? 'blur-0' : 'blur-lg select-none' onToggle={setIsReadOnly}
}`}> appVersion={__APP_VERSION__}
<p className="font-mono text-center text-lg text-slate-800 tracking-wide leading-relaxed break-words"> buildHash={__BUILD_HASH__}
{restoredData.w} />
</p> </div>
</div>
{/* Action Button */}
{restoredData.pp === 1 && ( {activeTab === 'backup' ? (
<div className="mt-4 p-3 bg-orange-100 border border-orange-300 rounded-lg"> <button
<p className="text-xs text-center text-orange-800 font-bold uppercase tracking-widest flex items-center justify-center gap-2"> onClick={handleBackup}
<AlertCircle size={14} /> BIP39 Passphrase Required (25th Word) disabled={!mnemonic || loading || isReadOnly}
</p> className="w-full py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:from-blue-600 disabled:hover:to-blue-700"
</div> >
)} {loading ? (
<RefreshCw className="animate-spin" size={20} />
{restoredData.fpr && restoredData.fpr.length > 0 && ( ) : (
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg"> <QrCode size={20} />
<p className="text-xs text-blue-800"> )}
<strong>Encrypted for keys:</strong> {restoredData.fpr.join(', ')} {loading ? 'Generating...' : 'Generate QR Backup'}
</p> </button>
</div> ) : (
)} <button
</div> onClick={handleRestore}
</div> disabled={!restoreInput || loading || isReadOnly}
)} className="w-full py-4 bg-gradient-to-r from-slate-800 to-slate-900 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-slate-900 hover:to-black transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
</div> >
</div> {loading ? (
<RefreshCw className="animate-spin" size={20} />
{/* Footer */} ) : (
<div className="mt-8 text-center text-xs text-slate-500"> <Unlock size={20} />
<p>SeedPGP v1.2 • OpenPGP (RFC 4880) + Base45 (RFC 9285) + CRC16/CCITT-FALSE</p> )}
<p className="mt-1">Never share your private keys or seed phrases. Always verify on an airgapped device.</p> {loading ? 'Decrypting...' : 'Decrypt & Restore'}
</div> </button>
</div> )}
</div>
{/* QR Scanner Modal */} </div>
{showQRScanner && (
<QRScanner {/* QR Output */}
onScanSuccess={(scannedText) => { {qrPayload && activeTab === 'backup' && (
setRestoreInput(scannedText); <div className="pt-6 border-t border-slate-200 space-y-6 animate-in fade-in slide-in-from-bottom-4">
setShowQRScanner(false); <div className="flex justify-center">
setError(''); <QrDisplay value={qrPayload} />
}} </div>
onClose={() => setShowQRScanner(false)} <div className="space-y-2">
/> <div className="flex items-center justify-between gap-3">
)} <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">
<div className="max-w-4xl mx-auto p-8"> Raw payload (copy for backup)
<h1>SeedPGP v1.2.0</h1> </label>
{/* ... rest of your app ... */}
</div> <button
type="button"
{/* Floating Storage Monitor - bottom right */} onClick={() => copyToClipboard(qrPayload)}
<StorageIndicator /> className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-900 text-white text-xs font-semibold hover:bg-black transition-colors"
<SecurityWarnings /> {/* Bottom-left */} >
<ClipboardTracker /> {/* Top-right */} {copied ? <CheckCircle2 size={14} /> : <QrCode size={14} />}
</> {copied ? "Copied" : "Copy"}
</button>
); </div>
} <textarea
readOnly
export default App; value={qrPayload}
onFocus={(e) => e.currentTarget.select()}
className="w-full h-28 p-3 bg-slate-900 rounded-xl font-mono text-[10px] text-green-400 border border-slate-700 shadow-inner leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<p className="text-[11px] text-slate-500">
Tip: click the box to select all, or use Copy.
</p>
</div>
</div>
)}
{/* Restored Mnemonic */}
{restoredData && activeTab === 'restore' && (
<div className="pt-6 border-t border-slate-200 animate-in zoom-in-95">
<div className="p-6 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300 rounded-2xl shadow-lg">
<div className="flex items-center justify-between mb-4">
<span className="font-bold text-green-700 flex items-center gap-2 text-lg">
<CheckCircle2 size={22} /> Mnemonic Recovered
</span>
<button
onClick={() => setShowMnemonic(!showMnemonic)}
className="p-2.5 hover:bg-green-100 rounded-xl transition-all text-green-700 hover:shadow"
>
{showMnemonic ? <EyeOff size={22} /> : <Eye size={22} />}
</button>
</div>
<div className={`p-6 bg-white rounded-xl border-2 border-green-200 shadow-sm transition-all duration-300 ${showMnemonic ? 'blur-0' : 'blur-lg select-none'
}`}>
<p className="font-mono text-center text-lg text-slate-800 tracking-wide leading-relaxed break-words">
{restoredData.w}
</p>
</div>
{restoredData.pp === 1 && (
<div className="mt-4 p-3 bg-orange-100 border border-orange-300 rounded-lg">
<p className="text-xs text-center text-orange-800 font-bold uppercase tracking-widest flex items-center justify-center gap-2">
<AlertCircle size={14} /> BIP39 Passphrase Required (25th Word)
</p>
</div>
)}
{restoredData.fpr && restoredData.fpr.length > 0 && (
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
<p className="text-xs text-blue-800">
<strong>Encrypted for keys:</strong> {restoredData.fpr.join(', ')}
</p>
</div>
)}
</div>
</div>
)}
</div>
</div>
{/* Footer */}
<div className="mt-8 text-center text-xs text-slate-500">
<p>SeedPGP v{__APP_VERSION__} • OpenPGP (RFC 4880) + Base45 (RFC 9285) + CRC16/CCITT-FALSE</p>
<p className="mt-1">Never share your private keys or seed phrases. Always verify on an airgapped device.</p>
</div>
</div>
{/* QR Scanner Modal */}
{showQRScanner && (
<QRScanner
onScanSuccess={(scannedText) => {
setRestoreInput(scannedText);
setShowQRScanner(false);
setError('');
}}
onClose={() => setShowQRScanner(false)}
/>
)}
<div className="max-w-4xl mx-auto p-8">
<h1>SeedPGP v1.2.0</h1>
{/* ... rest of your app ... */}
</div>
{/* Floating Storage Monitor - bottom right */}
{!isReadOnly && (
<>
<StorageIndicator />
<SecurityWarnings />
<ClipboardTracker />
</>
)}
</>
);
}
export default App;

26
src/components/PgpKeyInput.tsx
View File

@@ -1,15 +1,14 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Upload } from 'lucide-react'; import { Upload } from 'lucide-react';
import type { LucideIcon } from "lucide-react"; import type { LucideIcon } from "lucide-react";
interface PgpKeyInputProps { interface PgpKeyInputProps {
value: string; value: string;
onChange: (value: string) => void; onChange: (value: string) => void;
placeholder: string; placeholder: string;
label: string; label: string;
icon?: LucideIcon; icon?: LucideIcon;
readOnly?: boolean;
} }
export const PgpKeyInput: React.FC<PgpKeyInputProps> = ({ export const PgpKeyInput: React.FC<PgpKeyInputProps> = ({
@@ -17,21 +16,25 @@ export const PgpKeyInput: React.FC<PgpKeyInputProps> = ({
onChange, onChange,
placeholder, placeholder,
label, label,
icon: Icon icon: Icon,
readOnly = false,
}) => { }) => {
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const handleDragOver = (e: React.DragEvent) => { const handleDragOver = (e: React.DragEvent) => {
if (readOnly) return;
e.preventDefault(); e.preventDefault();
setIsDragging(true); setIsDragging(true);
}; };
const handleDragLeave = (e: React.DragEvent) => { const handleDragLeave = (e: React.DragEvent) => {
if (readOnly) return;
e.preventDefault(); e.preventDefault();
setIsDragging(false); setIsDragging(false);
}; };
const handleDrop = (e: React.DragEvent) => { const handleDrop = (e: React.DragEvent) => {
if (readOnly) return;
e.preventDefault(); e.preventDefault();
setIsDragging(false); setIsDragging(false);
@@ -53,24 +56,27 @@ export const PgpKeyInput: React.FC<PgpKeyInputProps> = ({
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{Icon && <Icon size={14} />} {label} {Icon && <Icon size={14} />} {label}
</span> </span>
<span className="text-[10px] text-slate-400 font-normal bg-slate-100 px-2 py-0.5 rounded-full border border-slate-200"> {!readOnly && (
Drag & Drop .asc file <span className="text-[10px] text-slate-400 font-normal bg-slate-100 px-2 py-0.5 rounded-full border border-slate-200">
</span> Drag & Drop .asc file
</span>
)}
</label> </label>
<div <div
className={`relative transition-all duration-200 ${isDragging ? 'scale-[1.01]' : ''}`} className={`relative transition-all duration-200 ${isDragging && !readOnly ? 'scale-[1.01]' : ''}`}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
> >
<textarea <textarea
className={`w-full h-40 p-3 bg-slate-50 border rounded-xl text-xs font-mono transition-colors resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 ${isDragging ? 'border-blue-500 bg-blue-50' : 'border-slate-200' className={`w-full h-40 p-3 bg-slate-50 border rounded-xl text-xs font-mono transition-colors resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 ${isDragging && !readOnly ? 'border-blue-500 bg-blue-50' : 'border-slate-200'
}`} }`}
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
readOnly={readOnly}
/> />
{isDragging && ( {isDragging && !readOnly && (
<div className="absolute inset-0 flex items-center justify-center bg-blue-50/90 rounded-xl border-2 border-dashed border-blue-500 pointer-events-none z-10"> <div className="absolute inset-0 flex items-center justify-center bg-blue-50/90 rounded-xl border-2 border-dashed border-blue-500 pointer-events-none z-10">
<div className="text-blue-600 font-bold flex flex-col items-center animate-bounce"> <div className="text-blue-600 font-bold flex flex-col items-center animate-bounce">
<Upload size={24} /> <Upload size={24} />

39
src/components/ReadOnly.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { Shield, WifiOff } from 'lucide-react';
type ReadOnlyProps = {
isReadOnly: boolean;
onToggle: (isReadOnly: boolean) => void;
buildHash: string;
appVersion: string;
};
const CSP_POLICY = `default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none';`;
export function ReadOnly({ isReadOnly, onToggle, buildHash, appVersion }: ReadOnlyProps) {
return (
<div className="pt-3 border-t border-slate-300">
<label className="flex items-center gap-2 cursor-pointer group">
<input
type="checkbox"
checked={isReadOnly}
onChange={(e) => onToggle(e.target.checked)}
className="rounded text-blue-600 focus:ring-2 focus:ring-blue-500 transition-all"
/>
<span className="text-xs font-medium text-slate-700 group-hover:text-slate-900 transition-colors">
Read-only Mode
</span>
</label>
{isReadOnly && (
<div className="mt-4 p-3 bg-slate-800 text-slate-200 rounded-lg text-xs space-y-2 animate-in fade-in">
<p className="font-bold flex items-center gap-2"><WifiOff size={14} /> Network & Persistence Disabled</p>
<div className="font-mono text-[10px] space-y-1">
<p><span className="font-semibold text-slate-400">Version:</span> {appVersion}</p>
<p><span className="font-semibold text-slate-400">Build:</span> {buildHash}</p>
<p className="pt-1 font-semibold text-slate-400">Content Security Policy:</p>
<p className="text-sky-300 break-words">{CSP_POLICY}</p>
</div>
</div>
)}
</div>
);
}

205
src/lib/sessionCrypto.ts Normal file
View File

@@ -0,0 +1,205 @@
/**
* @file Ephemeral, per-session, in-memory encryption using Web Crypto API.
*
* This module manages a single, non-exportable AES-GCM key for a user's session.
* It's designed to encrypt sensitive data (like a mnemonic) before it's placed
* into React state, mitigating the risk of plaintext data in memory snapshots.
* The key is destroyed when the user navigates away or the session ends.
*/
// --- Helper functions for encoding ---
function base64ToBytes(base64: string): Uint8Array {
const binString = atob(base64);
return Uint8Array.from(binString, (m) => m.codePointAt(0)!);
}
function bytesToBase64(bytes: Uint8Array): string {
const binString = Array.from(bytes, (byte) =>
String.fromCodePoint(byte),
).join("");
return btoa(binString);
}
// --- Module-level state ---
/**
* Holds the session's AES-GCM key. This variable is not exported and is
* only accessible through the functions in this module.
* @private
*/
let sessionKey: CryptoKey | null = null;
const KEY_ALGORITHM = 'AES-GCM';
const KEY_LENGTH = 256;
/**
* An object containing encrypted data and necessary metadata for decryption.
*/
export interface EncryptedBlob {
v: 1;
/**
* The algorithm used. This is metadata; the actual Web Crypto API call
* uses `{ name: "AES-GCM", length: 256 }`.
*/
alg: 'A256GCM';
iv_b64: string; // Initialization Vector (base64)
ct_b64: string; // Ciphertext (base64)
}
// --- Core API Functions ---
/**
* Generates and stores a session-level AES-GCM 256-bit key.
* The key is non-exportable and is held in a private module-level variable.
* If a key already exists, the existing key is returned, making the function idempotent.
* This function must be called before any encryption or decryption can occur.
* @returns A promise that resolves to the generated or existing CryptoKey.
*/
export async function getSessionKey(): Promise<CryptoKey> {
if (sessionKey) {
return sessionKey;
}
const key = await window.crypto.subtle.generateKey(
{
name: KEY_ALGORITHM,
length: KEY_LENGTH,
},
false, // non-exportable
['encrypt', 'decrypt'],
);
sessionKey = key;
return key;
}
/**
* Encrypts a JSON-serializable object using the current session key.
* @param data The object to encrypt. Must be JSON-serializable.
* @returns A promise that resolves to an EncryptedBlob.
*/
export async function encryptJsonToBlob<T>(data: T): Promise<EncryptedBlob> {
if (!sessionKey) {
throw new Error('Session key not initialized. Call getSessionKey() first.');
}
const iv = window.crypto.getRandomValues(new Uint8Array(12)); // 96-bit IV is recommended for AES-GCM
const plaintext = new TextEncoder().encode(JSON.stringify(data));
const ciphertext = await window.crypto.subtle.encrypt(
{
name: KEY_ALGORITHM,
iv: iv,
},
sessionKey,
plaintext,
);
return {
v: 1,
alg: 'A256GCM',
iv_b64: bytesToBase64(iv),
ct_b64: bytesToBase64(new Uint8Array(ciphertext)),
};
}
/**
* Decrypts an EncryptedBlob back into its original object form.
* @param blob The EncryptedBlob to decrypt.
* @returns A promise that resolves to the original decrypted object.
*/
export async function decryptBlobToJson<T>(blob: EncryptedBlob): Promise<T> {
if (!sessionKey) {
throw new Error('Session key not initialized or has been destroyed.');
}
if (blob.v !== 1 || blob.alg !== 'A256GCM') {
throw new Error('Invalid or unsupported encrypted blob format.');
}
const iv = base64ToBytes(blob.iv_b64);
const ciphertext = base64ToBytes(blob.ct_b64);
const decrypted = await window.crypto.subtle.decrypt(
{
name: KEY_ALGORITHM,
iv: iv,
},
sessionKey,
ciphertext,
);
const jsonString = new TextDecoder().decode(decrypted);
return JSON.parse(jsonString) as T;
}
/**
* Destroys the session key reference, making it unavailable for future
* operations and allowing it to be garbage collected.
*/
export function destroySessionKey(): void {
sessionKey = null;
}
/**
* A standalone test function that can be run in the browser console
* to verify the complete encryption and decryption lifecycle.
*
* To use:
* 1. Copy this entire function into the browser's developer console.
* 2. Run it by typing: `await runSessionCryptoTest()`
* 3. Check the console for logs.
*/
export async function runSessionCryptoTest(): Promise<void> {
console.log('--- Running Session Crypto Test ---');
try {
// 1. Destroy any old key
destroySessionKey();
console.log('Old key destroyed (if any).');
// 2. Generate a new key
await getSessionKey();
console.log('New session key generated.');
// 3. Define a secret object
const originalObject = {
mnemonic: 'fee table visa input phrase lake buffalo vague merit million mesh blend',
timestamp: new Date().toISOString(),
};
console.log('Original object:', originalObject);
// 4. Encrypt the object
const encrypted = await encryptJsonToBlob(originalObject);
console.log('Encrypted blob:', encrypted);
if (typeof encrypted.ct_b64 !== 'string' || encrypted.ct_b64.length < 20) {
throw new Error('Encryption failed: ciphertext looks invalid.');
}
// 5. Decrypt the object
const decrypted = await decryptBlobToJson(encrypted);
console.log('Decrypted object:', decrypted);
// 6. Verify integrity
if (JSON.stringify(originalObject) !== JSON.stringify(decrypted)) {
throw new Error('Verification failed: Decrypted data does not match original data.');
}
console.log('%c✅ Success: Data integrity verified.', 'color: green; font-weight: bold;');
// 7. Test key destruction
destroySessionKey();
console.log('Session key destroyed.');
try {
await decryptBlobToJson(encrypted);
} catch (e) {
console.log('As expected, decryption failed after key destruction:', (e as Error).message);
}
} catch (error) {
console.error('%c❌ Test Failed:', 'color: red; font-weight: bold;', error);
} finally {
console.log('--- Test Complete ---');
}
}
// For convenience, attach the test runner to the window object.
// This is for development/testing only and can be removed in production.
if (import.meta.env.DEV && typeof window !== 'undefined') {
(window as any).runSessionCryptoTest = runSessionCryptoTest;
}

4
src/main.tsx
View File

@@ -23,6 +23,10 @@ import { createRoot } from 'react-dom/client'
import './index.css' import './index.css'
import App from './App' import App from './App'
if (import.meta.env.DEV) {
await import('./lib/sessionCrypto');
}
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<App /> <App />

2
src/vite-env.d.ts vendored
View File

@@ -6,3 +6,5 @@ declare module '*.css' {
export default content; export default content;
} }
declare const __APP_VERSION__: string;
declare const __BUILD_HASH__: string;

13
vite.config.ts
View File

@@ -1,5 +1,14 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
import { execSync } from 'child_process'
import fs from 'fs'
// Read version from package.json
const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf-8'))
const appVersion = packageJson.version
// Get git commit hash
const gitHash = execSync('git rev-parse --short HEAD').toString().trim()
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
@@ -7,5 +16,9 @@ export default defineConfig({
build: { build: {
outDir: 'dist', outDir: 'dist',
emptyOutDir: false, emptyOutDir: false,
},
define: {
'__APP_VERSION__': JSON.stringify(appVersion),
'__BUILD_HASH__': JSON.stringify(gitHash),
} }
}) })