Enhance Cross-Device support and documentation for Passkey Registration

Update the CROSS_DEVICE_PROBLEM_ZUSAMMENFASSUNG.md to clarify the role of tunnel servers in the Cross-Device authentication process and outline troubleshooting steps. Additionally, enhance the registrieren.vue component with detailed information about the FIDO Cross-Device flow, including QR-Code format, connection requirements, and potential issues. Improve the register-passkey-options API documentation to reflect the use of tunnel servers, ensuring better understanding and support for Cross-Device functionality.

CROSS_DEVICE_PROBLEM_ZUSAMMENFASSUNG.md

@@ -7,13 +7,31 @@
 - POST-Requests funktionieren (Status 200)
 - Options werden korrekt generiert
 - QR-Code wird angezeigt (Desktop-Browser)
-- Website öffnet sich auf dem Smartphone nach QR-Code-Scan
+- QR-Code enthält FIDO-URI (Format: `FIDO:/...`)
 
 ❌ **Was nicht funktioniert:**
 - Verbindung vom Smartphone zum Server wird nicht hergestellt
 - "Verbindung mit einem anderen Gerät wird hergestellt" bleibt hängen
 - Keine Requests vom Smartphone im Server-Log
-- Warnung: "startRegistration() was not called correctly"
+- Smartphone öffnet keine Website nach QR-Code-Scan
+
+## Wichtige Erkenntnis: Tunnel-Server
+
+**FIDO Cross-Device verwendet Tunnel-Server:**
+- `cable.ua5v.com` (Google)
+- `cable.auth.com` (Apple)
+
+**Wie funktioniert es:**
+1. Desktop-Browser generiert QR-Code mit öffentlichem Schlüssel (FIDO-URI)
+2. Smartphone scannt QR-Code
+3. **Smartphone verbindet sich über Tunnel-Server mit Desktop-Browser** (nicht direkt mit dem Server!)
+4. Desktop-Browser leitet Credential-Response an den Server weiter
+
+**Voraussetzungen:**
+- ✅ Beide Geräte müssen **Internetverbindung** haben
+- ✅ Tunnel-Server müssen erreichbar sein (Firewall/Netzwerk: cable.ua5v.com, cable.auth.com)
+- ⚠️ Bluetooth kann für physische Nähe-Bestätigung verwendet werden (abhängig vom Browser/Gerät)
+- ⚠️ Einige Browser/Implementierungen erfordern Bluetooth für Cross-Device
 
 ## Mögliche Ursachen
 
@@ -41,13 +59,15 @@
 - Welcher Browser wird auf dem Smartphone verwendet?
 - Chrome/Edge sollten am besten funktionieren
 
-### 4. Netzwerk/Firewall
+### 4. Tunnel-Server / Netzwerk/Firewall
-**Problem:** Das Smartphone kann die Server-Origin nicht erreichen (obwohl die Website funktioniert).
+**Problem:** Das Smartphone kann die Tunnel-Server nicht erreichen oder Bluetooth ist nicht aktiviert.
 
 **Prüfung:**
+- Ist Bluetooth auf beiden Geräten aktiviert? ⚠️ **WICHTIG für Cross-Device!**
+- Können Tunnel-Server erreicht werden? (cable.ua5v.com, cable.auth.com)
+- Sind die Geräte in physischer Nähe? (Bluetooth-Reichweite)
+- Gibt es Firewall-Blockierungen für Tunnel-Server?
 - Kann das Smartphone die Website direkt öffnen? ✅ (bereits bestätigt)
-- Kommen OPTIONS-Requests vom Smartphone an? (Test-Seite zeigt: ✅)
-- Kommen POST-Requests vom Smartphone an? (Test-Seite zeigt: ✅)
 
 ### 5. Options-Struktur
 **Problem:** Die Warnung "startRegistration() was not called correctly" deutet auf ein Problem mit der Options-Struktur hin.

pages/registrieren.vue

@@ -187,16 +187,60 @@
               <div><strong>Origin:</strong> <code class="bg-blue-100 px-1 rounded">{{ typeof window !== 'undefined' ? window.location.origin : 'N/A (SSR)' }}</code></div>
             </div>
             
