Update Apache SSL configuration and enhance security features across multiple files. Changed X-Frame-Options to SAMEORIGIN for better security, added optional Content Security Policy headers for testing, and improved password handling with HaveIBeenPwned checks during user registration and password reset. Implemented passkey login functionality in the authentication flow, including UI updates for user experience. Enhanced image upload processing with size limits and validation, and added rate limiting for various API endpoints to prevent abuse.

pages/login.vue

@@ -97,6 +97,23 @@
             <span>{{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}</span>
           </button>
 
+          <!-- Passkey Button -->
+          <button
+            type="button"
+            :disabled="isLoading || isPasskeyLoading || !isPasskeySupported"
+            class="w-full px-6 py-3 border border-gray-300 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 text-gray-900 font-semibold rounded-lg transition-colors flex items-center justify-center"
+            @click="handlePasskeyLogin"
+          >
+            <Loader2
+              v-if="isPasskeyLoading"
+              :size="20"
+              class="mr-2 animate-spin"
+            />
+            <span>
+              {{ isPasskeyLoading ? 'Passkey-Login läuft...' : (isPasskeySupported ? 'Mit Passkey anmelden' : 'Passkey nicht verfügbar') }}
+            </span>
+          </button>
+
           <!-- Forgot Password Link -->
           <div class="text-center">
             <NuxtLink
@@ -137,9 +154,15 @@ const formData = ref({
 })
 
 const isLoading = ref(false)
+const isPasskeyLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
 
+const isPasskeySupported = ref(false)
+if (process.client) {
+  isPasskeySupported.value = !!window.PublicKeyCredential
+}
+
 const handleLogin = async () => {
   isLoading.value = true
   errorMessage.value = ''
@@ -168,6 +191,31 @@ const handleLogin = async () => {
   }
 }
 
+const handlePasskeyLogin = async () => {
+  isPasskeyLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    const response = await authStore.passkeyLogin()
+    if (response.success) {
+      successMessage.value = 'Anmeldung per Passkey erfolgreich! Sie werden weitergeleitet...'
+      setTimeout(() => {
+        const roles = response.user.roles || (response.user.role ? [response.user.role] : [])
+        if (roles.includes('admin') || roles.includes('vorstand') || roles.includes('newsletter')) {
+          router.push('/cms')
+        } else {
+          router.push('/mitgliederbereich')
+        }
+      }, 800)
+    }
+  } catch (error) {
+    errorMessage.value = error?.data?.message || error?.message || 'Passkey-Login fehlgeschlagen.'
+  } finally {
+    isPasskeyLoading.value = false
+  }
+}
+
 definePageMeta({
   layout: 'default'
 })

pages/mitgliederbereich/profil.vue

@@ -134,6 +134,72 @@
             </div>
           </div>
 
