Enhance Cross-Device registration debugging and API options

Update the registrieren.vue component to improve debug logging for Cross-Device registration, including checks for local authenticators and tunnel server connections. Add warnings for potential issues when Cross-Device is not used. Modify the register-passkey-options API to ensure compatibility with Cross-Device requirements by allowing both platform and cross-platform authenticators. This update aims to provide clearer insights and troubleshooting guidance during the Passkey registration process.

pages/registrieren.vue

@@ -737,16 +737,32 @@ const handleRegisterWithPasskey = async () => {
       
       // WICHTIG: Prüfe, ob Cross-Device überhaupt unterstützt wird
       console.log('[DEBUG] Checking Cross-Device support...')
-      console.log('[DEBUG] Platform Authenticator Available:', await mod.platformAuthenticatorIsAvailable())
+      const platformAuthAvailable = await mod.platformAuthenticatorIsAvailable()
-      console.log('[DEBUG] Browser Supports WebAuthn:', mod.browserSupportsWebAuthn())
+      const browserSupportsWebAuthn = mod.browserSupportsWebAuthn()
+      console.log('[DEBUG] Platform Authenticator Available:', platformAuthAvailable)
+      console.log('[DEBUG] Browser Supports WebAuthn:', browserSupportsWebAuthn)
+      
+      // Prüfe, ob ein lokaler Authenticator verfügbar ist
+      // Wenn ja, wird möglicherweise kein Cross-Device verwendet
+      if (platformAuthAvailable) {
+        console.warn('[DEBUG] ⚠️ WARNUNG: Platform Authenticator ist verfügbar!')
+        console.warn('[DEBUG] Der Browser könnte einen lokalen Authenticator verwenden (Windows Hello, TouchID)')
+        console.warn('[DEBUG] statt Cross-Device. Prüfe, ob ein QR-Code erscheint oder ein lokaler Dialog.')
+      }
       
       // Versuche startRegistration aufzurufen
       // Bei Cross-Device wird automatisch ein QR-Code generiert
-      // Das Smartphone muss dann die Website öffnen können
+      // Der Browser sollte eine Verbindung zu Tunnel-Servern aufbauen (cable.ua5v.com, cable.auth.com)
       console.log('[DEBUG] Calling startRegistration...')
-      console.log('[DEBUG] ⚠️ WICHTIG: Wenn Cross-Device verwendet wird, sollte ein QR-Code erscheinen')
+      console.log('[DEBUG] ⚠️ WICHTIG: Prüfe Browser Network-Tab während startRegistration läuft!')
-      console.log('[DEBUG] ⚠️ Das Smartphone muss dann die Website öffnen können:', window.location.origin)
+      console.log('[DEBUG] Erwartete Tunnel-Server-Requests:')
-      console.log('[DEBUG] ⚠️ Prüfe, ob das Smartphone die Website erreichen kann!')
+      console.log('[DEBUG]   - cable.ua5v.com (Google Chrome/Edge)')
+      console.log('[DEBUG]   - cable.auth.com (Apple Safari)')
+      console.log('[DEBUG]   - Andere Tunnel-Server (abhängig vom Browser)')
+      console.log('[DEBUG] Wenn KEINE Tunnel-Requests sichtbar sind:')
+      console.log('[DEBUG]   → Cross-Device wird NICHT verwendet')
+      console.log('[DEBUG]   → Möglicherweise wird ein lokaler Authenticator verwendet')
+      console.log('[DEBUG]   → Oder der Browser unterstützt Cross-Device nicht')
       
       credential = await mod.startRegistration({ optionsJSON: pre.options })
       
@@ -761,6 +777,26 @@ const handleRegisterWithPasskey = async () => {
         durationSeconds: Math.round(webauthnDuration / 1000),
         note: 'Wenn Cross-Device verwendet wurde, sollte die Credential-Response vom Smartphone kommen'
       })
+      
+      // Prüfe, ob Cross-Device verwendet wurde
+      if (credential?.transports && credential.transports.length > 0) {
+        console.log('[DEBUG] Credential transports:', credential.transports)
+        const isCrossDevice = credential.transports.includes('hybrid') || credential.transports.includes('cable')
+        console.log('[DEBUG] Cross-Device verwendet:', isCrossDevice ? '✅ JA' : '❌ NEIN')
+        if (!isCrossDevice) {
+          console.warn('[DEBUG] ⚠️ WARNUNG: Cross-Device wurde NICHT verwendet!')
+          console.warn('[DEBUG] Mögliche Ursachen:')
+          console.warn('[DEBUG]   1. Lokaler Authenticator wurde verwendet (z.B. Windows Hello, TouchID)')
+          console.warn('[DEBUG]   2. Tunnel-Server-Verbindung fehlgeschlagen')
+          console.warn('[DEBUG]   3. Browser unterstützt Cross-Device nicht')
+          console.warn('[DEBUG]   4. Keine Tunnel-Requests im Network-Tab sichtbar')
+        }
+      } else {
+        console.warn('[DEBUG] ⚠️ WARNUNG: Keine transports-Information verfügbar!')
+        console.warn('[DEBUG] Kann nicht bestimmen, ob Cross-Device verwendet wurde.')
+        console.warn('[DEBUG] Prüfe Browser Network-Tab: Wurden Requests zu Tunnel-Servern gemacht?')
+        console.warn('[DEBUG] Erwartete Tunnel-Server: cable.ua5v.com, cable.auth.com')
+      }
     } catch (webauthnError) {
       const webauthnDuration = Date.now() - webauthnStart
       console.error(`[DEBUG] WebAuthn startRegistration failed (${webauthnDuration}ms / ${Math.round(webauthnDuration / 1000)}s):`, {

server/api/auth/register-passkey-options.post.js

@@ -101,7 +101,12 @@ export default defineEventHandler(async (event) => {
     attestationType: 'none',
     authenticatorSelection: {
       residentKey: 'preferred',
-      userVerification: 'preferred'
+      userVerification: 'preferred',
+      // WICHTIG: Für Cross-Device sollte requireResidentKey false sein
+      // und authenticatorAttachment nicht auf 'platform' beschränkt sein
+      // (sonst wird nur lokaler Authenticator verwendet)
+      requireResidentKey: false
+      // authenticatorAttachment nicht setzen = erlaubt sowohl platform als auch cross-platform
     },
     // Timeout erhöhen für Cross-Device (Standard: 60s, hier: 5 Minuten)
     timeout: 300000