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/login.vue

@@ -115,13 +115,21 @@
           </button>
 
           <!-- Forgot Password Link -->
-          <div class="text-center">
+          <div class="text-center space-y-2">
             <NuxtLink
               to="/passwort-vergessen"
               class="text-sm text-primary-600 hover:text-primary-700 font-medium"
             >
               Passwort vergessen?
             </NuxtLink>
+            <div>
+              <NuxtLink
+                to="/passkey-wiederherstellen"
+                class="text-sm text-primary-600 hover:text-primary-700 font-medium"
+              >
+                Passkey verloren? Wiederherstellen
+              </NuxtLink>
+            </div>
           </div>
         </form>
       </div>

pages/passkey-wiederherstellen.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="min-h-full flex items-center justify-center py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
+    <div class="max-w-md w-full space-y-8">
+      <div class="text-center">
+        <h2 class="text-3xl font-display font-bold text-gray-900">
+          Passkey wiederherstellen
+        </h2>
+        <p class="mt-2 text-sm text-gray-600">
+          Fügen Sie einen neuen Passkey hinzu, wenn Sie Ihr Gerät gewechselt haben.
+        </p>
+      </div>
+
+      <div class="bg-white rounded-xl shadow-lg p-8">
+        <!-- Token Flow -->
+        <div v-if="token" class="space-y-4">
+          <div
+            v-if="errorMessage"
+            class="bg-red-50 border border-red-200 rounded-lg p-4"
+          >
+            <p class="text-sm text-red-800 flex items-center">
+              <AlertCircle :size="18" class="mr-2" />
+              {{ errorMessage }}
+            </p>
+          </div>
+
+          <div
+            v-if="successMessage"
+            class="bg-green-50 border border-green-200 rounded-lg p-4"
+          >
+            <p class="text-sm text-green-800 flex items-center">
+              <Check :size="18" class="mr-2" />
+              {{ successMessage }}
+            </p>
+          </div>
+
+          <button
+            type="button"
+            class="w-full px-6 py-3 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
+            :disabled="isLoading || !isPasskeySupported"
+            @click="addPasskeyViaToken"
+          >
+            <Loader2 v-if="isLoading" :size="20" class="mr-2 animate-spin" />
+            <span>
+              {{ isLoading ? 'Wird vorbereitet...' : (isPasskeySupported ? 'Neuen Passkey hinzufügen' : 'Passkeys nicht verfügbar') }}
+            </span>
+          </button>
+
+          <div class="text-center">
+            <NuxtLink to="/login" class="text-sm text-primary-600 hover:text-primary-700 font-medium">
+              Zurück zum Login
+            </NuxtLink>
+          </div>
+        </div>
+
+        <!-- Request Link Flow -->
+        <form v-else class="space-y-6" @submit.prevent="requestLink">
+          <div>
+            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+              E-Mail-Adresse
+            </label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              autocomplete="email"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
+              placeholder="ihre-email@example.com"
+            >
+          </div>
+
+          <div
+            v-if="errorMessage"
+            class="bg-red-50 border border-red-200 rounded-lg p-4"
+          >
+            <p class="text-sm text-red-800 flex items-center">
+              <AlertCircle :size="18" class="mr-2" />
+              {{ errorMessage }}
+            </p>
+          </div>
+
+          <div
+            v-if="successMessage"
+            class="bg-green-50 border border-green-200 rounded-lg p-4"
+          >
+            <p class="text-sm text-green-800 flex items-center">
+              <Check :size="18" class="mr-2" />
+              {{ successMessage }}
+            </p>
+          </div>
+
+          <button
+            type="submit"
+            class="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
+            :disabled="isLoading"
+          >
+            <Loader2 v-if="isLoading" :size="20" class="mr-2 animate-spin" />
+            <span>{{ isLoading ? 'Wird gesendet...' : 'Recovery-Link per E-Mail senden' }}</span>
+          </button>
+
+          <div class="text-center">
+            <NuxtLink to="/login" class="text-sm text-primary-600 hover:text-primary-700 font-medium">
+              Zurück zum Login
+            </NuxtLink>
+          </div>
+        </form>
+      </div>
+
+      <div class="bg-primary-50 border border-primary-100 rounded-lg p-4">
+        <p class="text-sm text-primary-800">
+          <Info :size="16" class="inline mr-1" />
+          Wir schicken immer die gleiche Rückmeldung, egal ob ein Konto existiert.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { AlertCircle, Check, Loader2, Info } from 'lucide-vue-next'
+
+const route = useRoute()
+const token = ref(String(route.query.token || ''))
+
+const email = ref('')
+const isLoading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const isPasskeySupported = ref(false)
+if (process.client) {
+  isPasskeySupported.value = !!window.PublicKeyCredential
+}
+
+const requestLink = async () => {
+  errorMessage.value = ''
+  successMessage.value = ''
+  isLoading.value = true
+  try {
+    const res = await $fetch('/api/auth/passkeys/recovery/request', {
+      method: 'POST',
+      body: { email: email.value }
+    })
+    successMessage.value = res.message || 'Falls ein Konto existiert, wurde eine E-Mail gesendet.'
+  } catch (e) {
+    errorMessage.value = e?.data?.message || 'Fehler beim Senden der E-Mail.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const addPasskeyViaToken = async () => {
+  errorMessage.value = ''
+  successMessage.value = ''
+  if (!isPasskeySupported.value) {
+    errorMessage.value = 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).'
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const opts = await $fetch('/api/auth/passkeys/recovery/options', {
+      method: 'GET',
+      query: { token: token.value }
+    })
+
+    const mod = await import('@simplewebauthn/browser')
+    const credential = await mod.startRegistration(opts.options)
+
+    const res = await $fetch('/api/auth/passkeys/recovery/complete', {
+      method: 'POST',
+      body: {
+        recoveryId: opts.recoveryId,
+        credential
+      }
+    })
+
+    successMessage.value = res.message || 'Passkey hinzugefügt.'
+  } catch (e) {
+    errorMessage.value = e?.data?.message || e?.message || 'Passkey konnte nicht hinzugefügt werden.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+useHead({ title: 'Passkey wiederherstellen - Harheimer TC' })
+</script>
+

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',
 })