How To Implement The WebAuthn Autcomplete Token

Introduction

WebAuthn offers a cutting-edge solution with its autocomplete attribute, which facilitates passkey and password autofill. This blog post dives into the characteristics of WebAuthn autocomplete, exploring its benefits, implementation, and browser support, to help developers and product managers enhance user authentication experiences.

Read Full Blog Post Here

Understanding the Autocomplete Attribute

The HTML autocomplete attribute significantly improves user experience by automating form field completion. This attribute can be set to "on" or "off," or take specific tokens that instruct the user agent on how to prefill input fields. It applies to various HTML elements such as <input>, <textarea>, <select>, and <form>. 
For WebAuthn, the attribute autocomplete="webauthn" is crucial for implementing Conditional UI, which enhances security and convenience.

Browser Support for WebAuthn Autocomplete

The adoption of autocomplete="webauthn" is gaining traction across major browsers, including Chrome, Edge, Safari, and Firefox. Despite discrepancies in documentation and real-world behavior, our tests confirm functional support in these browsers. Developers are advised to stay updated with browser documentation and compatibility resources like "Can I Use" to ensure optimal implementation.

Implementing WebAuthn Autocomplete

To integrate autocomplete="webauthn" into your application, follow these steps:

• Prerequisites: Ensure the user's operating system and browser support passkey functionality. Implement a WebAuthn server to handle authentication ceremonies.
• UI Integration: Add the autocomplete attribute to relevant input fields in your HTML forms. For example:

<input type="text" id="username-field" autocomplete="username webauthn">

• Authentication Ceremony: Trigger the WebAuthn authentication ceremony using the appropriate JavaScript methods. Here's a snippet for initiating the process:

async function conditionalMediationLogin() {
    const publicKeyCredentialRequestOptions = {
        challenge: generateChallenge("randomChallengeString"),
        timeout: 60000,
        userVerification: "preferred",
        rpId: "your-rp-id"
    };

    try {
        const assertion = await navigator.credentials.get({
            publicKey: publicKeyCredentialRequestOptions,
            mediation: "conditional",
            signal: new AbortController().signal
        });
        console.log("Conditional login successful", assertion);
    } catch (err) {
        console.error("Conditional login error", err);
    }
}

Real-World Testing Across Browsers and OS

Our extensive testing across various operating systems and browsers reveals a heterogeneous support landscape. Key findings include:

• iOS and macOS: Conditional UI works effectively, though iOS prioritizes passkeys over passwords.
• Android: Requires specific configurations for WebAuthn server settings.
• Windows 10 and 11: Support for Conditional UI varies, with notable differences in behavior on Chrome and Edge.

Recommendations for Developers

Depending on your application's needs, consider these scenarios:

• Scenario A: User-Friendly Approach: Implement passkeys without Conditional UI, retaining traditional email and password autofill.
• Scenario B: Progressive Approach: Promote passkeys with Conditional UI, allowing users to choose between passkeys and passwords seamlessly.
• Scenario C: Passwordless Future: Opt for an email-first sign-in flow, leveraging Conditional UI to prioritize passkeys.

Conclusion

Implementing WebAuthn autocomplete and Conditional UI transforms user authentication by enhancing security and reducing cognitive load. Continuous monitoring of browser and OS updates is essential to maintain a seamless user experience. For a deeper dive into specific implementation steps and edge cases, visit our detailed guide on WebAuthn Autocomplete for Passkey & Password Autofill.