Implement passkey login functionality and enhance passkey support checks

pages/login.vue

@@ -86,7 +86,7 @@
           <!-- Submit Button -->
           <button
             type="submit"
-            :disabled="isLoading"
+            :disabled="isLoading || passkeyLoading"
             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"
           >
             <Loader2
@@ -97,6 +97,32 @@
             <span>{{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}</span>
           </button>
 
+          <button
+            type="button"
+            :disabled="isLoading || passkeyLoading || !isPasskeySupported"
+            class="w-full px-6 py-3 border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 text-gray-800 font-semibold rounded-lg transition-colors flex items-center justify-center"
+            @click="handlePasskeyLogin"
+          >
+            <Loader2
+              v-if="passkeyLoading"
+              :size="20"
+              class="mr-2 animate-spin"
+            />
+            <Lock
+              v-else
+              :size="18"
+              class="mr-2"
+            />
+            <span>{{ passkeyLoading ? 'Passkey-Anmeldung läuft...' : 'Mit Passkey anmelden' }}</span>
+          </button>
+
+          <p
+            v-if="!isPasskeySupported"
+            class="text-xs text-gray-500 text-center"
+          >
+            {{ passkeySupportReason || 'Passkeys sind in diesem Browser aktuell nicht verfügbar.' }}
+          </p>
+
           <!-- Forgot Password Link -->
           <div class="text-center">
             <NuxtLink
@@ -124,7 +150,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { AlertCircle, Check, Loader2, Lock } from 'lucide-vue-next'
 
@@ -137,8 +163,26 @@ const formData = ref({
 })
 
 const isLoading = ref(false)
+const passkeyLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
+const isPasskeySupported = ref(false)
+const passkeySupportReason = ref('')
+
+onMounted(() => {
+  const hasPublicKeyCredential = typeof window !== 'undefined' && typeof window.PublicKeyCredential !== 'undefined'
+  const secureContext = typeof window !== 'undefined' && !!window.isSecureContext
+
+  isPasskeySupported.value = !!(hasPublicKeyCredential && secureContext)
+
+  if (!secureContext) {
+    passkeySupportReason.value = 'Passkeys benötigen HTTPS (oder localhost).'
+  } else if (!hasPublicKeyCredential) {
+    passkeySupportReason.value = 'Dieser Browser unterstützt WebAuthn/Passkeys nicht.'
+  } else {
+    passkeySupportReason.value = ''
+  }
+})
 
 const handleLogin = async () => {
   isLoading.value = true
@@ -170,8 +214,35 @@ const handleLogin = async () => {
   }
 }
 
-// Passkey-Login vorläufig deaktiviert
+const handlePasskeyLogin = async () => {
-// const handlePasskeyLogin = async () => { ... }
+  passkeyLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    const response = await authStore.passkeyLogin(formData.value.email)
+
+    if (response.success) {
+      successMessage.value = 'Passkey-Anmeldung erfolgreich! Sie werden weitergeleitet...'
+
+      setTimeout(() => {
+        const roles = response.user.roles || (response.user.role ? [response.user.role] : [])
+        if (roles.includes('trainer')) {
+          router.push('/cms/kontaktanfragen')
+        } else if (roles.includes('admin') || roles.includes('vorstand') || roles.includes('newsletter')) {
+          router.push('/cms')
+        } else {
+          router.push('/mitgliederbereich')
+        }
+      }, 1000)
+    }
+  } catch (error) {
+    const message = error?.data?.message || error?.message || 'Passkey-Anmeldung fehlgeschlagen.'
+    errorMessage.value = message
+  } finally {
+    passkeyLoading.value = false
+  }
+}
 
 definePageMeta({
   layout: 'default'

pages/mitgliederbereich/profil.vue

@@ -198,8 +198,6 @@
             </div>
           </div>
 
-          <!-- Passkeys - vorläufig deaktiviert -->
-          <!--
           <div class="border-t border-gray-200 pt-6 mt-6">
             <h3 class="text-lg font-semibold text-gray-900 mb-2">
               Passkeys
@@ -208,6 +206,13 @@
               Passkeys erlauben eine Anmeldung ohne Passwort (z.B. per Fingerabdruck/FaceID/Windows Hello).
             </p>
 
+            <p
+              v-if="!isPasskeySupported"
+              class="text-sm text-amber-700 mb-4"
+            >
+              Passkeys sind in diesem Browser bzw. ohne HTTPS nicht verfügbar.
+            </p>
+
             <div
               v-if="passkeyError"
               class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm mb-3"
@@ -264,7 +269,6 @@
               </li>
             </ul>
           </div>
-          -->
 
           <!-- Error/Success Messages -->
           <div
@@ -334,7 +338,7 @@ const passkeyLoading = ref(false)
 const passkeyError = ref('')
 const isPasskeySupported = ref(false)
 if (process.client) {
-  isPasskeySupported.value = !!window.PublicKeyCredential
+  isPasskeySupported.value = !!window.PublicKeyCredential && !!window.isSecureContext
 }
 
 const formData = ref({
@@ -503,8 +507,9 @@ const handleSave = async () => {
 
 onMounted(() => {
   loadProfile()
-  // Passkey-Verwaltung vorläufig deaktiviert
+  if (isPasskeySupported.value) {
-  // loadPasskeys()
+    loadPasskeys()
+  }
 })
 
 definePageMeta({

server/api/auth/passkeys/authentication-options.post.js

@@ -1,4 +1,5 @@
 import { generateAuthenticationOptions } from '@simplewebauthn/server'
+import { readUsers } from '../../../utils/auth.js'
 import { getWebAuthnConfig } from '../../../utils/webauthn-config.js'
 import { setAuthChallenge } from '../../../utils/webauthn-challenges.js'
 
@@ -16,11 +17,31 @@ export default defineEventHandler(async (event) => {
     return { success: true }
   }
 
+  const body = await readBody(event)
+  const email = String(body?.email || '').trim().toLowerCase()
+
   const { rpId } = getWebAuthnConfig()
 
-  // Username-less / discoverable credentials: allowCredentials absichtlich leer
+  let allowCredentials
+  if (email) {
+    const users = await readUsers()
+    const user = users.find(u => String(u.email || '').toLowerCase() === email)
+    const passkeys = Array.isArray(user?.passkeys) ? user.passkeys : []
+
+    allowCredentials = passkeys
+      .filter(pk => pk?.credentialId)
+      .map(pk => ({
+        id: pk.credentialId,
+        type: 'public-key',
+        transports: pk.transports || undefined
+      }))
+  }
+
+  // Ohne E-Mail: discoverable Credentials (username-less).
+  // Mit E-Mail: allowCredentials nutzen, damit auch nicht-discoverable Credentials funktionieren.
   const options = await generateAuthenticationOptions({
     rpID: rpId,
+    allowCredentials,
     userVerification: 'preferred',
     // Timeout erhöhen für Cross-Device (Standard: 60s, hier: 5 Minuten)
     timeout: 300000

stores/auth.js

@@ -54,15 +54,21 @@ export const useAuthStore = defineStore('auth', {
       return response
     },
 
-    async passkeyLogin() {
+    async passkeyLogin(email = '') {
       // Client-only
-      if (typeof window === 'undefined' || !window.PublicKeyCredential) {
+      if (typeof window === 'undefined' || !window.PublicKeyCredential || !window.isSecureContext) {
         throw new Error('Passkeys werden von diesem Browser nicht unterstützt.')
       }
 
-      const { options } = await $fetch('/api/auth/passkeys/authentication-options', { method: 'POST' })
+      const normalizedEmail = String(email || '').trim().toLowerCase()
+
+      const { options } = await $fetch('/api/auth/passkeys/authentication-options', {
+        method: 'POST',
+        body: normalizedEmail ? { email: normalizedEmail } : {}
+      })
+
       const mod = await import('@simplewebauthn/browser')
-      const credential = await mod.startAuthentication(options)
+      const credential = await mod.startAuthentication({ optionsJSON: options })
 
       const response = await $fetch('/api/auth/passkeys/login', {
         method: 'POST',
@@ -83,7 +89,7 @@ export const useAuthStore = defineStore('auth', {
         this.user = null
         this.roles = []
         this.role = null
-      } catch (_error) {
+      } catch (error) {
         console.error('Logout fehlgeschlagen:', error)
         throw error
       }