autocomplete="webauthn": Passkeys Direto no Campo de Login

Formulários de login com passkeys costumam exigir um botão separado só para "Entrar com passkey", competindo por espaço e atenção com o campo de usuário e senha tradicionais. O valor webauthn do atributo autocomplete resolve isso de outra forma: ele avisa o navegador que aquele campo também aceita autenticação via WebAuthn, permitindo que a passkey apareça como mais uma opção dentro do próprio menu de autopreenchimento do campo de usuário — sem nenhum botão extra.

O problema que ele resolve

Sem esse recurso, o fluxo comum é: o usuário digita o login e a senha, ou então precisa notar e clicar num botão dedicado para autenticação com passkey. Isso cria fricção e faz com que boa parte dos usuários nem chegue a descobrir que a opção existe. Com autocomplete="webauthn", basta o usuário focar no campo de usuário para que a passkey apareça automaticamente na lista de sugestões do navegador, ao lado de contas salvas — chamado de Conditional UI (UI condicional) no spec do WebAuthn.

Marcando o campo no HTML

O valor webauthn deve ser combinado com os tokens normais de autocomplete, sempre por último na lista:

<form id="form-login">
    <label for="usuario">Usuário</label>
    <input
        type="text"
        id="usuario"
        name="usuario"
        autocomplete="username webauthn"
    >

    <label for="senha">Senha</label>
    <input
        type="password"
        id="senha"
        name="senha"
        autocomplete="current-password webauthn"
    >

    <button type="submit">Entrar</button>
</form>

Isso, por si só, não ativa nada visualmente — é só um sinal no HTML. O comportamento real depende de disparar uma requisição WebAuthn em modo condicional via JavaScript.

Disparando a UI condicional

Antes de tudo, verifique se o navegador suporta o modo condicional com PublicKeyCredential.isConditionalMediationAvailable():

async function iniciarAutofillDePasskey() {
    if (!window.PublicKeyCredential?.isConditionalMediationAvailable) {
        return;
    }

    const suportado = await PublicKeyCredential.isConditionalMediationAvailable();
    if (!suportado) {
        return;
    }

    const controller = new AbortController();

    try {
        const credencial = await navigator.credentials.get({
            mediation: 'conditional',
            signal: controller.signal,
            publicKey: {
                challenge: await buscarChallengeDoServidor(),
                rpId: 'exemplo.com.br',
                userVerification: 'preferred',
            },
        });

        await enviarCredencialParaLogin(credencial);
    } catch (erro) {
        console.error('Autenticação com passkey cancelada ou falhou:', erro);
    }
}

iniciarAutofillDePasskey();

Como o mediation é 'conditional', essa chamada não abre nenhum diálogo imediatamente — ela fica "escutando" em segundo plano. A sugestão de passkey só aparece quando o usuário clica no campo marcado com webauthn, junto das sugestões de autopreenchimento normais do navegador.

Cancelando a requisição pendente

Se o usuário optar por digitar a senha em vez de usar a passkey, é uma boa prática abortar a promise pendente para liberar recursos:

const controller = new AbortController();

document.getElementById('form-login').addEventListener('submit', () => {
    controller.abort();
});

Quando usar

• Telas de login que já oferecem passkeys e querem reduzir fricção, sem adicionar um botão extra na interface.
• Migração gradual de senha para passkey, mantendo os dois campos tradicionais funcionando normalmente.
• Fluxos de registro e login combinados, onde o mesmo campo de usuário pode disparar tanto autofill de senha quanto de passkey.

Cuidados

A UI condicional exige credenciais descartáveis (discoverable credentials), já que o navegador precisa saber quais passkeys oferecer antes mesmo de o usuário digitar algo. O comportamento visual da sugestão também varia entre navegadores e sistemas operacionais — em alguns casos a passkey aparece junto das senhas salvas, em outros em uma seção separada. Por isso, o fluxo tradicional de login (usuário e senha, ou um botão explícito de passkey) deve continuar funcionando como alternativa, nunca sendo substituído por completo.

Compatibilidade

O suporte a autocomplete="webauthn" e à UI condicional já é bom nos navegadores modernos (Chrome, Edge e Safari), com a implementação do Firefox ainda evoluindo. Vale testar o comportamento em cada navegador-alvo antes de depender dele como único caminho de autenticação.

caniuse

Conclusão

O valor webauthn do autocomplete é um ajuste pequeno no HTML que destrava uma experiência de login bem mais fluida: a passkey passa a conviver com usuário e senha no mesmo campo, em vez de competir por espaço com um botão separado. Combinado com mediation: 'conditional' no JavaScript, ele torna a adoção de passkeys menos invasiva para quem ainda não migrou totalmente de senhas.