+          <!-- Passkeys -->
+          <div class="border-t border-gray-200 pt-6 mt-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">
+              Passkeys
+            </h3>
+            <p class="text-sm text-gray-600 mb-4">
+              Passkeys erlauben eine Anmeldung ohne Passwort (z.B. per Fingerabdruck/FaceID/Windows Hello).
+            </p>
+
+            <div
+              v-if="passkeyError"
+              class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm mb-3"
+            >
+              <AlertCircle :size="20" class="mr-2" />
+              {{ passkeyError }}
+            </div>
+
+            <div class="flex flex-wrap gap-3 mb-4">
+              <button
+                type="button"
+                class="px-4 py-2 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition-colors disabled:bg-gray-400"
+                :disabled="isSaving || passkeyLoading || !isPasskeySupported"
+                @click="addPasskey"
+              >
+                {{ passkeyLoading ? 'Passkey wird erstellt...' : (isPasskeySupported ? 'Passkey hinzufügen' : 'Passkeys nicht unterstützt') }}
+              </button>
+              <button
+                type="button"
+                class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:bg-gray-100 disabled:text-gray-400"
+                :disabled="isSaving || passkeyLoading"
+                @click="loadPasskeys"
+              >
+                Aktualisieren
+              </button>
+            </div>
+
+            <div v-if="passkeys.length === 0" class="text-sm text-gray-600">
+              Noch keine Passkeys hinterlegt.
+            </div>
+
+            <ul v-else class="space-y-2">
+              <li
+                v-for="pk in passkeys"
+                :key="pk.credentialId"
+                class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
+              >
+                <div class="min-w-0">
+                  <div class="font-medium text-gray-900 truncate">
+                    {{ pk.name || 'Passkey' }}
+                  </div>
+                  <div class="text-xs text-gray-600">
+                    Erstellt: {{ formatDate(pk.createdAt) }}<span v-if="pk.lastUsedAt"> · Zuletzt genutzt: {{ formatDate(pk.lastUsedAt) }}</span>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  class="ml-4 px-3 py-1.5 text-sm border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:bg-gray-100 disabled:text-gray-400"
+                  :disabled="isSaving || passkeyLoading"
+                  @click="removePasskey(pk.credentialId)"
+                >
+                  Entfernen
+                </button>
+              </li>
+            </ul>
+          </div>
+
           <!-- Error/Success Messages -->
           <div
             v-if="errorMessage"
@@ -197,6 +263,14 @@ const isSaving = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
 
+const passkeys = ref([])
+const passkeyLoading = ref(false)
+const passkeyError = ref('')
+const isPasskeySupported = ref(false)
+if (process.client) {
+  isPasskeySupported.value = !!window.PublicKeyCredential
+}
+
 const formData = ref({
   name: '',
   email: '',
@@ -228,6 +302,63 @@ const loadProfile = async () => {
   }
 }
 
+const loadPasskeys = async () => {
+  passkeyError.value = ''
+  try {
+    const res = await $fetch('/api/auth/passkeys/list')
+    passkeys.value = res.passkeys || []
+  } catch (e) {
+    passkeyError.value = e?.data?.message || 'Fehler beim Laden der Passkeys.'
+  }
+}
+
+const addPasskey = async () => {
+  passkeyError.value = ''
+  passkeyLoading.value = true
+  try {
+    const name = window.prompt('Name für den Passkey (z.B. "iPhone", "Laptop"):', 'Passkey') || 'Passkey'
+    const res = await $fetch('/api/auth/passkeys/registration-options', { method: 'POST' })
+    const mod = await import('@simplewebauthn/browser')
+    const credential = await mod.startRegistration(res.options)
+    await $fetch('/api/auth/passkeys/register', {
+      method: 'POST',
+      body: { credential, name }
+    })
+    await loadPasskeys()
+    successMessage.value = 'Passkey hinzugefügt.'
+  } catch (e) {
+    passkeyError.value = e?.data?.message || e?.message || 'Passkey konnte nicht hinzugefügt werden.'
+  } finally {
+    passkeyLoading.value = false
+  }
+}
+
+const removePasskey = async (credentialId) => {
+  passkeyError.value = ''
+  passkeyLoading.value = true
+  try {
+    await $fetch('/api/auth/passkeys/remove', {
+      method: 'POST',
+      body: { credentialId }
+    })
+    await loadPasskeys()
+    successMessage.value = 'Passkey entfernt.'
+  } catch (e) {
+    passkeyError.value = e?.data?.message || 'Passkey konnte nicht entfernt werden.'
+  } finally {
+    passkeyLoading.value = false
+  }
+}
+
+const formatDate = (iso) => {
+  if (!iso) return '—'
+  try {
+    return new Date(iso).toLocaleString('de-DE')
+  } catch {
+    return iso
+  }
+}
+
 const handleSave = async () => {
   isSaving.value = true
   errorMessage.value = ''
@@ -292,6 +423,7 @@ const handleSave = async () => {
 
 onMounted(() => {
   loadProfile()
+  loadPasskeys()
 })
 
 definePageMeta({