Implement passkey support checks in registration page, including user feedback for unsupported scenarios. Update logic to determine passkey availability based on secure context and browser compatibility, enhancing user experience during registration.

pages/registrieren.vue

@@ -20,6 +20,9 @@
             <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 v-if="!isPasskeySupported" class="text-xs text-red-700 mt-1">
+                Passkeys aktuell nicht verfügbar: {{ passkeySupportReason || 'Bitte HTTPS/aktuellen Browser verwenden.' }}
+              </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">
@@ -194,7 +197,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { AlertCircle, Check, Loader2, Info } from 'lucide-vue-next'
 
 const formData = ref({
@@ -210,9 +213,21 @@ const errorMessage = ref('')
 const successMessage = ref('')
 const usePasskey = ref(false)
 const isPasskeySupported = ref(false)
-if (process.client) {
+const passkeySupportReason = ref('')
-  isPasskeySupported.value = !!window.PublicKeyCredential
+
+onMounted(() => {
+  try {
+    const hasPKC = typeof window !== 'undefined' && typeof window.PublicKeyCredential !== 'undefined'
+    const secure = typeof window !== 'undefined' && !!window.isSecureContext
+    isPasskeySupported.value = !!(hasPKC && secure)
+    if (!secure) passkeySupportReason.value = 'Kein Secure Context (HTTPS oder localhost erforderlich).'
+    else if (!hasPKC) passkeySupportReason.value = 'Browser unterstützt WebAuthn/Passkeys nicht.'
+    else passkeySupportReason.value = ''
+  } catch {
+    isPasskeySupported.value = false
+    passkeySupportReason.value = 'Passkey-Check fehlgeschlagen.'
   }
+})
 
 const handleRegister = async () => {
   errorMessage.value = ''
@@ -271,7 +286,7 @@ const handleRegisterWithPasskey = async () => {
   successMessage.value = ''
 
   if (!isPasskeySupported.value) {
-    errorMessage.value = 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).'
+    errorMessage.value = passkeySupportReason.value || 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).'
     return
   }