feat: passkey login without email + conditional mediation (autofill)

- Require residentKey on registration so passkeys are discoverable
- login/begin now works with or without email (empty body = discoverable flow)
- login/complete extracts userId from response.userHandle for discoverable passkeys
- Challenge map keyed by challenge string instead of userId
- Frontend: add conditional mediation (passkey autofill suggestions) on login page
- Frontend: passkey button no longer requires email field
- Frontend: abort controller cleans up conditional mediation on navigation

Author: ddrayko

public/js/app.js

@@ -518,7 +518,7 @@ function renderLoginPage() {
           <div class="auth-error"></div>
           <div class="form-group">
             <label for="login-email">Email</label>
-            <input type="email" id="login-email" placeholder="your@email.com" required autocomplete="email" />
+            <input type="email" id="login-email" placeholder="your@email.com" required autocomplete="email webauthn" />
           </div>
           <div class="form-group">
             <label for="login-password">Password</label>
@@ -548,6 +548,8 @@ function renderLoginPage() {
     e.preventDefault();
     navigateTo('signup');
   });
+
+  setupPasskeyAutofill();
 }
 
 function renderRegisterPage() {
@@ -634,47 +636,73 @@ async function handleLogin(e) {
   }
 }
 
+async function completePasskeyLogin(credential) {
+  const data = await api('/auth/passkeys/login/complete', {
+    method: 'POST',
+    body: JSON.stringify({
+      response: serializeCredential(credential),
+    }),
+  });
+  state.token = data.token;
+  state.user = data.user;
+  localStorage.setItem('zh_token', data.token);
+  localStorage.setItem('zh_user', JSON.stringify(data.user));
+  history.replaceState({ page: 'overview' }, '', '/');
+  renderDashboard();
+}
+
+let passkeyAbortController = null;
+
+async function setupPasskeyAutofill() {
+  if (passkeyAbortController) {
+    passkeyAbortController.abort();
+    passkeyAbortController = null;
+  }
+  if (!navigator.credentials || typeof navigator.credentials.get !== 'function') return;
+
+  try {
+    const beginData = await api('/auth/passkeys/login/begin', {
+      method: 'POST',
+      body: JSON.stringify({}),
+    });
+
+    passkeyAbortController = new AbortController();
+    const credential = await navigator.credentials.get({
+      publicKey: prepareWebAuthnOptions(beginData.options),
+      mediation: 'conditional',
+      signal: passkeyAbortController.signal,
+    });
+
+    if (credential) {
+      await completePasskeyLogin(credential);
+    }
+  } catch (err) {
+    if (err.name === 'AbortError' || err.name === 'NotAllowedError') return;
+    console.error('Passkey autofill error:', err.message);
+  }
+}
+
 async function handlePasskeyLogin() {
   const btn = $('#passkey-login-btn');
   const errorEl = $('#login-form .auth-error');
   if (errorEl) errorEl.classList.remove('show');
 
-  const email = $('#login-email').value.trim();
-  if (!email) {
-    if (errorEl) {
-      errorEl.textContent = 'Enter your email first, then click Sign in with Passkey.';
-      errorEl.classList.add('show');
-    }
-    return;
-  }
-
   btn.disabled = true;
   btn.innerHTML = '<span class="spinner"></span>';
 
   try {
+    const email = $('#login-email').value.trim();
+    const body = email ? { email } : {};
     const beginData = await api('/auth/passkeys/login/begin', {
       method: 'POST',
-      body: JSON.stringify({ email }),
+      body: JSON.stringify(body),
     });
 
     const credential = await navigator.credentials.get({
       publicKey: prepareWebAuthnOptions(beginData.options),
     });
 
-    const completeData = await api('/auth/passkeys/login/complete', {
-      method: 'POST',
-      body: JSON.stringify({
-        userId: beginData.userId,
-        response: serializeCredential(credential),
-      }),
-    });
-
-    state.token = completeData.token;
-    state.user = completeData.user;
-    localStorage.setItem('zh_token', completeData.token);
-    localStorage.setItem('zh_user', JSON.stringify(completeData.user));
-    history.replaceState({ page: 'overview' }, '', '/');
-    renderDashboard();
+    await completePasskeyLogin(credential);
   } catch (err) {
     if (errorEl) {
       errorEl.textContent = err.message;
@@ -1017,6 +1045,10 @@ function initSidebarTooltip() {
 
 function navigateTo(page) {
   if (state.notifPanelOpen) closeNotifPanel();
+  if (passkeyAbortController) {
+    passkeyAbortController.abort();
+    passkeyAbortController = null;
+  }
   const parts = page.split('/');
   let basePage = parts[0] || 'overview';
   const param = parts[1];

routes/passkeys.js

@@ -66,11 +66,16 @@ router.post('/passkeys/register/begin', authenticateToken, async (req, res) => {
       attestationType: 'none',
       excludeCredentials,
       userId: new TextEncoder().encode(String(userId).padStart(16, '0')),
+      authenticatorSelection: {
+        residentKey: 'required',
+        userVerification: 'preferred',
+      },
     });
 
-    challengeMap.set(userId, {
+    challengeMap.set(options.challenge, {
       challenge: options.challenge,
       timestamp: Date.now(),
+      userId,
     });
 
     res.json({ options });
@@ -89,12 +94,13 @@ router.post('/passkeys/register/complete', authenticateToken, async (req, res) =
       return res.status(400).json({ error: 'Registration response is required' });
     }
 
-    const expectedChallenge = challengeMap.get(userId);
+    const challengeFromResponse = JSON.parse(isoBase64URL.toUTF8String(response.response.clientDataJSON)).challenge;
+    const expectedChallenge = challengeMap.get(challengeFromResponse);
     if (!expectedChallenge) {
       return res.status(400).json({ error: 'No registration in progress. Please try again.' });
     }
 
-    challengeMap.delete(userId);
+    challengeMap.delete(challengeFromResponse);
 
     const { rpID, origin } = getWebAuthnConfig(req);
     const verification = await verifyRegistrationResponse({
@@ -134,50 +140,51 @@ router.post('/passkeys/register/complete', authenticateToken, async (req, res) =
 router.post('/passkeys/login/begin', async (req, res) => {
   try {
     const { email } = req.body;
-    if (!email || typeof email !== 'string') {
-      return res.status(400).json({ error: 'Email is required' });
-    }
-
-    const users = await query('SELECT id, email, username, auth_restricted FROM users WHERE email = ?', [email]);
-    if (!users.length) {
-      return res.status(404).json({ error: 'No account found with this email' });
-    }
-
-    const user = users[0];
-    if (user.auth_restricted) {
-      return res.status(403).json({ error: 'Your account has been restricted. Contact support for assistance.' });
-    }
-
-    const passkeys = await query(
-      'SELECT id, credential_id, transports FROM passkeys WHERE user_id = ?',
-      [user.id]
-    );
-
-    if (!passkeys.length) {
-      return res.status(404).json({ error: 'No passkeys registered for this account' });
+    let userId = null;
+    let allowCredentials = [];
+
+    if (email && typeof email === 'string') {
+      const users = await query('SELECT id, email, username, auth_restricted FROM users WHERE email = ?', [email]);
+      if (!users.length) {
+        return res.status(404).json({ error: 'No account found with this email' });
+      }
+
+      const user = users[0];
+      if (user.auth_restricted) {
+        return res.status(403).json({ error: 'Your account has been restricted. Contact support for assistance.' });
+      }
+
+      userId = user.id;
+      const passkeys = await query(
+        'SELECT id, credential_id, transports FROM passkeys WHERE user_id = ?',
+        [user.id]
+      );
+
+      if (!passkeys.length) {
+        return res.status(404).json({ error: 'No passkeys registered for this account' });
+      }
+
+      allowCredentials = passkeys.map(k => ({
+        id: k.credential_id,
+        type: 'public-key',
+        transports: k.transports ? k.transports.split(',') : ['internal'],
+      }));
     }
 
-    const allowCredentials = passkeys.map(k => ({
-      id: k.credential_id,
-      type: 'public-key',
-      transports: k.transports ? k.transports.split(',') : ['internal'],
-    }));
-
     const { rpID } = getWebAuthnConfig(req);
     const options = await generateAuthenticationOptions({
       rpID,
       allowCredentials,
       userVerification: 'preferred',
     });
 
-    challengeMap.set(`login:${user.id}`, {
+    challengeMap.set(options.challenge, {
       challenge: options.challenge,
       timestamp: Date.now(),
-      email,
-      userId: user.id,
+      userId,
     });
 
-    res.json({ options, userId: user.id });
+    res.json({ options, userId });
   } catch (err) {
     console.error('Passkey login begin error:', err.message);
     res.status(500).json({ error: 'Failed to initiate passkey login' });
@@ -186,17 +193,28 @@ router.post('/passkeys/login/begin', async (req, res) => {
 
 router.post('/passkeys/login/complete', async (req, res) => {
   try {
-    const { response, userId } = req.body;
-    if (!response || !userId) {
-      return res.status(400).json({ error: 'Response and userId are required' });
+    const { response, userId: bodyUserId } = req.body;
+    if (!response) {
+      return res.status(400).json({ error: 'Response is required' });
     }
 
-    const expectedChallenge = challengeMap.get(`login:${userId}`);
+    const challengeFromResponse = JSON.parse(isoBase64URL.toUTF8String(response.response.clientDataJSON)).challenge;
+    const expectedChallenge = challengeMap.get(challengeFromResponse);
     if (!expectedChallenge) {
       return res.status(400).json({ error: 'No login in progress. Please try again.' });
     }
 
-    challengeMap.delete(`login:${userId}`);
+    challengeMap.delete(challengeFromResponse);
+
+    let userId = bodyUserId || expectedChallenge.userId;
+    if (!userId && response.response.userHandle) {
+      const userHandleBytes = isoBase64URL.toBuffer(response.response.userHandle);
+      userId = parseInt(new TextDecoder().decode(userHandleBytes), 10);
+    }
+
+    if (!userId) {
+      return res.status(400).json({ error: 'Could not identify user. Try logging in with email.' });
+    }
 
     const passkeys = await query(
       'SELECT id, credential_id, public_key, counter, transports FROM passkeys WHERE user_id = ?',