Add Passkey Support & Pint

resources/views/vendor/passkeys/components/authenticate.blade.php

@@ -0,0 +1,23 @@
+<div>
+    @include('passkeys::components.partials.authenticateScript')
+
+    <form id="passkey-login-form" method="POST" action="{{ route('passkeys.login') }}">
+        @csrf
+    </form>
+
+    @if($message = session()->get('authenticatePasskey::message'))
+        <div class="bg-red-100 text-red-700 p-4 border border-red-400 rounded">
+            {{ $message }}
+        </div>
+    @endif
+
+    <div onclick="authenticateWithPasskey()">
+        @if ($slot->isEmpty())
+            <div class="bg-zinc-700 hover:bg-zinc-600 text-white font-bold px-4 h-10 rounded text-center p-[10px] cursor-pointer">
+                <i class="fa-solid fa-key"></i> {{ __('passkeys::passkeys.authenticate_using_passkey') }}
+            </div>
+        @else
+            {{ $slot }}
+        @endif
+    </div>
+</div>

resources/views/vendor/passkeys/components/partials/authenticateScript.blade.php

@@ -0,0 +1,18 @@
+<script>
+    async function authenticateWithPasskey(remember = false) {
+        const response = await fetch('{{ route('passkeys.authentication_options') }}')
+
+        const options = await response.json();
+
+        const startAuthenticationResponse = await startAuthentication({ optionsJSON: options, });
+
+        const form = document.getElementById('passkey-login-form');
+    
+        form.addEventListener('formdata', ({formData}) => {
+            formData.set('remember', remember);
+            formData.set('start_authentication_response', JSON.stringify(startAuthenticationResponse));
+        });
+
+        form.submit();
+    }
+</script>