Web authentication | Frontend Practical Guide

Overview

WebAuthn enables strong browser-based authentication with passkeys, platform authenticators, and security keys. It reduces reliance on passwords and can provide safer sign-in flows.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`AuthenticatorAssertionResponse`	67	18	60	13	70	13
`authenticatorData` The authenticatorData property of the AuthenticatorAssertionResponse interface returns an ArrayBuffer containing information from the authenticator such as the Relying Party ID Hash (rpIdHash), a signature counter, test of user presence, user verification flags, and any extensions processed by the authenticator.	67	18	60	13	70	13
`signature` The signature read-only property of the AuthenticatorAssertionResponse interface is an ArrayBuffer object which is the signature of the authenticator for both AuthenticatorAssertionResponse.authenticatorData and a SHA-256 hash of the client data (AuthenticatorResponse.clientDataJSON).	67	18	60	13	70	13
`userHandle` The userHandle read-only property of the AuthenticatorAssertionResponse interface is an ArrayBuffer object providing an opaque identifier for the given user. Such an identifier can be used by the relying party's server to link the user account with its corresponding credentials and other data.	67	18	60	13	70	13
`AuthenticatorAttestationResponse` The AuthenticatorAttestationResponse interface of the Web Authentication API is the result of a WebAuthn credential registration. It contains information about the credential that the server needs to perform WebAuthn assertions, such as its credential ID and public key.	67	18	60	13	70	13
`attestationObject` The attestationObject property of the AuthenticatorAttestationResponse interface returns an ArrayBuffer containing the new public key, as well as signature over the entire attestationObject with a private key that is stored in the authenticator when it is manufactured.	67	18	60	13	70	13
`getTransports` The getTransports() method of the AuthenticatorAttestationResponse interface returns an array of strings describing the different transports which may be used by the authenticator.	74	79	119	16	74	16
`AuthenticatorResponse` The AuthenticatorResponse interface of the Web Authentication API is the base interface for interfaces that provide a cryptographic root of trust for a key pair. The child interfaces include information from the browser such as the challenge origin and either may be returned from PublicKeyCredential.response.	67	18	60	13	70	13
`clientDataJSON` The clientDataJSON property of the AuthenticatorResponse interface stores a JSON string in an ArrayBuffer, representing the client data that was passed to CredentialsContainer.create() or CredentialsContainer.get(). This property is only accessed on one of the child objects of AuthenticatorResponse, specifically AuthenticatorAttestationResponse or…	67	18	60	13	70	13
`create (publicKey option)` `publicKey` option	67	18	60	13	70	13
`create (publicKey option attestation)` `attestation` option	67	18	60	13	70	13
`create (publicKey option attestation direct)`	67	18	60	13	70	13
`create (publicKey option attestation enterprise)`	67	18	60	13	70	13
`create (publicKey option attestation indirect)`	67	18	60	13	70	13
`create (publicKey option attestation none)`	67	18	60	13	70	13
`create (publicKey option extensions)` The Web Authentication API has a system of extensions — extra functionality that can be requested during credential creation (CredentialsContainer.create()) or authentication (CredentialsContainer.get()) operations. This article explains how to request WebAuthn extensions, retrieve information about the responses from those requests, and the available…	67	18	60	13	70	13
`create (publicKey option extensions appidExclude)` - Usable in: Registration (CredentialsContainer.create()) - Processed by: User agent - Specification: FIDO AppID Exclusion Extension (appidExclude)	67	18	60	13	70	13
`create (publicKey option extensions credProps)` - Usable in: Registration (CredentialsContainer.create()) - Processed by: User agent - Specification: Credential Properties Extension (credProps)	89	89	119		108
`create (publicKey option extensions credProtect)` - Usable in: Registration (CredentialsContainer.create()) - Processed by: Authenticator - Specification: Credential Protection (credProtect)	76	79	139		76
`create (publicKey option extensions largeBlob)` - Usable in: Registration (CredentialsContainer.create()) and authentication (CredentialsContainer.get()) - Processed by: User agent - Specification: Large blob storage extension (largeBlob)	113	113	139	17		17
`create (publicKey option extensions minPinLength)` - Usable in: Registration (CredentialsContainer.create()) - Processed by: Authenticator - Specification: Minimum PIN Length Extension (minPinLength)	98	98	120		98
`create (publicKey option requireResidentKey)` Experimental	89	89			108
`create (publicKey option residentKey)`	89	89	114		108
`get (publicKey option)` `publicKey` option	67	18	60	13	70	13
`get (publicKey option extensions)` The Web Authentication API has a system of extensions — extra functionality that can be requested during credential creation (CredentialsContainer.create()) or authentication (CredentialsContainer.get()) operations. This article explains how to request WebAuthn extensions, retrieve information about the responses from those requests, and the available…	67	18	60	13	70	13
`get (publicKey option extensions appid)` `appid` extension	67	18	60	13	70	13
`get (publicKey option extensions largeBlob)` `largeBlob` extension	113	113	139		113
`PublicKeyCredential` The PublicKeyCredential interface provides information about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password. It inherits from Credential, and is part of the Web Authentication API extension to the Credential Management API.	67	18	60	13	70	13
`authenticatorAttachment` The authenticatorAttachment read-only property of the PublicKeyCredential interface is a string that indicates the general category of authenticator used during the associated CredentialsContainer.create() or CredentialsContainer.get() call.	98	98	120	15.5	98	15.5
`getClientCapabilities_static` The getClientCapabilities() static method of the PublicKeyCredential interface returns a Promise that resolves with an object that can be used to check whether or not particular WebAuthn client capabilities and extensions are supported.	133	133	135	17.4	133	17.4
`getClientExtensionResults` The getClientExtensionResults() method of the PublicKeyCredential interface returns an object mapping the identifiers of extensions requested during credential creation or authentication, and their results after processing by the user agent.	67	18	60	13	70	13
`isConditionalMediationAvailable_static` The isConditionalMediationAvailable() static method of the PublicKeyCredential interface returns a Promise which resolves to true if conditional mediation is available.	108	108	119	16	108	16
`isUserVerifyingPlatformAuthenticatorAvailable_static` The isUserVerifyingPlatformAuthenticatorAvailable() static method of the PublicKeyCredential interface returns a Promise which resolves to true if a user-verifying platform authenticator is present.	67	18	60	13	70	13
`parseCreationOptionsFromJSON_static` The parseCreationOptionsFromJSON() static method of the PublicKeyCredential interface creates a PublicKeyCredentialCreationOptions object from a JSON representation of its properties.	129	129	119	18.4	129	18.4
`parseRequestOptionsFromJSON_static` The parseRequestOptionsFromJSON() static method of the PublicKeyCredential interface converts a JSON type representation into a PublicKeyCredentialRequestOptions instance.	129	129	119	18.4	129	18.4
`rawId` The rawId read-only property of the PublicKeyCredential interface is an ArrayBuffer object containing the identifier of the credentials.	67	18	60	13	70	13
`response` The response read-only property of the PublicKeyCredential interface is an AuthenticatorResponse object which is sent from the authenticator to the user agent for the creation/fetching of credentials. The information contained in this response will be used by the relying party's server to verify the demand is legitimate.	67	18	60	13	70	13
`toJSON` The toJSON() method of the PublicKeyCredential interface returns a JSON type representation of a PublicKeyCredential.	129	129	119	18.4	129	18.4
Other
`html.elements.iframe.allow.publickey-credentials-create`			123
`html.elements.iframe.allow.publickey-credentials-get`	84	84	118		84
`http.headers.Permissions-Policy.publickey-credentials-create` Experimental The HTTP Permissions-Policy header publickey-credentials-create directive controls whether the current document is allowed to use the Web Authentication API to create new WebAuthn credentials, i.e., via {{domxref("CredentialsContainer.create","navigator.credentials.create({publicKey})")}}.	88	88			88
`http.headers.Permissions-Policy.publickey-credentials-get` Experimental The HTTP Permissions-Policy header publickey-credentials-get directive controls whether the current document is allowed to access the Web Authentication API to retrieve public-key credentials, i.e., via {{domxref("CredentialsContainer.get","navigator.credentials.get({publicKey})")}}.	88	88			88

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: new Uint8Array(32),
    rp: { name: 'Example' },
    user: { id: new Uint8Array(16), name: 'user@example.com', displayName: 'User' },
    pubKeyCredParams: [{ type: 'public-key', alg: -7 }]
  }
});

Use cases

Passwordless sign-in
Let users authenticate with a passkey instead of typing a password on every visit.
Step-up verification
Require a stronger second step for account recovery, admin actions, or sensitive changes.

Cautions

Enrollment, recovery, and device migration flows matter just as much as the credential API itself.
Authentication logic still needs clear server-side validation and careful account-state handling.

Overview

Browser support

Syntax

Use cases

Passwordless sign-in

Step-up verification

Cautions

Accessibility

Related links