From 04e4d2385d617a69b2ab3657ca9bdebe398aa199 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 9 Jan 2026 07:38:11 +0100
Subject: [PATCH] Enhance debug information for Passkey Registration in
 registrieren.vue

Update the registrieren.vue component to include additional debug information for the Passkey registration process. Introduce new elements for displaying the smartphone URL, registration ID, and full options JSON, improving the clarity of debug outputs. Implement a copy-to-clipboard functionality for easier access to debug data, enhancing the overall user experience during Cross-Device registration.
---
 pages/registrieren.vue | 97 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 92 insertions(+), 5 deletions(-)

diff --git a/pages/registrieren.vue b/pages/registrieren.vue
index b4a1f66..38bdb79 100644
--- a/pages/registrieren.vue
+++ b/pages/registrieren.vue
@@ -177,17 +177,54 @@
           <!-- Debug Info (nur bei Passkey-Registrierung) -->
           <div
             v-if="usePasskey && showDebugInfo && debugChallenge"
-            class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-xs"
+            class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-xs space-y-3"
           >
             <div class="font-semibold text-blue-900 mb-2">🔍 Debug-Informationen (QR-Code):</div>
             <div class="space-y-1 text-blue-800">
-              <div><strong>Challenge:</strong> <code class="bg-blue-100 px-1 rounded">{{ debugChallenge.substring(0, 40) }}...</code></div>
+              <div><strong>Challenge:</strong> <code class="bg-blue-100 px-1 rounded break-all">{{ debugChallenge }}</code></div>
               <div><strong>RP-ID:</strong> <code class="bg-blue-100 px-1 rounded">{{ debugRpId }}</code></div>
+              <div v-if="debugRegistrationId"><strong>Registration-ID:</strong> <code class="bg-blue-100 px-1 rounded break-all">{{ debugRegistrationId }}</code></div>
               <div><strong>Origin:</strong> <code class="bg-blue-100 px-1 rounded">{{ typeof window !== 'undefined' ? window.location.origin : 'N/A (SSR)' }}</code></div>
-              <div class="mt-2 text-blue-700">
-                <strong>Hinweis:</strong> Der QR-Code wird vom Browser generiert. 
-                Prüfe in der Browser-Konsole (F12) für vollständige Debug-Ausgaben.
+            </div>
+            
+            <!-- Smartphone URL -->
+            <div v-if="debugSmartphoneUrl" class="mt-3 p-3 bg-green-50 border border-green-300 rounded">
+              <div class="font-semibold text-green-900 mb-2">📱 Smartphone-URL (statt QR-Code scannen):</div>
+              <div class="break-all text-xs mb-2 p-2 bg-white rounded border">
+                <a :href="debugSmartphoneUrl" target="_blank" class="text-blue-600 hover:underline">
+                  {{ debugSmartphoneUrl }}
+                </a>
               </div>
+              <div class="text-xs text-gray-700 mb-2">
+                <strong>Anleitung:</strong> Öffnen Sie diese URL auf Ihrem Smartphone, um die Passkey-Registrierung durchzuführen.
+              </div>
+              <button
+                @click="copyToClipboard(debugSmartphoneUrl)"
+                class="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700"
+              >
+                📋 URL kopieren
+              </button>
+            </div>
+            
+            <!-- Full Options JSON -->
+            <div v-if="debugOptions" class="mt-3">
+              <details class="text-xs">
+                <summary class="cursor-pointer font-semibold text-blue-900 hover:text-blue-700 mb-2">
+                  📄 Vollständige Options (JSON) - Klicken zum Anzeigen
+                </summary>
+                <pre class="mt-2 p-2 bg-gray-100 rounded overflow-auto text-xs max-h-60 border">{{ JSON.stringify(debugOptions, null, 2) }}</pre>
+                <button
+                  @click="copyToClipboard(JSON.stringify(debugOptions, null, 2))"
+                  class="mt-2 px-3 py-1 bg-gray-600 text-white text-xs rounded hover:bg-gray-700"
+                >
+                  📋 JSON kopieren
+                </button>
+              </details>
+            </div>
+            
+            <div class="mt-2 text-blue-700 text-xs">
+              <strong>Hinweis:</strong> Der QR-Code wird vom Browser generiert. 
+              Prüfe in der Browser-Konsole (F12) für vollständige Debug-Ausgaben.
             </div>
           </div>
 
