Files
harheimertc/CROSS_DEVICE_DEBUG.md
Torsten Schulz (local) 750c05eac1
Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 50s
Enhance debug logging for Cross-Device Passkey Registration
Add detailed debug statements in the registrieren.vue component to provide insights into the QR-Code generation process and the Cross-Device authentication flow. Additionally, update the register-passkey API to log request details, including user agent and method, to improve troubleshooting capabilities and ensure clarity during the registration process.
2026-01-08 11:56:57 +01:00

4.9 KiB

Cross-Device Passkey Debugging

Problem: Smartphone kann keine Verbindung aufbauen

CORS funktioniert jetzt korrekt (OPTIONS gibt 204 zurück), aber das Smartphone kann immer noch keine Verbindung aufbauen.

Debugging-Schritte

1. Prüfe Server-Logs

Auf dem Server, während du versuchst, den QR-Code zu scannen:

pm2 logs harheimertc --lines 100 | grep -i "register-passkey\|OPTIONS\|CORS\|origin"

Was zu prüfen ist:

  • Kommt ein Request vom Smartphone an? (Sollte [DEBUG] register-passkey request received zeigen)
  • Welche Origin hat der Request? (Sollte https://harheimertc.tsschulz.de sein)
  • Welcher User-Agent? (Sollte das Smartphone-Browser sein)

2. Prüfe Browser-Konsole (Desktop)

Öffne F12 → Console auf dem Desktop-Browser und prüfe:

  • Wird der QR-Code angezeigt?
  • Gibt es Fehlermeldungen?
  • Was steht in den Debug-Logs?

3. Prüfe Smartphone-Browser

Wichtig: Wenn du den QR-Code scannst, öffnet das Smartphone die Website. Prüfe dort:

  1. Öffne die Website direkt auf dem Smartphone:

    https://harheimertc.tsschulz.de/registrieren
    
  2. Prüfe, ob die Website lädt (sollte funktionieren, da du sagst, du kannst die Website vom Smartphone aus erreichen)

  3. Versuche, den QR-Code zu scannen und prüfe:

    • Öffnet sich die Website auf dem Smartphone?
    • Gibt es Fehlermeldungen?
    • Wird ein Request an den Server gesendet?

4. Netzwerk-Test

Auf dem Smartphone:

  • Öffne die Website direkt: https://harheimertc.tsschulz.de
  • Prüfe, ob sie lädt
  • Prüfe, ob HTTPS korrekt funktioniert (keine Zertifikat-Fehler)

Mit curl (vom Server aus):

# Simuliere einen Request vom Smartphone
curl -X POST \
  -H "Origin: https://harheimertc.tsschulz.de" \
  -H "User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)" \
  -H "Content-Type: application/json" \
  -d '{"registrationId":"test","credential":{}}' \
  -v \
  https://harheimertc.tsschulz.de/api/auth/register-passkey

5. Häufige Probleme

Problem 1: QR-Code wird nicht angezeigt

Symptom: Kein QR-Code erscheint im Browser Lösung:

  • Prüfe Browser-Konsole auf Fehler
  • Prüfe, ob startRegistration aufgerufen wird
  • Prüfe, ob die Options korrekt sind

Problem 2: QR-Code wird gescannt, aber Website öffnet sich nicht

Symptom: QR-Code wird gescannt, aber nichts passiert Lösung:

  • Prüfe, ob der QR-Code die richtige URL enthält
  • Prüfe, ob das Smartphone die Website erreichen kann
  • Prüfe, ob es Firewall-Blockierungen gibt

Problem 3: Website öffnet sich, aber Request kommt nicht an

Symptom: Website öffnet sich auf dem Smartphone, aber Server-Logs zeigen keinen Request Lösung:

  • Prüfe CORS-Header (sollte jetzt funktionieren)
  • Prüfe, ob der Request wirklich gesendet wird (Browser-Entwicklertools auf dem Smartphone)
  • Prüfe, ob Apache den Request weiterleitet

Problem 4: Request kommt an, aber Fehler

Symptom: Request kommt im Server-Log an, aber es gibt einen Fehler Lösung:

  • Prüfe die Fehlermeldung im Server-Log
  • Prüfe, ob die Challenge korrekt ist
  • Prüfe, ob die Origin übereinstimmt

6. Manueller Test

Test 1: Direkte Website-Zugriff vom Smartphone

https://harheimertc.tsschulz.de/registrieren

Sollte funktionieren.

Test 2: API-Endpoint vom Smartphone Öffne auf dem Smartphone:

https://harheimertc.tsschulz.de/api/auth/register-passkey-options

Sollte einen JSON-Fehler zurückgeben (weil POST erwartet wird), aber kein 404.

Test 3: OPTIONS-Request vom Smartphone Mit einem Tool wie "HTTP Request" auf dem Smartphone:

OPTIONS https://harheimertc.tsschulz.de/api/auth/register-passkey-options
Origin: https://harheimertc.tsschulz.de

Sollte 204 mit CORS-Headern zurückgeben.

7. Browser-spezifische Probleme

Chrome/Edge:

  • Sollte Cross-Device unterstützen
  • QR-Code sollte automatisch erscheinen

Firefox:

  • Unterstützt Cross-Device möglicherweise nicht vollständig
  • Prüfe Browser-Konsole auf Warnungen

Safari (iOS):

  • Unterstützt Cross-Device
  • QR-Code sollte automatisch erscheinen

8. Was die Logs zeigen sollten

Wenn alles funktioniert:

  1. Desktop-Browser: [DEBUG] startRegistration called - QR-Code should appear now
  2. Smartphone scannt QR-Code
  3. Smartphone sendet Request: [DEBUG] register-passkey request received mit Smartphone User-Agent
  4. Server verifiziert: [DEBUG] Verification successful

Wenn es nicht funktioniert:

  • Kein Request vom Smartphone → Problem mit QR-Code oder Netzwerk
  • Request kommt an, aber Fehler → Problem mit Challenge oder Origin
  • Timeout → Problem mit Verbindung oder CORS

9. Nächste Schritte

  1. Prüfe Server-Logs während des QR-Code-Scans
  2. Prüfe Browser-Konsole auf dem Desktop
  3. Prüfe, ob der QR-Code angezeigt wird
  4. Prüfe, ob das Smartphone die Website öffnet
  5. Prüfe, ob ein Request ankommt

Bitte teile die Ergebnisse dieser Tests, dann können wir das Problem weiter eingrenzen.