Integration

Consider the following login form.

<form>
    <label for="username">Username</label>
    <input name="username" type="text" id="username" placeholder="Type your username here" autocomplete="username">
    
    <label for="password">Password</label>
    <input name="password" type="password" id="password" placeholder="Type your password here" autocomplete="password">
    
    <button type="submit">
        Sign in
    </button>
</form>

First step is to remove the password field that is no longer needed. In addition, we can indicate the autocomplete method is webauthn; this helps browser understanding the purpose of this field.

<form>
    <label for="username">Username</label>
    <input name="username" type="text" id="username" placeholder="Type your username here" autocomplete="username webauthn">

    <button type="submit">
        Sign in
    </button>
</form>

We now have only two Twig functions to call: stimulus_controller and stimulus_action. The first one is placed on the form level; the latter on the button.

<form
    {{ stimulus_controller('@web-auth/webauthn-stimulus/webauthn') }}
>
    <label for="username">Username</label>
    <input name="username" type="text" id="username" placeholder="Type your username here" autocomplete="username webauthn">

    <button
        type="submit"
        {{ stimulus_action('@web-auth/webauthn-stimulus/webauthn', 'signin') }}
    >
        Sign in
    </button>
</form>

The Stimulus Controller should be configured to fits on your needs. In particular, the routes to the options and authenticator result.

{{
    stimulus_controller(
        '@web-auth/webauthn-stimulus/webauthn',
        {
            requestResultUrl: path('webauthn.controller.security.main.request.result'),
            requestOptionsUrl: path('webauthn.controller.security.main.request.options')
        }
    )
}}