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.

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