Interactive passkey login
A user chooses passwordless authentication from a sign-in screen.
Better Auth · Module
signIn.passkey
signIn.passkey starts a Better Auth passkey sign-in flow through WebAuthn. It supports browser autofill, optional WebAuthn extensions, and returning WebAuthn response details.
How it works
authClient.signIn.passkey starts a WebAuthn passkey sign-in flow. Setting autoFill to true lets the browser preload passkeys for Conditional UI; optional extensions can be supplied, and the response can include WebAuthn details when requested.
Syntax
authClient.signIn.passkey({ autoFill?, extensions?, returnWebAuthnResponse? })Parameters
| Name | Type | Description |
|---|---|---|
autoFill | boolean, optional | Enables browser autofill, also known as Conditional UI. |
extensions | WebAuthn extensions, optional | Optional WebAuthn extensions, including PRF, credProps, or largeBlob. |
returnWebAuthnResponse | boolean, optional | Requests the WebAuthn response and extension results in the result. |
Returns
The sign-in result, exposed as data and error by the client example; when requested, it can include the WebAuthn response and extension results.
Key points
- Call
signIn.passkeyto initiate authentication with a registered passkey. - The method launches the passkey prompt so the user can complete authentication.
- The corresponding HTTP operation is a POST request to
/sign-in/passkey. - Set
autoFilltotruewhen the browser should suggest passkeys through Conditional UI. - Optional WebAuthn extensions can be provided for capabilities such as PRF, credential properties, or large blobs.
- Enable
returnWebAuthnResponsewhen the caller needs the WebAuthn response and extension results.
Common mistakes
- For browser autofill, call the method when the component mounts and set
autoFilltotrue.
Example: Passkey sign-in
const { data, error } = await authClient.signIn.passkey({
autoFill: true,
});
if (error) {
console.error(error);
} else {
console.log(data);
}Starts passkey sign-in and enables browser autofill, also known as Conditional UI.
When to use it
Conditional UI autofill
A sign-in component should offer discoverable credentials as it loads.
WebAuthn extension handling
An application needs WebAuthn extension output for a specialized flow.
Interview questions
QHow do you sign in with a passkey?
Use authClient.signIn.passkey to begin passkey authentication. It prompts the user to authenticate with a passkey and maps to POST /sign-in/passkey.
Follow-up: How can the browser offer passkeys without an explicit button click? Call the method on component mount with autoFill: true to preload them for Conditional UI.
QWhat does the autoFill option do?
Pass autoFill: true to enable browser autofill, also called Conditional UI. This is useful when passkeys should be offered as the component loads.
Follow-up: What additional WebAuthn data can be requested? Supply optional extensions, such as credProps, PRF, or largeBlob.
QHow can a passkey sign-in request include WebAuthn extension information?
The client method accepts optional WebAuthn extensions and can return the WebAuthn response and extension results when returnWebAuthnResponse is enabled. The documented examples include extensions such as credProps, PRF, and largeBlob.
Follow-up: What server-side equivalent is documented? Use auth.api.signInPasskey with a body containing the same sign-in options.
Related
Passkey pluginauthClient.signIn.passkeyauth.api.signInPasskeyWebAuthnConditional UI