@@ -278,6 +315,9 @@ const handleFormSubmit = (event) => {
 const showDebugInfo = ref(false)
 const debugChallenge = ref('')
 const debugRpId = ref('')
+const debugRegistrationId = ref('')
+const debugOptions = ref(null)
+const debugSmartphoneUrl = ref('')
 
 onMounted(() => {
   try {
@@ -524,6 +564,15 @@ const handleRegisterWithPasskey = async () => {
     // Der Browser generiert automatisch einen QR-Code für Cross-Device
     debugChallenge.value = pre.options?.challenge || ''
     debugRpId.value = pre.options?.rp?.id || ''
+    debugRegistrationId.value = pre.registrationId || ''
+    debugOptions.value = pre.options || null
+    
+    // Generiere Smartphone-URL für Cross-Device
+    // Das Smartphone kann diese URL öffnen, um die Passkey-Registrierung durchzuführen
+    if (pre.registrationId) {
+      debugSmartphoneUrl.value = `${window.location.origin}/passkey-register-cross-device?registrationId=${pre.registrationId}`
+    }
+    
     showDebugInfo.value = true
     
     console.log('[DEBUG] QR-Code Info (for Cross-Device):', {
@@ -642,6 +691,19 @@ const handleRegisterWithPasskey = async () => {
       console.log('[DEBUG] 4. Smartphone muss startRegistration aufrufen können')
       console.log('[DEBUG] 5. Smartphone sendet Credential-Response an:', window.location.origin + '/api/auth/register-passkey')
       
+      // 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())
+      console.log('[DEBUG] Browser Supports WebAuthn:', mod.browserSupportsWebAuthn())
+      
+      // Versuche startRegistration aufzurufen
+      // Bei Cross-Device wird automatisch ein QR-Code generiert
+      // Das Smartphone muss dann die Website öffnen können
+      console.log('[DEBUG] Calling startRegistration...')
+      console.log('[DEBUG] ⚠️ WICHTIG: Wenn Cross-Device verwendet wird, sollte ein QR-Code erscheinen')
+      console.log('[DEBUG] ⚠️ Das Smartphone muss dann die Website öffnen können:', window.location.origin)
+      console.log('[DEBUG] ⚠️ Prüfe, ob das Smartphone die Website erreichen kann!')
+      
       credential = await mod.startRegistration({ optionsJSON: pre.options })
       
       clearTimeout(timeoutWarning)
@@ -713,6 +775,31 @@ const handleRegisterWithPasskey = async () => {
   } finally {
     isLoading.value = false
   }
+  
+  // Funktion zum Kopieren in die Zwischenablage
+  async function copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text)
+      alert('In Zwischenablage kopiert!')
+    } catch (err) {
+      console.error('Fehler beim Kopieren:', err)
+      // Fallback für ältere Browser
+      const textArea = document.createElement('textarea')
+      textArea.value = text
+      textArea.style.position = 'fixed'
+      textArea.style.opacity = '0'
+      document.body.appendChild(textArea)
+      textArea.select()
+      try {
+        document.execCommand('copy')
+        alert('In Zwischenablage kopiert!')
+      } catch (err) {
+        console.error('Fallback-Kopieren fehlgeschlagen:', err)
+        alert('Kopieren fehlgeschlagen. Bitte manuell kopieren.')
+      }
+      document.body.removeChild(textArea)
+    }
+  }
 }
 
 useHead({