Simpler WebAuthn feature detection

WebAuthn provides interaction with Bluetooth, communication with passkey providers, and autofill support.

W

web.devweb.dev

·

Browsers diverge on WebAuthn support — here is how to check

WebAuthn’s most interesting flows — hybrid cross-device sign-in over Bluetooth, passkey creation without a modal, or autofill-based authentication — depend heavily on what the client and authenticator actually support. Since that support varies between browsers and devices, relying parties can end up with flows that simply fail for some users. Knowing a client’s capabilities upfront lets you build authentication paths that degrade gracefully instead of throwing errors.

The PublicKeyCredential.getClientCapabilities() method addresses exactly that. It returns a promise that resolves to an object listing which WebAuthn features the browser supports, with each capability set to true or false. If a property is undefined, the browser’s support for that capability is unknown.

if (window.PublicKeyCredential && PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalGet === true &&
      capabilities.passkeyPlatformAuthenticator === true) {
    // The browser supports passkeys and the conditional mediation.
  }
}

Reading the capability flags

The resolved object covers both authentication features and extension support. Each flag maps to a distinct browser behavior you can branch on.

conditionalCreate

Set when the browser can create a credential without a prominent modal UI, provided the user has already given consent.

conditionalGet

Set when the browser can surface passkeys inside the autofill dialog instead of a modal. This replaces the older PublicKeyCredential.isConditionalMediationAvailable() check.

hybridTransport

Set when the device supports Bluetooth, allowing the browser to create or use credentials cross-device via the hybrid protocol. In practice this means the browser can render a QR code the user scans with a phone holding the credential.

passkeyPlatformAuthenticator

Set when the browser can work with a user-verifying platform authenticator or a supporting device via hybrid. This is shorthand for hybridTransport || userVerifyingPlatformAuthenticator.

relatedOrigins

Set when the browser can create and use credentials whose RP ID doesn’t match the current origin, as long as the origin is listed in the related origins file.

signalAllAcceptedCredentials

Set when the browser can notify the passkey provider about which credentials the server accepts, keeping the provider’s passkey list in sync with the server state.

signalCurrentUserDetails

Set when the browser can forward updated username and display name data from the server to the passkey provider.

signalUnknownCredential

Set when the browser can tell the passkey provider that a credential no longer exists on the server.

userVerifyingPlatformAuthenticator

Set when the browser can create and authenticate with a credential on a platform authenticator. Note this does not imply hybrid support. This replaces PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().

Extensions are reported too

The same call reports which WebAuthn extensions the browser understands. Extension keys are prefixed with extension:, followed by the extension name:

if (capabilities['extension:appid'] === true) {
  // appId extension is supported
}

Extension names are the WebAuthn Extension Identifiers registered at IANA. With both capability flags and extension support in one call, you can centralize feature detection instead of maintaining multiple one-off checks.