Projektgrundlage: Laravel 13 mit Livewire-Starter-Kit und Sail

- Livewire-Starter-Kit (Livewire 4, Flux, Fortify) mit Pest - Sail mit PHP 8.5, MySQL 8.4, Redis, Meilisearch 1.54.2, Mailpit - Registrierung deaktiviert, 2FA und Passkeys verfügbar - Spatie laravel-permission - gitleaks als Pre-Commit-Hook (.githooks) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-01 08:53:42 +02:00
commit dedce594a0
131 changed files with 22922 additions and 0 deletions
@@ -0,0 +1,76 @@
+@props([
+    'optionsRoute' => 'passkey.login-options',
+    'submitRoute' => 'passkey.login',
+    'label' => __('Sign in with a passkey'),
+    'loadingLabel' => __('Authenticating...'),
+    'separator' => __('Or continue with email'),
+])
+
+@assets
+@vite('resources/js/passkeys.js')
+@endassets
+
+<div
+    x-data="{
+        supported: false,
+        loading: false,
+        error: null,
+        updateSupport() {
+            this.supported = Boolean(window.Passkeys?.isSupported());
+        },
+        init() {
+            this.updateSupport();
+
+            window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
+        },
+        async verify() {
+            this.loading = true;
+            this.error = null;
+            try {
+                const response = await window.Passkeys.verify({
+                    routes: {
+                        options: '{{ route($optionsRoute) }}',
+                        submit: '{{ route($submitRoute) }}',
+                    },
+                });
+                Livewire.navigate(response.redirect || '/dashboard');
+            } catch (e) {
+                if (e.constructor?.name !== 'UserCancelledError') {
+                    this.error = e.message;
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+    }"
+>
+    <template x-if="supported">
+        <div>
+            <div class="grid gap-2">
+                <flux:button
+                    variant="outline"
+                    icon="finger-print"
+                    class="w-full"
+                    x-on:click="verify()"
+                    x-bind:disabled="loading"
+                >
+                    <span x-show="!loading">{{ $label }}</span>
+                    <span x-show="loading" x-cloak>{{ $loadingLabel }}</span>
+                </flux:button>
+                <p x-show="error" x-text="error" x-cloak
+                   class="text-sm text-center text-red-600 dark:text-red-400"></p>
+            </div>
+
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div>
+                </div>
+                <div class="relative flex justify-center text-xs uppercase">
+                    <span class="px-2 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-900">
+                        {{ $separator }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>