+            <!-- FIDO QR-Code Info -->
+            <div class="mt-3 p-3 bg-purple-50 border border-purple-300 rounded">
+              <div class="font-semibold text-purple-900 mb-2">🔐 FIDO Cross-Device Info:</div>
+              <div class="text-xs text-purple-800 space-y-2">
+                <div><strong>QR-Code-Format:</strong> FIDO-URI (enthält öffentlichen Schlüssel + Secret)</div>
+                <div><strong>Hinweis:</strong> Der QR-Code enthält einen FIDO-URI, der vom Smartphone gescannt werden muss.</div>
+                
+                <div class="mt-2 p-2 bg-purple-100 rounded">
+                  <strong class="text-purple-900">Wie funktioniert Cross-Device?</strong>
+                  <ol class="list-decimal list-inside mt-1 space-y-1 text-purple-700">
+                    <li>Desktop-Browser generiert QR-Code mit öffentlichem Schlüssel (FIDO-URI)</li>
+                    <li>Desktop-Browser registriert sich beim <strong>Tunnel-Server</strong> (z.B. cable.ua5v.com)</li>
+                    <li>Smartphone scannt QR-Code</li>
+                    <li>Smartphone verbindet sich über <strong>Tunnel-Server</strong> mit Desktop-Browser</li>
+                    <li>Desktop-Browser leitet Credential-Response an den Server weiter</li>
+                  </ol>
+                  <div class="mt-2 text-xs text-purple-600">
+                    <strong>Hinweis:</strong> Die Verbindung läuft über den Tunnel-Server, nicht direkt zwischen den Geräten.
+                    Bluetooth wird optional für physische Nähe-Bestätigung verwendet (abhängig vom Browser/Gerät).
+                  </div>
+                </div>
+                
+                <div class="mt-2 p-2 bg-yellow-50 border border-yellow-300 rounded">
+                  <strong class="text-yellow-900">Voraussetzungen:</strong>
+                  <ul class="list-disc list-inside mt-1 space-y-1 text-yellow-800">
+                    <li>✅ Beide Geräte müssen <strong>Internetverbindung</strong> haben</li>
+                    <li>✅ Tunnel-Server müssen erreichbar sein (cable.ua5v.com, cable.auth.com)</li>
+                    <li>⚠️ Bluetooth kann für physische Nähe-Bestätigung verwendet werden (abhängig vom Browser/Gerät)</li>
+                    <li>⚠️ Einige Browser/Implementierungen erfordern Bluetooth für Cross-Device</li>
+                  </ul>
+                </div>
+                
+                <div class="mt-2 text-purple-700">
+                  <strong>Problem:</strong> Wenn das Smartphone den QR-Code scannt, aber keine Verbindung herstellt:
+                  <ul class="list-disc list-inside mt-1 space-y-1">
+                    <li>Prüfen Sie, ob beide Geräte Internetverbindung haben</li>
+                    <li>Prüfen Sie, ob Tunnel-Server erreichbar sind (Firewall/Netzwerk: cable.ua5v.com, cable.auth.com)</li>
+                    <li>Prüfen Sie, ob Bluetooth aktiviert ist (kann je nach Browser/Gerät erforderlich sein)</li>
+                    <li>Versuchen Sie die alternative Smartphone-URL unten (umgeht Tunnel-Server)</li>
+                  </ul>
+                </div>
+              </div>
+            </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="font-semibold text-green-900 mb-2">📱 Alternative: Smartphone-URL (manuell öffnen):</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.
+                <strong>Anleitung:</strong> Falls der QR-Code nicht funktioniert, öffnen Sie diese URL manuell auf Ihrem Smartphone.
               </div>
               <button
                 @click="copyToClipboard(debugSmartphoneUrl)"

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

@@ -105,6 +105,18 @@ export default defineEventHandler(async (event) => {
     },
     // Timeout erhöhen für Cross-Device (Standard: 60s, hier: 5 Minuten)
     timeout: 300000
+    // HINWEIS: FIDO Cross-Device verwendet Tunnel-Server (z.B. cable.ua5v.com von Google)
+    // Der Browser verwaltet den Tunnel automatisch - der Server muss nichts konfigurieren
+    // Für Cross-Device funktioniert es so:
+    // 1. Desktop-Browser generiert QR-Code mit öffentlichem Schlüssel (FIDO-URI)
+    // 2. Desktop-Browser registriert sich beim Tunnel-Server (cable.ua5v.com)
+    // 3. Smartphone scannt QR-Code
+    // 4. Smartphone verbindet sich über Tunnel-Server mit Desktop-Browser
+    // 5. Desktop-Browser leitet Credential-Response an den Server weiter
+    // Voraussetzungen:
+    // - Beide Geräte müssen Internetverbindung haben
+    // - Tunnel-Server müssen erreichbar sein (cable.ua5v.com, cable.auth.com)
+    // - Bluetooth kann für physische Nähe-Bestätigung verwendet werden (abhängig vom Browser/Gerät)
   })
   
   const optionsDuration = Date.now() - optionsStart