Enhance passkey registration process with detailed debug logging and validation checks

Add comprehensive debug logging throughout the passkey registration flow, including request handling, option generation, and verification steps. Implement validation for incoming requests and responses to ensure required fields are present, improving error handling and clarity. This update aims to facilitate troubleshooting and enhance the overall robustness of the registration process.

pages/registrieren.vue

@@ -324,7 +324,21 @@ const handleRegisterWithPasskey = async () => {
   }
 
   isLoading.value = true
+  
+  console.log('[DEBUG] Passkey-Registrierung gestartet', {
+    name: formData.value.name,
+    email: formData.value.email,
+    hasPassword: !!formData.value.password,
+    isPasskeySupported: isPasskeySupported.value,
+    userAgent: navigator.userAgent,
+    origin: window.location.origin,
+    isSecureContext: window.isSecureContext
+  })
+
   try {
+    console.log('[DEBUG] Requesting registration options from server...')
+    const requestStart = Date.now()
+    
     const pre = await $fetch('/api/auth/register-passkey-options', {
       method: 'POST',
       body: {
@@ -333,35 +347,72 @@ const handleRegisterWithPasskey = async () => {
         phone: formData.value.phone
       }
     })
+    
+    const requestDuration = Date.now() - requestStart
+    console.log(`[DEBUG] Options received (${requestDuration}ms)`, {
+      success: pre.success,
+      hasOptions: !!pre.options,
+      hasRegistrationId: !!pre.registrationId,
+      registrationId: pre.registrationId
+    })
 
     if (!pre.success || !pre.options) {
+      console.error('[DEBUG] Invalid server response:', pre)
       throw new Error('Ungültige Antwort vom Server')
     }
 
     // Debug: Prüfe Options-Struktur
-    console.log('Received options:', {
+    console.log('[DEBUG] Options structure:', {
       hasChallenge: !!pre.options?.challenge,
+      challengeType: typeof pre.options?.challenge,
+      challengeLength: pre.options?.challenge?.length,
       hasRp: !!pre.options?.rp,
+      rpId: pre.options?.rp?.id,
+      rpName: pre.options?.rp?.name,
       hasUser: !!pre.options?.user,
-      timeout: pre.options?.timeout
+      userId: pre.options?.user?.id ? 'present' : 'missing',
+      userName: pre.options?.user?.name,
+      timeout: pre.options?.timeout,
+      pubKeyCredParams: pre.options?.pubKeyCredParams?.length,
+      authenticatorSelection: pre.options?.authenticatorSelection,
+      excludeCredentials: pre.options?.excludeCredentials?.length || 0
     })
 
     if (!pre.options || !pre.options.challenge) {
-      console.error('Options fehlen challenge:', pre.options)
+      console.error('[DEBUG] Options missing challenge:', JSON.stringify(pre.options, null, 2))
       throw new Error('Ungültige WebAuthn-Options vom Server')
     }
 
+    console.log('[DEBUG] Calling startRegistration...')
+    const webauthnStart = Date.now()
+    
     const mod = await import('@simplewebauthn/browser')
     // startRegistration erwartet die Options direkt
     // @simplewebauthn/browser v13+ erwartet die Options direkt
     let credential
     try {
       credential = await mod.startRegistration(pre.options)
+      const webauthnDuration = Date.now() - webauthnStart
+      console.log(`[DEBUG] startRegistration completed (${webauthnDuration}ms)`, {
+        hasCredential: !!credential,
+        credentialId: credential?.id,
+        responseType: credential?.response?.constructor?.name,
+        transports: credential?.transports
+      })
     } catch (webauthnError) {
-      console.error('WebAuthn startRegistration error:', webauthnError)
+      const webauthnDuration = Date.now() - webauthnStart
+      console.error(`[DEBUG] WebAuthn startRegistration failed (${webauthnDuration}ms):`, {
+        error: webauthnError,
+        message: webauthnError?.message,
+        name: webauthnError?.name,
+        stack: webauthnError?.stack
+      })
       throw new Error('Passkey-Registrierung fehlgeschlagen: ' + (webauthnError?.message || 'Unbekannter Fehler'))
     }
 
+    console.log('[DEBUG] Sending credential to server...')
+    const verifyStart = Date.now()
+    
     const response = await $fetch('/api/auth/register-passkey', {
       method: 'POST',
       body: {
@@ -370,13 +421,29 @@ const handleRegisterWithPasskey = async () => {
         password: setPasswordForPasskey.value ? formData.value.password : undefined
       }
     })
+    
+    const verifyDuration = Date.now() - verifyStart
+    console.log(`[DEBUG] Server verification completed (${verifyDuration}ms)`, {
+      success: response.success,
+      message: response.message
+    })
 
     if (response.success) {
+      console.log('[DEBUG] Registration successful!')
       successMessage.value = 'Registrierung erfolgreich! Sie erhalten eine E-Mail, sobald Ihr Zugang freigeschaltet wurde.'
       formData.value = { name: '', email: '', phone: '', password: '', confirmPassword: '' }
       setTimeout(() => navigateTo('/login'), 3000)
+    } else {
+      console.warn('[DEBUG] Registration response indicates failure:', response)
     }
   } catch (error) {
+    console.error('[DEBUG] Registration error:', {
+      error,
+      message: error?.message,
+      data: error?.data,
+      statusCode: error?.statusCode,
+      statusMessage: error?.statusMessage
+    })
     errorMessage.value = error.data?.message || error?.message || 'Registrierung mit Passkey fehlgeschlagen.'
   } finally {
     isLoading.value = false