From 50371b9297de32ca46546006aeea9fdf755a9740 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Thu, 28 May 2026 10:45:33 +0200
Subject: [PATCH] feat: implement usernameless Passkey login flow using
 discoverable credentials

---
 client/src/components/AuthOnboarding.tsx | 74 ++++++++++++++----------
 client/src/services/auth.ts              | 18 ++++--
 server/src/routes/auth.ts                | 72 +++++++++++------------
 3 files changed, 89 insertions(+), 75 deletions(-)

diff --git a/client/src/components/AuthOnboarding.tsx b/client/src/components/AuthOnboarding.tsx
index c047a4a..f6138e9 100644
--- a/client/src/components/AuthOnboarding.tsx
+++ b/client/src/components/AuthOnboarding.tsx
@@ -40,14 +40,13 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
     }
   }
 
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!username.trim()) return
+  const handleLogin = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault()
 
     setLoading(true)
     setError(null)
     try {
-      const result = await loginUser(username.trim())
+      const result = await loginUser()
       if (result.verified) {
         if (result.prfSuccess) {
           // Biometric E2E decryption succeeded
@@ -55,6 +54,9 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
         } else {
           // Biometrics succeeded but PRF key wasn't supported/available, fall back to recovery phrase
           setEncryptedPayloads(result.encryptedPayloads)
+          if (result.username) {
+            setUsername(result.username)
+          }
           setShowRecoveryFallback(true)
         }
       }
@@ -72,7 +74,8 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
     setLoading(true)
     setError(null)
     try {
-      const success = await completeLoginWithRecovery(username.trim(), recoveryInput.trim(), encryptedPayloads)
+      const resolvedUser = username.trim() || encryptedPayloads.username
+      const success = await completeLoginWithRecovery(resolvedUser, recoveryInput.trim(), encryptedPayloads)
       if (success) {
         onAuthenticated()
       } else {
@@ -180,40 +183,51 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
         <p className="tagline">{t('auth.tagline')}</p>
       </div>
 
-      <form className="auth-form">
-        <div className="input-group">
-          <input
-            type="text"
-            className="input-text"
-            placeholder="Username / Skipper Name"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            disabled={loading}
-            required
-          />
+      <div className="auth-form" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        {/* Prominent Login button */}
+        <button
+          type="button"
+          className="btn primary"
+          onClick={() => handleLogin()}
+          disabled={loading}
+          style={{ width: '100%', padding: '16px' }}
+        >
+          {loading ? 'Processing...' : t('auth.login')}
+        </button>
+
+        {/* Separator */}
+        <div style={{ display: 'flex', alignItems: 'center', margin: '10px 0', width: '100%' }}>
+          <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.1)' }}></div>
+          <span style={{ padding: '0 10px', fontSize: '12px', color: '#64748b', textTransform: 'uppercase' }}>or register</span>
+          <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.1)' }}></div>
         </div>
 
-        {error && <div className="auth-error">{error}</div>}
+        {/* Registration form */}
+        <form onSubmit={handleRegister} style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
+          <div className="input-group">
+            <input
+              type="text"
+              className="input-text"
+              placeholder="Username / Skipper Name"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              disabled={loading}
+              required
+            />
+          </div>
 
-        <div className="auth-submit-actions">
           <button
-            type="button"
-            className="btn primary"
-            onClick={handleLogin}
-            disabled={loading || !username.trim()}
-          >
-            {loading ? 'Processing...' : t('auth.login')}
-          </button>
-          <button
-            type="button"
+            type="submit"
             className="btn secondary"
-            onClick={handleRegister}
             disabled={loading || !username.trim()}
+            style={{ width: '100%' }}
           >
             {t('auth.register')}
           </button>
-        </div>
-      </form>
+        </form>
+
+        {error && <div className="auth-error">{error}</div>}
+      </div>
 
       <div className="auth-footer">
         <button className="btn-icon-text" onClick={toggleLanguage}>
diff --git a/client/src/services/auth.ts b/client/src/services/auth.ts
index ff7c15f..75e37ec 100644
--- a/client/src/services/auth.ts
+++ b/client/src/services/auth.ts
@@ -113,15 +113,17 @@ export async function registerUser(username: string): Promise<RegistrationResult
 export interface LoginResult {
   verified: boolean
   prfSuccess: boolean
+  username?: string
   encryptedPayloads?: {
     encryptedMasterKeyRec: string
     encryptedMasterKeyRecIv: string
     encryptedMasterKeyRecTag: string
     userId: string
+    username: string
   }
 }
 
-export async function loginUser(username: string): Promise<LoginResult> {
+export async function loginUser(username?: string): Promise<LoginResult> {
   // 1. Get authentication options
   const optionsRes = await fetch(`${API_BASE}/login-options`, {
     method: 'POST',
@@ -154,8 +156,8 @@ export async function loginUser(username: string): Promise<LoginResult> {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
-      username,
-      credentialResponse
+      credentialResponse,
+      challenge: options.challenge
     })
   })
 
@@ -169,6 +171,8 @@ export async function loginUser(username: string): Promise<LoginResult> {
     return { verified: false, prfSuccess: false }
   }
 
+  const resolvedUsername = result.username
+
   // Try to decrypt master key using biometric PRF results
   const prfResults = (credentialResponse as any).clientExtensionResults?.prf
 
@@ -182,9 +186,9 @@ export async function loginUser(username: string): Promise<LoginResult> {
         prfKey
       )
       activeMasterKey = decryptedMaster
-      localStorage.setItem('active_username', username)
+      localStorage.setItem('active_username', resolvedUsername)
       localStorage.setItem('active_userid', result.userId)
-      return { verified: true, prfSuccess: true }
+      return { verified: true, prfSuccess: true, username: resolvedUsername }
     } catch (e) {
       console.warn('PRF decryption failed, falling back to recovery phrase:', e)
     }
@@ -194,11 +198,13 @@ export async function loginUser(username: string): Promise<LoginResult> {
   return {
     verified: true,
     prfSuccess: false,
+    username: resolvedUsername,
     encryptedPayloads: {
       encryptedMasterKeyRec: result.encryptedMasterKeyRec,
       encryptedMasterKeyRecIv: result.encryptedMasterKeyRecIv,
       encryptedMasterKeyRecTag: result.encryptedMasterKeyRecTag,
-      userId: result.userId
+      userId: result.userId,
+      username: resolvedUsername
     }
   }
 }
diff --git a/server/src/routes/auth.ts b/server/src/routes/auth.ts
index 840c63b..5422c40 100644
--- a/server/src/routes/auth.ts
+++ b/server/src/routes/auth.ts
@@ -16,6 +16,7 @@ const origin = process.env.ORIGIN || 'http://localhost:5173'
 // In-memory challenge stores
 const registrationChallenges = new Map<string, string>()
 const authenticationChallenges = new Map<string, { challenge: string; userId: string }>()
+const activeChallenges = new Set<string>()
 
 // 1. Generate Registration Options
 router.post('/register-options', async (req, res) => {
@@ -127,33 +128,31 @@ router.post('/register-verify', async (req, res) => {
 router.post('/login-options', async (req, res) => {
   try {
     const { username } = req.body
-    if (!username) {
-      return res.status(400).json({ error: 'Username is required' })
-    }
 
-    const user = await prisma.user.findUnique({
-      where: { username },
-      include: { credentials: true }
-    })
-
-    if (!user) {
-      return res.status(404).json({ error: 'User not found' })
+    // If username is supplied, we do a targeted login, otherwise usernameless
+    let allowCredentials: any[] = []
+    if (username) {
+      const user = await prisma.user.findUnique({
+        where: { username },
+        include: { credentials: true }
+      })
+      if (user) {
+        allowCredentials = user.credentials.map(cred => ({
+          id: Buffer.from(cred.credentialId, 'base64url'),
+          type: 'public-key',
+          transports: cred.transports as any[]
+        }))
+      }
     }
 
     const options = await generateAuthenticationOptions({
       rpID,
-      allowCredentials: user.credentials.map(cred => ({
-        id: Buffer.from(cred.credentialId, 'base64url'),
-        type: 'public-key',
-        transports: cred.transports as any[]
-      })),
+      allowCredentials,
       userVerification: 'preferred'
     })
 
-    authenticationChallenges.set(username, {
-      challenge: options.challenge,
-      userId: user.id
-    })
+    // Store challenge
+    activeChallenges.add(options.challenge)
 
     return res.json(options)
   } catch (error: any) {
@@ -165,27 +164,32 @@ router.post('/login-options', async (req, res) => {
 // 4. Verify Authentication Response
 router.post('/login-verify', async (req, res) => {
   try {
-    const { username, credentialResponse } = req.body
-    if (!username || !credentialResponse) {
-      return res.status(400).json({ error: 'Username and credentialResponse are required' })
+    const { credentialResponse, challenge } = req.body
+    if (!credentialResponse || !challenge) {
+      return res.status(400).json({ error: 'credentialResponse and challenge are required' })
     }
 
-    const expectedChallengeInfo = authenticationChallenges.get(username)
-    if (!expectedChallengeInfo) {
+    // Verify challenge
+    if (!activeChallenges.has(challenge)) {
       return res.status(400).json({ error: 'Challenge not found or expired' })
     }
+    activeChallenges.delete(challenge)
 
+    // Find the credential in DB
     const dbCred = await prisma.credential.findUnique({
-      where: { credentialId: credentialResponse.id }
+      where: { credentialId: credentialResponse.id },
+      include: { user: true }
     })
 
-    if (!dbCred || dbCred.userId !== expectedChallengeInfo.userId) {
-      return res.status(400).json({ error: 'Credential not recognized for this user' })
+    if (!dbCred) {
+      return res.status(400).json({ error: 'Credential not recognized' })
     }
 
+    const user = dbCred.user
+
     const verification = await verifyAuthenticationResponse({
       response: credentialResponse,
-      expectedChallenge: expectedChallengeInfo.challenge,
+      expectedChallenge: challenge,
       expectedOrigin: origin,
       expectedRPID: rpID,
       authenticator: {
@@ -205,20 +209,10 @@ router.post('/login-verify', async (req, res) => {
       data: { counter: BigInt(verification.authenticationInfo.newCounter) }
     })
 
-    authenticationChallenges.delete(username)
-
-    // Retrieve user keys
-    const user = await prisma.user.findUnique({
-      where: { username }
-    })
-
-    if (!user) {
-      return res.status(404).json({ error: 'User not found' })
-    }
-
     return res.json({
       verified: true,
       userId: user.id,
+      username: user.username,
       encryptedMasterKeyPrf: user.encryptedMasterKeyPrf,
       encryptedMasterKeyPrfIv: user.encryptedMasterKeyPrfIv,
       encryptedMasterKeyPrfTag: user.encryptedMasterKeyPrfTag,