From 0e5856f19da0eba68aa9b0cce7fb5d7520c182b2 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 7 Jan 2026 18:46:45 +0100
Subject: [PATCH] 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 | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/pages/registrieren.vue b/pages/registrieren.vue
index f5fbaaf..c3c8ecc 100644
--- a/pages/registrieren.vue
+++ b/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) {
-  isPasskeySupported.value = !!window.PublicKeyCredential
-}
+const passkeySupportReason = ref('')
+
+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
   }