feat: encrypted vault backup & restore (v1.5.8)

vveerrgg · claude · vveerrgg · commit cabeaa0723ec · 2026-03-06T18:24:41.000-08:00
Add automatic backup prompt and restore flow so users can recover
their profiles, keys, relays, and vault data after reinstall or
data loss. Backup file uses existing PBKDF2+AES-256-GCM encryption.

- background.js: backup.export/import handlers, backupNeeded broadcast
- sidepanel.html: backup prompt sheet, lock screen restore, first-run
  restore, Settings &gt; Download Backup button
- sidepanel.js: showBackupPrompt (once per session, 30s auto-dismiss),
  doBackupExport (Blob+anchor with delayed revoke for popup compat),
  doBackupImport (file picker + password), triggers after profile/relay
  changes
- Cross-browser: Chrome side panel, Safari/Firefox popup, iOS Safari
- Version bump 1.5.7 → 1.5.8 (Safari skips 1.5.7, was 1.5.6 in review)

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "nostrkey",
-    "version": "1.5.7",
+    "version": "1.5.8",
     "description": "Nostr key manager and signer for web apps. Securely store your private keys and sign events without exposing them to websites.",
     "source": [
         "background.js",
diff --git a/src/background.js b/src/background.js
@@ -26,7 +26,7 @@ import {
     getDecryptedPrivKey,
     isEncryptedBlob,
 } from './utilities/utils';
-import { encrypt as encryptBlob } from './utilities/crypto';
+import { encrypt as encryptBlob, decrypt as decryptBlob } from './utilities/crypto';
 import { saveEvent } from './utilities/db';
 import { api } from './utilities/browser-polyfill';
 import { initSync, scheduleSyncPush } from './utilities/sync-manager';
@@ -440,6 +440,7 @@ api.runtime.onMessage.addListener((message, _sender, sendResponse) => {
                     const result = await unlockSession(message.payload);
                     // Broadcast password state change to all views
                     api.runtime.sendMessage({ kind: 'passwordStateChanged', hasPassword: true }).catch(() => {});
+                    api.runtime.sendMessage({ kind: 'backupNeeded' }).catch(() => {});
                     sendResponse(result);
                 } catch (e) {
                     sendResponse({ success: false, error: e.message });
@@ -459,6 +460,7 @@ api.runtime.onMessage.addListener((message, _sender, sendResponse) => {
                     const result = await unlockSession(newPassword);
                     // Broadcast password state change to all views
                     api.runtime.sendMessage({ kind: 'passwordStateChanged', hasPassword: true }).catch(() => {});
+                    api.runtime.sendMessage({ kind: 'backupNeeded' }).catch(() => {});
                     sendResponse(result);
                 } catch (e) {
                     sendResponse({ success: false, error: e.message });
@@ -1003,6 +1005,95 @@ api.runtime.onMessage.addListener((message, _sender, sendResponse) => {
             });
             return true;
 
+        // --- Encrypted vault backup / restore ---
+        case 'backup.export':
+            reply(sendResponse, async () => {
+                if (!sessionPassword) {
+                    return { success: false, error: 'Extension must be unlocked to create a backup' };
+                }
+                const data = await storage.get({
+                    profiles: [],
+                    profileIndex: 0,
+                    isEncrypted: false,
+                    passwordHash: null,
+                    passwordSalt: null,
+                    apiKeyVault: null,
+                    vaultDocs: null,
+                    nostrAccessWhileLocked: true,
+                    blockCrossOriginFrames: true,
+                    autoLockMinutes: 15,
+                    version: null,
+                });
+                const plaintext = JSON.stringify(data);
+                const encrypted = await encryptBlob(plaintext, sessionPassword);
+                const version = api.runtime.getManifest?.()?.version || 'unknown';
+                return {
+                    success: true,
+                    envelope: {
+                        format: 'nostrkey-backup',
+                        version: 1,
+                        createdAt: new Date().toISOString(),
+                        extensionVersion: version,
+                        profileCount: Array.isArray(data.profiles) ? data.profiles.length : 0,
+                        payload: JSON.parse(encrypted),
+                    },
+                };
+            });
+            return true;
+        case 'backup.import':
+            reply(sendResponse, async () => {
+                try {
+                    const { envelope, password } = message.payload;
+                    if (!envelope || envelope.format !== 'nostrkey-backup') {
+                        return { success: false, error: 'Not a valid NostrKey backup file' };
+                    }
+                    if (typeof envelope.version !== 'number' || envelope.version > 1) {
+                        return { success: false, error: 'Backup version not supported. Update NostrKey and try again.' };
+                    }
+                    const payloadStr = JSON.stringify(envelope.payload);
+                    let plaintext;
+                    try {
+                        plaintext = await decryptBlob(payloadStr, password);
+                    } catch (_) {
+                        return { success: false, error: 'Wrong password — could not decrypt backup' };
+                    }
+                    const data = JSON.parse(plaintext);
+                    // Write all backed-up keys to storage
+                    await storage.set(data);
+                    // Update in-memory state
+                    encryptionEnabled = !!data.isEncrypted;
+                    locked = false;
+                    sessionPassword = password;
+                    nostrAccessWhileLocked = data.nostrAccessWhileLocked !== false;
+                    blockCrossOriginFrames = data.blockCrossOriginFrames !== false;
+                    if (typeof data.autoLockMinutes === 'number') {
+                        autoLockTimeout = data.autoLockMinutes * 60 * 1000;
+                    }
+                    // Populate session key cache
+                    sessionKeys.clear();
+                    if (Array.isArray(data.profiles)) {
+                        for (let i = 0; i < data.profiles.length; i++) {
+                            const p = data.profiles[i];
+                            if (p.type === 'bunker' || !p.privKey) continue;
+                            if (isEncryptedBlob(p.privKey)) {
+                                try {
+                                    const hex = await decryptBlob(p.privKey, password);
+                                    sessionKeys.set(i, hex);
+                                } catch (_) {}
+                            } else {
+                                sessionKeys.set(i, p.privKey);
+                            }
+                        }
+                    }
+                    resetAutoLock();
+                    const profileCount = Array.isArray(data.profiles) ? data.profiles.length : 0;
+                    return { success: true, profileCount };
+                } catch (e) {
+                    return { success: false, error: e.message || 'Restore failed' };
+                }
+            });
+            return true;
+
         // nostr: protocol URL handler — no key access needed, no permission prompt
         case 'replaceURL':
             reply(sendResponse, async () => {
diff --git a/src/chrome-manifest.json b/src/chrome-manifest.json
@@ -3,7 +3,7 @@
     "default_locale": "en",
     "name": "__MSG_extension_name__",
     "description": "__MSG_extension_description__",
-    "version": "1.5.7",
+    "version": "1.5.8",
     "short_name": "NostrKey",
     "author": "Humanjava Enterprises Inc",
     "homepage_url": "https://nostrkey.com",
diff --git a/src/firefox-manifest.json b/src/firefox-manifest.json
@@ -3,7 +3,7 @@
     "default_locale": "en",
     "name": "__MSG_extension_name__",
     "description": "__MSG_extension_description__",
-    "version": "1.5.7",
+    "version": "1.5.8",
     "short_name": "NostrKey",
     "author": "Humanjava Enterprises Inc",
     "homepage_url": "https://nostrkey.com",
diff --git a/src/manifest.json b/src/manifest.json
@@ -3,7 +3,7 @@
     "default_locale": "en",
     "name": "__MSG_extension_name__",
     "description": "__MSG_extension_description__",
-    "version": "1.5.7",
+    "version": "1.5.8",
     "author": "Humanjava Enterprises Inc",
     "homepage_url": "https://nostrkey.com",
     "icons": {
diff --git a/src/sidepanel.html b/src/sidepanel.html
@@ -170,6 +170,17 @@
                 background-color: #a6e22e;
             }
             .hidden { display: none !important; }
+            @keyframes slideUp {
+                from { transform: translateY(100%); }
+                to { transform: translateY(0); }
+            }
+            .backup-prompt {
+                background-color: #3e3d32;
+                border-top: 3px solid #a6e22e;
+                padding: 16px;
+                flex-shrink: 0;
+                animation: slideUp 0.3s ease-out;
+            }
             /* iOS Safari extension popup sizing.
                iPad: min-height added via JS for popover auto-sizer.
                iPhone: native half-sheet / full-sheet behavior.
@@ -228,6 +239,27 @@
                             <button id="cancel-reset-btn" class="button flex-1" type="button">Cancel</button>
                         </div>
                     </div>
+                    <!-- Recover from backup (lock screen) -->
+                    <div style="margin-top:8px;text-align:center;width:100%;max-width:320px;">
+                        <button id="restore-backup-btn" type="button" style="background:none;border:none;color:#b0b0a8;font-size:0.85rem;cursor:pointer;text-decoration:underline;">
+                            Recover from backup file
+                        </button>
+                    </div>
+                    <div id="restore-backup-panel" class="hidden" style="width:100%;max-width:320px;margin-top:12px;padding:16px;background:#3e3d32;border-radius:8px;border:1px solid #a6e22e;box-sizing:border-box;">
+                        <p style="color:#f8f8f2;font-size:0.9rem;font-weight:bold;margin-bottom:8px;">Restore from Backup</p>
+                        <p style="color:#b0b0a8;font-size:0.85rem;margin-bottom:12px;">Select your backup file and enter the master password that was active when the backup was created.</p>
+                        <label for="restore-password" style="display:block;font-size:0.8rem;color:#b0b0a8;margin-bottom:4px;">Master password</label>
+                        <input id="restore-password" type="password" class="input w-full" placeholder="Master password from backup" autocomplete="off" style="margin-bottom:8px;" />
+                        <label for="restore-file" style="display:block;font-size:0.8rem;color:#b0b0a8;margin-bottom:4px;">Backup file</label>
+                        <input id="restore-file" type="file" accept=".json" style="color:#b0b0a8;font-size:0.8rem;margin-bottom:12px;width:100%;" />
+                        <div id="restore-error" class="hidden" style="color:#f92672;font-size:0.8rem;margin-bottom:8px;" aria-live="assertive"></div>
+                        <div id="restore-success" class="hidden" style="color:#a6e22e;font-size:0.8rem;margin-bottom:8px;" aria-live="polite"></div>
+                        <div class="flex gap-2">
+                            <button id="do-restore-btn" class="button flex-1" type="button">Restore</button>
+                            <button id="cancel-restore-btn" class="button flex-1" type="button" style="border-color:#b0b0a8;">Cancel</button>
+                        </div>
+                    </div>
+
                     <!-- Active profile + Nostr access toggle -->
                     <div id="locked-access-card" class="hidden" style="width:100%;max-width:320px;margin-top:24px;padding:16px;background:#3e3d32;border-radius:12px;border:1px solid #49483e;">
                         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
@@ -284,6 +316,17 @@
                                 <div class="flex flex-col gap-2" style="width:100%;margin-top:4px;">
                                     <button id="check-vault-btn" class="button w-full" type="button" style="font-size:0.8rem;padding:8px 12px;min-height:36px;">Check for Existing Vault</button>
                                     <button id="setup-encryption-btn" class="button w-full" type="button" style="font-size:0.8rem;padding:8px 12px;min-height:36px;">Create New Vault &amp; Password</button>
+                                    <button id="firstrun-restore-btn" class="button w-full" type="button" style="font-size:0.8rem;padding:8px 12px;min-height:36px;border-color:#b0b0a8;">Recover from Backup File</button>
+                                </div>
+                                <!-- First-run restore panel -->
+                                <div id="firstrun-restore-panel" class="hidden" style="width:100%;margin-top:12px;padding:12px;background:#272822;border-radius:8px;border:1px solid #a6e22e;">
+                                    <label for="firstrun-restore-password" style="display:block;font-size:0.8rem;color:#b0b0a8;margin-bottom:4px;">Master password</label>
+                                    <input id="firstrun-restore-password" type="password" class="input w-full" placeholder="Password from backup" autocomplete="off" style="margin-bottom:8px;" />
+                                    <label for="firstrun-restore-file" style="display:block;font-size:0.8rem;color:#b0b0a8;margin-bottom:4px;">Backup file</label>
+                                    <input id="firstrun-restore-file" type="file" accept=".json" style="color:#b0b0a8;font-size:0.8rem;margin-bottom:8px;width:100%;" />
+                                    <div id="firstrun-restore-error" class="hidden" style="color:#f92672;font-size:0.8rem;margin-bottom:8px;" aria-live="assertive"></div>
+                                    <div id="firstrun-restore-success" class="hidden" style="color:#a6e22e;font-size:0.8rem;margin-bottom:8px;" aria-live="polite"></div>
+                                    <button id="firstrun-do-restore-btn" class="button w-full" type="button" style="font-size:0.8rem;min-height:36px;">Restore</button>
                                 </div>
                             </div>
                         </div>
@@ -587,6 +630,7 @@ <h2 class="section-title">Sync</h2>
                             <h2 class="section-title">Advanced</h2>
                             <button id="open-settings-btn" class="button w-full mb-2">Full Settings</button>
                             <button id="open-history-btn" class="button w-full mb-2">Event History</button>
+                            <button id="download-backup-btn" class="button w-full mb-2">Download Backup</button>
                             <button id="open-experimental-btn" class="button w-full" style="display:none">Experimental</button>
                         </div>
                         <p style="font-size:0.8rem;color:#b0b0a8;text-align:center;margin-top:24px;">
@@ -596,6 +640,21 @@ <h2 class="section-title">Advanced</h2>
                     </div>
                 </div>
 
+                <!-- Backup prompt (slide-up bottom sheet) -->
+                <div id="backup-prompt" class="backup-prompt hidden">
+                    <div class="flex items-center gap-3" style="margin-bottom:8px;">
+                        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a6e22e" stroke-width="1.5">
+                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                        </svg>
+                        <span style="color:#f8f8f2;font-size:0.95rem;font-weight:600;">Back up your vault</span>
+                    </div>
+                    <p style="color:#b0b0a8;font-size:0.8rem;margin-bottom:12px;line-height:1.4;">Save an encrypted backup file. You'll need your master password to restore it.</p>
+                    <div class="flex gap-2">
+                        <button id="backup-save-btn" class="button flex-1" type="button">Save Backup</button>
+                        <button id="backup-dismiss-btn" class="button flex-1" type="button" style="border-color:#b0b0a8;">Dismiss</button>
+                    </div>
+                </div>
+
                 <!-- Bottom Tab Navigation -->
                 <nav class="sidepanel-tabs" role="tablist" aria-label="Main navigation">
                     <button class="tab-btn active" data-view="home" role="tab" aria-selected="true" aria-controls="view-home" type="button">
diff --git a/src/sidepanel.js b/src/sidepanel.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "nostrkey",`
`3`		`- "version": "1.5.7",`
	`3`	`+ "version": "1.5.8",`
`4`	`4`	`"description": "Nostr key manager and signer for web apps. Securely store your private keys and sign events without exposing them to websites.",`
`5`	`5`	`"source": [`
`6`	`6`	`"background.js",`