Add remember me check for passkeys

resources/js/alpine/components/passkey-login.js

@@ -4,6 +4,7 @@ Alpine.data('passkeyLogin', () => ({
     supported: false,
     busy: false,
     error: '',
+    remember: false,
     showCreateHint: false,
     hasAutoPrompted: false,
 
@@ -14,6 +15,7 @@ Alpine.data('passkeyLogin', () => ({
         // If backend already reported an invalid passkey login attempt,
         // immediately show the "sign in first, then create passkey" guidance.
         this.showCreateHint = this.$el.dataset.serverPasskeyError === '1';
+        this.remember = this.$el.dataset.rememberDefault === '1';
 
         const shouldAutoPrompt = this.$el.dataset.autoPrompt === '1';
         if (this.supported && shouldAutoPrompt && !this.showCreateHint) {
@@ -57,6 +59,7 @@ Alpine.data('passkeyLogin', () => ({
                 optionsJSON: optionsJson,
             });
 
+            this.$refs.remember.value = this.remember ? '1' : '0';
             this.$refs.response.value = JSON.stringify(startAuthenticationResponse);
             document.getElementById('passkey-login-form')?.submit();
         } catch (error) {

resources/views/partials/passkey-authenticate.blade.php

@@ -4,6 +4,7 @@
     data-options-url="{{ route('passkeys.authentication_options') }}"
     data-server-passkey-error="{{ session('authenticatePasskey::reason') === 'invalid_passkey' ? '1' : '0' }}"
     data-auto-prompt="{{ ($autoPromptPasskey ?? true) ? '1' : '0' }}"
+    data-remember-default="{{ old('rememberme') ? '1' : '0' }}"
     data-captcha-enabled="{{ \App\Support\CaptchaHelper::isEnabled() ? '1' : '0' }}"
     data-captcha-field="{{ \App\Support\CaptchaHelper::isEnabled() ? \App\Support\CaptchaHelper::getResponseFieldName() : '' }}"
     class="mt-6"
@@ -26,6 +27,18 @@
         <input type="hidden" name="g-recaptcha-response" x-ref="recaptchaResponse" value="">
     </form>
 
+    <div class="mt-4 flex items-center">
+        <input
+            id="passkey-remember"
+            x-model="remember"
+            type="checkbox"
+            class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:text-blue-400"
+        >
+        <label for="passkey-remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+            Remember me
+        </label>
+    </div>
+
     <button
         type="button"
         @click="authenticate()"