User-passkey_form Tag
Allows authenticated users to set up passkeys
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:
<script src="/vendor/statamic/frontend/js/helpers.js"></script>
Example#
{{ user:passkey_form }}
<input type="text" id="passkey-name" placeholder="Passkey name (e.g., My Laptop)">
<button type="button" id="create-passkey">Create Passkey</button>
<script>
document.getElementById('create-passkey').addEventListener('click', () => {
const name = document.getElementById('passkey-name').value || 'My Passkey';
Statamic.$passkeys.register({
optionsUrl: '{{ passkey_option_url }}',
verifyUrl: '{{ passkey_verify_url }}',
name: name,
onSuccess: () => location.reload(),
onError: (error) => alert(error.message),
// csrfToken (optional)
});
});
</script>
{{ /user:passkey_form }}
<s:user:passkey_form>
<input type="text" id="passkey-name" placeholder="Passkey name (e.g., My Laptop)">
<button type="button" id="create-passkey">Create Passkey</button>
<script>
document.getElementById('create-passkey').addEventListener('click', () => {
const name = document.getElementById('passkey-name').value || 'My Passkey';
Statamic.$passkeys.register({
optionsUrl: '{{ $passkey_option_url }}',
verifyUrl: '{{ $passkey_verify_url }}',
name: name,
onSuccess: () => location.reload(),
onError: (error) => alert(error.message),
// csrfToken (optional)
});
});
</script>
</s:user:passkey_form>
Variables
| Variable | Type | Description |
|---|---|---|
passkey_option_url |
string |
URL to fetch WebAuthn attestation options for creating a new passkey. |
passkey_verify_url |
string |
URL to store the new passkey after registration. |
