diff --git a/content/collections/tags/user-delete_passkey_form.md b/content/collections/tags/user-delete_passkey_form.md new file mode 100644 index 000000000..ab55559c9 --- /dev/null +++ b/content/collections/tags/user-delete_passkey_form.md @@ -0,0 +1,63 @@ +--- +id: d0ed4ac0-536a-47a1-965b-202b52baddb2 +blueprint: tag +title: 'User:Delete_Passkey_Form' +description: 'Creates a form to delete a passkey' +intro: 'As the tag name suggests, it allows you to delete a passkey.' +parameters: + - + name: id + type: string + description: 'The passkey ID to delete. Required.' + - + name: redirect + type: string + description: Where the user should be taken after successfully deleting a passkey. + - + name: HTML Attributes + type: + description: 'Set HTML attributes as if you were in an HTML element. For example, `class="delete-form"`.' +related_entries: + - 38323438-4719-4a7b-ba5a-8abfe0d7dfc0 + - 7a958307-4cdb-47f3-a689-0c7de57e3ff7 + - 7432f1cb-7418-4d54-8e65-51b1ae3bcb3a +--- +## Overview + +The `user:delete_passkey_form` tag renders a form to delete a passkey. + +### Example + +The tag is typically used inside a [`{{ user:passkeys }}`](/tags/user-passkeys) loop: + +::tabs + +::tab antlers +```antlers +{{ user:passkeys as="passkeys" }} + {{ passkeys }} +
+ {{ name }} + + {{ user:delete_passkey_form :id="id" }} + + {{ /user:delete_passkey_form }} +
+ {{ /passkeys }} +{{ /user:passkeys }} +``` +::tab blade +```blade + + @foreach ($passkeys as $passkey) +
+ {{ $passkey['name'] }} + + + + +
+ @endforeach +
+``` +:: diff --git a/content/collections/tags/user-login_form.md b/content/collections/tags/user-login_form.md index 061bfa3fe..5a152dba6 100644 --- a/content/collections/tags/user-login_form.md +++ b/content/collections/tags/user-login_form.md @@ -34,6 +34,14 @@ variables: name: success type: string description: A success message. + - + name: passkey_options_url + type: string + description: URL to fetch WebAuthn assertion options for passkey login. + - + name: passkey_verify_url + type: string + description: URL to verify passkey login. id: 7432f1cb-7418-4d54-8e65-51b1ae3bcb3a --- ## Overview @@ -101,3 +109,45 @@ The tag will render the opening and closing `
` HTML elements for you. The ``` :: + +## Passkeys + +You can add passkey authentication to your login form using Statamic's frontend JavaScript helpers. + +1. First, include the helpers script on your page: + ```html + + ``` + +2. Use the provided variables to add a passkey login option: + ```antlers + {{ user:login_form }} + + + + + {{# [tl! focus:start] #}} + + {{# [tl! focus:end] #}} + {{ /user:login_form }} + ``` +3. Add `autocomplete="username webauthn"` to your email input for browser autofill to work. + +For more information on managing passkeys on the frontend, see the following docs: +- [`{{ user:passkeys }}`](/tags/user-passkeys) +- [`{{ user:passkey_form }}`](/tags/user-passkey_form) +- [`{{ user:delete_passkey_form }}`](/tags/user-delete_passkey_form) diff --git a/content/collections/tags/user-passkey_form.md b/content/collections/tags/user-passkey_form.md new file mode 100644 index 000000000..5f0e8d6db --- /dev/null +++ b/content/collections/tags/user-passkey_form.md @@ -0,0 +1,81 @@ +--- +id: 7a958307-4cdb-47f3-a689-0c7de57e3ff7 +blueprint: tag +title: 'User:Passkey_Form' +description: 'Creates a passkey registration form' +intro: 'Allows authenticated users to set up passkeys' +variables: + - + name: passkey_option_url + type: string + description: 'URL to fetch WebAuthn attestation options for creating a new passkey.' + - + name: passkey_verify_url + type: string + description: 'URL to store the new passkey after registration.' +related_entries: + - 38323438-4719-4a7b-ba5a-8abfe0d7dfc0 + - d0ed4ac0-536a-47a1-965b-202b52baddb2 + - 7432f1cb-7418-4d54-8e65-51b1ae3bcb3a +--- +## Overview + +The `user:passkey_form` tag provides the necessary URLs to set up passkeys for authenticated users. + +### JavaScript helpers + +You'll need to include the frontend helpers script on your page: + +```html + +``` + +### Example + +::tabs + +::tab antlers +```antlers +{{ user:passkey_form }} + + + + +{{ /user:passkey_form }} +``` +::tab blade +```blade + + + + + + +``` +:: diff --git a/content/collections/tags/user-passkeys.md b/content/collections/tags/user-passkeys.md new file mode 100644 index 000000000..df65f0abb --- /dev/null +++ b/content/collections/tags/user-passkeys.md @@ -0,0 +1,97 @@ +--- +id: 38323438-4719-4a7b-ba5a-8abfe0d7dfc0 +blueprint: tag +title: 'User:Passkeys' +description: 'Lists the current user''s passkeys' +intro: 'Loop through the authenticated user''s registered passkeys.' +variables: + - + name: id + type: string + description: 'The passkey identifier.' + - + name: name + type: string + description: 'The user-defined passkey name.' + - + name: last_login + type: Carbon + description: 'The last time the passkey was used for login, or null if never used.' +related_entries: + - 7432f1cb-7418-4d54-8e65-51b1ae3bcb3a + - 7a958307-4cdb-47f3-a689-0c7de57e3ff7 + - d0ed4ac0-536a-47a1-965b-202b52baddb2 +--- +## Overview + +The `user:passkeys` tag loops through the user's passkeys. Useful for building a passkey management page where users can view and delete their passkeys. + +### Example + +::tabs + +::tab antlers +```antlers +{{ user:passkeys as="passkeys" }} + {{ if passkeys }} +

Your Passkeys

+ + {{ else }} +

You haven't set up any passkeys yet.

+ {{ /if }} +{{ /user:passkeys }} +``` +::tab blade +```blade + + @if ($passkeys) +

Your Passkeys

+ + @else +

You haven't set up any passkeys yet.

+ @endif +
+``` +:: + +## Aliasing + +You can use the `as` parameter to alias the passkeys into a variable, which allows you to use `{{ if passkeys }}` to check if there are any passkeys before rendering. + +```antlers +{{ user:passkeys as="passkeys" }} + {{ if passkeys }} + {{# Render passkeys list #}} + {{ /if }} +{{ /user:passkeys }} +```