Implement passkey recovery feature, including email link requests and registration options. Update login and registration pages to support passkey authentication, with UI enhancements for user experience. Add server-side handling for passkey registration and login, including account activation checks. Update environment configuration for passkey recovery TTL settings.

pages/registrieren.vue

@@ -13,8 +13,20 @@
       <div class="bg-white rounded-xl shadow-lg p-8">
         <form
           class="space-y-6"
-          @submit.prevent="handleRegister"
+          @submit.prevent="usePasskey ? handleRegisterWithPasskey() : handleRegister()"
         >
+          <!-- Registration Mode -->
+          <div class="flex items-center justify-between bg-gray-50 border border-gray-200 rounded-lg p-3">
+            <div class="text-sm text-gray-700">
+              <div class="font-medium">Registrierungsmethode</div>
+              <div class="text-xs text-gray-600">Passkey = Anmeldung ohne Passwort (z.B. FaceID/TouchID/Windows Hello)</div>
+            </div>
+            <label class="flex items-center gap-2 text-sm font-medium text-gray-800">
+              <input v-model="usePasskey" type="checkbox" class="h-4 w-4" :disabled="isLoading || !isPasskeySupported">
+              Mit Passkey
+            </label>
+          </div>
+
           <!-- Name -->
           <div>
             <label
@@ -72,7 +84,7 @@
           </div>
 
           <!-- Password -->
-          <div>
+          <div v-if="!usePasskey">
             <label
               for="password"
               class="block text-sm font-medium text-gray-700 mb-2"
@@ -94,7 +106,7 @@
           </div>
 
           <!-- Confirm Password -->
-          <div>
+          <div v-if="!usePasskey">
             <label
               for="confirmPassword"
               class="block text-sm font-medium text-gray-700 mb-2"
@@ -151,7 +163,7 @@
               :size="20"
               class="mr-2 animate-spin"
             />
-            <span>{{ isLoading ? 'Wird gesendet...' : 'Registrierung beantragen' }}</span>
+            <span>{{ isLoading ? 'Wird gesendet...' : (usePasskey ? 'Mit Passkey registrieren' : 'Registrierung beantragen') }}</span>
           </button>
 
           <!-- Back to Login -->
@@ -196,6 +208,11 @@ const formData = ref({
 const isLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
+const usePasskey = ref(false)
+const isPasskeySupported = ref(false)
+if (process.client) {
+  isPasskeySupported.value = !!window.PublicKeyCredential
+}
 
 const handleRegister = async () => {
   errorMessage.value = ''
@@ -249,6 +266,54 @@ const handleRegister = async () => {
   }
 }
 
+const handleRegisterWithPasskey = async () => {
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  if (!isPasskeySupported.value) {
+    errorMessage.value = 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).'
+    return
+  }
+
+  if (!formData.value.name || !formData.value.email) {
+    errorMessage.value = 'Bitte Name und E-Mail ausfüllen.'
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const pre = await $fetch('/api/auth/register-passkey-options', {
+      method: 'POST',
+      body: {
+        name: formData.value.name,
+        email: formData.value.email,
+        phone: formData.value.phone
+      }
+    })
+
+    const mod = await import('@simplewebauthn/browser')
+    const credential = await mod.startRegistration(pre.options)
+
+    const response = await $fetch('/api/auth/register-passkey', {
+      method: 'POST',
+      body: {
+        registrationId: pre.registrationId,
+        credential
+      }
+    })
+
+    if (response.success) {
+      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)
+    }
+  } catch (error) {
+    errorMessage.value = error.data?.message || error?.message || 'Registrierung mit Passkey fehlgeschlagen.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
 useHead({
   title: 'Registrierung - Harheimer TC',
 })