# User:Passkey_Form

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:

```html
<script src="/vendor/statamic/frontend/js/helpers.js"></script>
```

### Example

::tabs

::tab antlers
```antlers
{{ 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 }}
```
::tab blade
```blade
<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>
```
::