Refactor authentication handling in Navigation and registration components to support lazy store access, improving resilience against Pinia initialization issues. Enhance registration logic to include optional password fallback for passkey users, with validation checks for password strength and confirmation. Update server-side registration to handle optional password securely, ensuring consistent user experience across different authentication methods.

components/Navigation.vue

@@ -851,17 +851,35 @@ import { useRoute } from 'vue-router'
 import { Menu, X, ChevronDown } from 'lucide-vue-next'
 
 const route = useRoute()
-const authStore = useAuthStore()
 const isMobileMenuOpen = ref(false)
 const mobileSubmenu = ref(null)
 const mannschaften = ref([])
 const hasGalleryImages = ref(false)
 const showCmsDropdown = ref(false)
 
-// Reactive auth state from store
+// Lazy store access to avoid Pinia initialization issues
-const isLoggedIn = computed(() => authStore.isLoggedIn)
+const getAuthStore = () => {
-const isAdmin = computed(() => authStore.isAdmin)
+  try {
-const canAccessNewsletter = computed(() => authStore.hasAnyRole('admin', 'vorstand', 'newsletter'))
+    return useAuthStore()
+  } catch (e) {
+    // Fallback if Pinia is not yet initialized
+    return null
+  }
+}
+
+// Reactive auth state from store (lazy)
+const isLoggedIn = computed(() => {
+  const store = getAuthStore()
+  return store?.isLoggedIn ?? false
+})
+const isAdmin = computed(() => {
+  const store = getAuthStore()
+  return store?.isAdmin ?? false
+})
+const canAccessNewsletter = computed(() => {
+  const store = getAuthStore()
+  return store?.hasAnyRole('admin', 'vorstand', 'newsletter') ?? false
+})
 
 // Automatisches Setzen des Submenus basierend auf der Route
 const currentSubmenu = computed(() => {
@@ -954,7 +972,10 @@ const handleDocumentClick = (e) => {
 onMounted(() => {
   loadMannschaften()
   checkGalleryImages()
-  authStore.checkAuth()
+  const store = getAuthStore()
+  if (store) {
+    store.checkAuth()
+  }
 
   // Close CMS dropdown when clicking outside
   document.addEventListener('click', handleDocumentClick)

pages/registrieren.vue

@@ -87,18 +87,18 @@
           </div>
 
           <!-- Password -->
-          <div v-if="!usePasskey">
+          <div v-if="!usePasskey || setPasswordForPasskey">
             <label
               for="password"
               class="block text-sm font-medium text-gray-700 mb-2"
             >
-              Passwort
+              Passwort <span v-if="usePasskey" class="text-xs text-gray-500">(Fallback, optional)</span>
             </label>
             <input
               id="password"
               v-model="formData.password"
               type="password"
-              required
+              :required="!usePasskey"
               autocomplete="new-password"
               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="••••••••"
@@ -109,24 +109,35 @@
           </div>
 
           <!-- Confirm Password -->
-          <div v-if="!usePasskey">
+          <div v-if="!usePasskey || setPasswordForPasskey">
             <label
               for="confirmPassword"
               class="block text-sm font-medium text-gray-700 mb-2"
             >
-              Passwort bestätigen
+              Passwort bestätigen <span v-if="usePasskey" class="text-xs text-gray-500">(Fallback)</span>
             </label>
             <input
               id="confirmPassword"
               v-model="formData.confirmPassword"
               type="password"
-              required
+              :required="!usePasskey"
               autocomplete="new-password"
               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="••••••••"
             >
           </div>
 
+          <!-- Optional password toggle for passkey users -->
+          <div v-if="usePasskey" class="flex items-center gap-2 text-sm text-gray-700">
+            <input
+              v-model="setPasswordForPasskey"
+              type="checkbox"
+              class="h-4 w-4"
+              :disabled="isLoading"
+            >
+            <span>Zusätzlich ein Passwort als Fallback setzen (z.B. für Firefox/Linux)</span>
+          </div>
+
           <!-- Error Message -->
           <div
             v-if="errorMessage"
@@ -214,6 +225,7 @@ const successMessage = ref('')
 const usePasskey = ref(false)
 const isPasskeySupported = ref(false)
 const passkeySupportReason = ref('')
+const setPasswordForPasskey = ref(true)
 
 onMounted(() => {
   try {
@@ -295,6 +307,22 @@ const handleRegisterWithPasskey = async () => {
     return
   }
 
+  // Passwort-Fallback optional validieren
+  if (setPasswordForPasskey.value) {
+    if (formData.value.password.length < 8) {
+      errorMessage.value = 'Das Passwort muss mindestens 8 Zeichen lang sein.'
+      return
+    }
+    if (formData.value.password !== formData.value.confirmPassword) {
+      errorMessage.value = 'Die Passwörter stimmen nicht überein.'
+      return
+    }
+  } else {
+    // Nicht mitschicken
+    formData.value.password = ''
+    formData.value.confirmPassword = ''
+  }
+
   isLoading.value = true
   try {
     const pre = await $fetch('/api/auth/register-passkey-options', {
@@ -313,7 +341,8 @@ const handleRegisterWithPasskey = async () => {
       method: 'POST',
       body: {
         registrationId: pre.registrationId,
-        credential
+        credential,
+        password: setPasswordForPasskey.value ? formData.value.password : undefined
       }
     })
 

server/api/auth/register-passkey.post.js

@@ -1,17 +1,18 @@
 import { verifyRegistrationResponse } from '@simplewebauthn/server'
 import crypto from 'crypto'
-import bcrypt from 'bcryptjs'
 import nodemailer from 'nodemailer'
-import { readUsers, writeUsers } from '../../utils/auth.js'
+import { hashPassword, readUsers, writeUsers } from '../../utils/auth.js'
 import { getWebAuthnConfig } from '../../utils/webauthn-config.js'
 import { consumePreRegistration } from '../../utils/webauthn-challenges.js'
 import { toBase64Url } from '../../utils/webauthn-encoding.js'
 import { writeAuditLog } from '../../utils/audit-log.js'
+import { assertPasswordNotPwned } from '../../utils/hibp.js'
 
 export default defineEventHandler(async (event) => {
   const body = await readBody(event)
   const registrationId = String(body?.registrationId || '')
   const response = body?.credential
+  const password = body?.password ? String(body.password) : ''
 
   if (!registrationId || !response) {
     throw createError({ statusCode: 400, statusMessage: 'Ungültige Anfrage' })
@@ -56,9 +57,18 @@ export default defineEventHandler(async (event) => {
   const credentialId = toBase64Url(credentialID)
   const publicKey = toBase64Url(credentialPublicKey)
 
-  // Dummy password hash (login via password isn't intended)
+  // Optional: Passwort als Fallback (z.B. Firefox/Linux) erlauben
-  const salt = await bcrypt.genSalt(10)
+  let hashedPassword
-  const hashedPassword = await bcrypt.hash(crypto.randomBytes(32).toString('hex'), salt)
+  if (password && password.trim().length > 0) {
+    if (password.length < 8) {
+      throw createError({ statusCode: 400, message: 'Das Passwort muss mindestens 8 Zeichen lang sein' })
+    }
+    await assertPasswordNotPwned(password)
+    hashedPassword = await hashPassword(password)
+  } else {
+    // Kein Passwort gesetzt: random Hash, damit bestehende Code-Pfade (verifyPassword) konsistent bleiben.
+    hashedPassword = await hashPassword(crypto.randomBytes(32).toString('hex'))
+  }
 
   const newUser = {
     id: String(userId),
@@ -115,7 +125,7 @@ export default defineEventHandler(async (event) => {
             <li><strong>Name:</strong> ${name}</li>
             <li><strong>E-Mail:</strong> ${email}</li>
             <li><strong>Telefon:</strong> ${phone || 'Nicht angegeben'}</li>
-            <li><strong>Login:</strong> Passkey (ohne Passwort)</li>
+            <li><strong>Login:</strong> Passkey${password ? ' + Passwort (Fallback)' : ' (ohne Passwort)'}</li>
           </ul>
           <p>Bitte prüfen Sie die Registrierung im CMS.</p>
         `