feat(web): in-browser Ed25519 key generation

MrOplus · MrOplus · commit 0b3baf802bd5 · 2026-06-21T03:01:38.000+04:00
Generate a key pair with Web Crypto entirely client-side. The private key is
encoded into the OpenSSH openssh-key-v1 format, revealed once with download/copy,
and never sent to the server; the public key is added to the user's handle
automatically.
diff --git a/README.md b/README.md
@@ -38,6 +38,9 @@ This is a clean-room, open-source SSH identity service that you can self-host.
 - 🧭 **Content negotiation.** Browsers get a polished profile page; `curl`/`wget`
   get plain text. Append `.keys` or `?format=txt` to force plain text.
 - 🛡️ **Passkey auth.** Phishing-resistant WebAuthn for register and login.
+- ✨ **In-browser key generation.** Mint an Ed25519 key with Web Crypto; the
+  private key is shown once and never touches the server, the public key is added
+  automatically.
 - 🧩 **Modern key types.** Ed25519, ECDSA, RSA and FIDO `sk-*` keys, validated on
   the wire and fingerprinted (SHA256).
 - 🪶 **Single container.** Node + SQLite. No external services required.
diff --git a/apps/web/src/components/GenerateKey.tsx b/apps/web/src/components/GenerateKey.tsx
@@ -0,0 +1,187 @@
+import { AlertTriangle, Download, KeySquare, Loader2, Sparkles, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { api, type SshKey } from '../lib/api';
+import { ed25519Supported, generateEd25519KeyPair, type GeneratedKeyPair } from '../lib/sshkeygen';
+import { Alert } from './Alert';
+import { CodeBlock } from './CodeBlock';
+
+function download(filename: string, contents: string) {
+  const blob = new Blob([contents], { type: 'application/octet-stream' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+export function GenerateKey({ onAdded }: { onAdded: (key: SshKey) => void }) {
+  const [label, setLabel] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [supported, setSupported] = useState<boolean | null>(null);
+  const [result, setResult] = useState<{ pair: GeneratedKeyPair; stored: SshKey } | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    void ed25519Supported().then((ok) => active && setSupported(ok));
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const generate = async () => {
+    setError(null);
+    setBusy(true);
+    try {
+      const pair = await generateEd25519KeyPair(label.trim());
+      // Only the public half is uploaded; the private key stays in this tab.
+      const stored = await api.addKey(label.trim(), pair.publicKey);
+      onAdded(stored);
+      setResult({ pair, stored });
+      setLabel('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Key generation failed.');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (supported === false) {
+    return (
+      <div className="card p-6">
+        <h2 className="font-semibold text-white">Generate a key pair</h2>
+        <div className="mt-3">
+          <Alert
+            kind="error"
+            message="This browser can't generate Ed25519 keys. Use ssh-keygen locally and paste the public key above."
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="card p-6">
+        <div className="flex items-center gap-2">
+          <Sparkles className="h-4 w-4 text-accent-400" />
+          <h2 className="font-semibold text-white">Generate a key pair in your browser</h2>
+        </div>
+        <p className="mt-1.5 text-sm text-slate-400">
+          Creates an Ed25519 key with Web Crypto. The private key is shown only once and never sent to
+          the server — the public key is added to your handle automatically.
+        </p>
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+          <input
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            placeholder="Label (optional), e.g. Work laptop"
+            className="input sm:flex-1"
+          />
+          <button onClick={generate} disabled={busy || supported === null} className="btn-primary shrink-0">
+            {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <KeySquare className="h-4 w-4" />}
+            Generate
+          </button>
+        </div>
+        {error && (
+          <div className="mt-3">
+            <Alert kind="error" message={error} />
+          </div>
+        )}
+      </div>
+
+      {result && (
+        <PrivateKeyModal
+          pair={result.pair}
+          fingerprint={result.stored.fingerprint}
+          onClose={() => setResult(null)}
+          onDownload={download}
+        />
+      )}
+    </>
+  );
+}
+
+function PrivateKeyModal({
+  pair,
+  fingerprint,
+  onClose,
+  onDownload,
+}: {
+  pair: GeneratedKeyPair;
+  fingerprint: string;
+  onClose: () => void;
+  onDownload: (filename: string, contents: string) => void;
+}) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+    window.addEventListener('keydown', onKey);
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = '';
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 grid place-items-center bg-ink-950/80 p-4 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      onClick={onClose}
+    >
+      <div
+        className="card w-full max-w-2xl animate-fade-up p-6 shadow-glow"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-start justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-white">Save your private key</h2>
+            <p className="mt-1 font-mono text-xs text-slate-500">{fingerprint}</p>
+          </div>
+          <button onClick={onClose} aria-label="Close" className="rounded-lg p-1.5 text-slate-400 hover:bg-ink-800 hover:text-white">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="mt-4 flex items-start gap-2.5 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>
+            This private key is shown <strong>once</strong> and is never stored by SSHID. Download or copy
+            it now and keep it secret. The public key has already been added to your handle.
+          </span>
+        </div>
+
+        <div className="mt-4 space-y-3">
+          <CodeBlock label="id_ed25519 (private key)" code={pair.privateKey}>
+            {pair.privateKey}
+          </CodeBlock>
+
+          <div className="flex flex-wrap gap-3">
+            <button onClick={() => onDownload(pair.filename, pair.privateKey)} className="btn-primary">
+              <Download className="h-4 w-4" />
+              Download private key
+            </button>
+            <button
+              onClick={() => onDownload(`${pair.filename}.pub`, pair.publicKey + '\n')}
+              className="btn-ghost"
+            >
+              <Download className="h-4 w-4" />
+              Download public key
+            </button>
+          </div>
+
+          <p className="text-xs text-slate-500">
+            Install it with{' '}
+            <code className="font-mono text-slate-400">
+              mv {pair.filename} ~/.ssh/ &amp;&amp; chmod 600 ~/.ssh/{pair.filename}
+            </code>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/lib/sshkeygen.ts b/apps/web/src/lib/sshkeygen.ts
@@ -0,0 +1,136 @@
+/**
+ * Client-side SSH key generation.
+ *
+ * An Ed25519 key pair is generated with the Web Crypto API and encoded into the
+ * exact byte formats OpenSSH uses:
+ *   - the public key as a single `ssh-ed25519 AAAA… comment` line, and
+ *   - the private key as an unencrypted `openssh-key-v1` PEM blob.
+ *
+ * The private key is produced and handled entirely in the browser — it is never
+ * transmitted to the server. Only the public half is uploaded.
+ */
+
+export interface GeneratedKeyPair {
+  /** OpenSSH single-line public key (`ssh-ed25519 <base64> <comment>`). */
+  publicKey: string;
+  /** Unencrypted OpenSSH private key (PEM). */
+  privateKey: string;
+  /** Suggested filename stem, e.g. `id_ed25519`. */
+  filename: string;
+}
+
+/** Whether this browser can generate Ed25519 keys via Web Crypto. */
+export async function ed25519Supported(): Promise<boolean> {
+  try {
+    await crypto.subtle.generateKey({ name: 'Ed25519' }, true, ['sign', 'verify']);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+class ByteWriter {
+  private chunks: Uint8Array[] = [];
+
+  bytes(data: Uint8Array): this {
+    this.chunks.push(data);
+    return this;
+  }
+
+  uint32(value: number): this {
+    const b = new Uint8Array(4);
+    new DataView(b.buffer).setUint32(0, value, false);
+    return this.bytes(b);
+  }
+
+  /** SSH wire-format string: 4-byte big-endian length prefix + payload. */
+  sshString(data: Uint8Array | string): this {
+    const payload = typeof data === 'string' ? new TextEncoder().encode(data) : data;
+    return this.uint32(payload.length).bytes(payload);
+  }
+
+  concat(): Uint8Array {
+    const total = this.chunks.reduce((n, c) => n + c.length, 0);
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const c of this.chunks) {
+      out.set(c, offset);
+      offset += c.length;
+    }
+    return out;
+  }
+}
+
+function toBase64(bytes: Uint8Array): string {
+  let binary = '';
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary);
+}
+
+function wrap(base64: string, width = 70): string {
+  const lines: string[] = [];
+  for (let i = 0; i < base64.length; i += width) lines.push(base64.slice(i, i + width));
+  return lines.join('\n');
+}
+
+function publicKeyBlob(pub: Uint8Array): Uint8Array {
+  return new ByteWriter().sshString('ssh-ed25519').sshString(pub).concat();
+}
+
+function encodePrivateKey(seed: Uint8Array, pub: Uint8Array, comment: string): string {
+  const checkInt = crypto.getRandomValues(new Uint32Array(1))[0]!;
+
+  // priv field is seed(32) || public(32), as OpenSSH stores it.
+  const priv = new Uint8Array(64);
+  priv.set(seed, 0);
+  priv.set(pub, 32);
+
+  let privateSection = new ByteWriter()
+    .uint32(checkInt)
+    .uint32(checkInt)
+    .sshString('ssh-ed25519')
+    .sshString(pub)
+    .sshString(priv)
+    .sshString(comment)
+    .concat();
+
+  // Pad to a multiple of the cipher block size (8 for "none") with 1,2,3,…
+  const padLen = (8 - (privateSection.length % 8)) % 8;
+  if (padLen > 0) {
+    const padded = new Uint8Array(privateSection.length + padLen);
+    padded.set(privateSection, 0);
+    for (let i = 0; i < padLen; i++) padded[privateSection.length + i] = i + 1;
+    privateSection = padded;
+  }
+
+  const magic = new TextEncoder().encode('openssh-key-v1\0');
+  const body = new ByteWriter()
+    .bytes(magic)
+    .sshString('none') // ciphername
+    .sshString('none') // kdfname
+    .sshString('') // kdfoptions
+    .uint32(1) // number of keys
+    .sshString(publicKeyBlob(pub))
+    .sshString(privateSection)
+    .concat();
+
+  return `-----BEGIN OPENSSH PRIVATE KEY-----\n${wrap(toBase64(body))}\n-----END OPENSSH PRIVATE KEY-----\n`;
+}
+
+export async function generateEd25519KeyPair(comment: string): Promise<GeneratedKeyPair> {
+  const label = comment.trim() || 'sshid';
+  const keyPair = (await crypto.subtle.generateKey({ name: 'Ed25519' }, true, [
+    'sign',
+    'verify',
+  ])) as CryptoKeyPair;
+
+  const pub = new Uint8Array(await crypto.subtle.exportKey('raw', keyPair.publicKey));
+  // PKCS#8 for Ed25519 is a fixed prefix followed by the 32-byte seed.
+  const pkcs8 = new Uint8Array(await crypto.subtle.exportKey('pkcs8', keyPair.privateKey));
+  const seed = pkcs8.slice(pkcs8.length - 32);
+
+  const publicKey = `ssh-ed25519 ${toBase64(publicKeyBlob(pub))} ${label}`;
+  const privateKey = encodePrivateKey(seed, pub, label);
+
+  return { publicKey, privateKey, filename: 'id_ed25519' };
+}
diff --git a/apps/web/src/pages/Dashboard.tsx b/apps/web/src/pages/Dashboard.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState, type FormEvent } from 'react';
 import { Navigate } from 'react-router-dom';
 import { Alert } from '../components/Alert';
 import { CodeBlock } from '../components/CodeBlock';
+import { GenerateKey } from '../components/GenerateKey';
 import { api, type SshKey } from '../lib/api';
 import { useAuth } from '../lib/auth';
 import { PUBLIC_HOST, PUBLIC_ORIGIN } from '../lib/constants';
@@ -41,6 +42,7 @@ export function Dashboard() {
 
       <section className="mt-8 grid gap-6 lg:grid-cols-[1fr_360px]">
         <div className="space-y-6">
+          <GenerateKey onAdded={(k) => setKeys((prev) => [...prev, k])} />
           <AddKeyForm onAdded={(k) => setKeys((prev) => [...prev, k])} />
 
           <div className="card">
