files/en-us/web/api/publickeycredential/getclientcapabilities_static/index.md
{{APIRef("Web Authentication API")}}{{securecontext_header}}
The getClientCapabilities() static method of the {{domxref("PublicKeyCredential")}} interface returns a {{jsxref("Promise")}} that resolves with an object that can be used to check whether or not particular WebAuthn client capabilities and extensions are supported.
A relying party (RP) can use this information to appropriately customize its sign-in and sign-up user interfaces and workflows.
PublicKeyCredential.getClientCapabilities()
None.
A {{jsxref("Promise")}} that resolves to an object where the property names are the client capability strings, and the values are boolean values that indicate whether or not the corresponding capability or extension is supported.
The WebAuthn client capability strings are:
"conditionalCreate"
"conditionalGet"
isConditionalMediationAvailable() resolving to true."hybridTransport"
"passkeyPlatformAuthenticator"
userVerifyingPlatformAuthenticator
relatedOrigins
signalAllAcceptedCredentials
PublicKeyCredential.signalAllAcceptedCredentials() static method.
If not supported, RP workflows will need to prompt the user to manually delete credentials on the authenticator.signalCurrentUserDetails
PublicKeyCredential.signalCurrentUserDetails() static method.
If not supported, RP workflows will need to prompt the user to manually update user details on the authenticator.signalUnknownCredential
PublicKeyCredential.signalUnknownCredential() static method.
If not supported, RP workflows will need to prompt the user to manually delete credentials from the authenticator.The web extension strings are formatted by prefixing the extension identifier with the prefix extension:.
For example, the key extension:appid can be used to check if the appid extension is supported.
The returned {{jsxref("Promise")}} may be rejected with the following values:
SecurityError {{domxref("DOMException")}}
getClientCapabilities() allows you to check if a given capability or extension is supported, and use the information to offer an appropriate user experience.
For example, support for the userVerifyingPlatformAuthenticator capability indicates that biometrics such as a fingerprint sensor are allowed.
A web application could use this to display a fingerprint icon if the capability is supported, or a password input if it is not.
If biometric login is required, then it could instead provide notification that the site cannot authenticate using this browser or device.
Similarly, conditionalGet indicates that the client supports conditional mediation when signing in a user, which means the browser can provide auto-filled discoverable credentials in a login form (for example an autocompleting text field or a drop-down list), along with a sign-in button.
If the value of a given capability is present in the returned object, then true indicates that the capability is currently supported, and false indicates that it is not.
However, if a key is not present for a particular capability, no assumptions can be made about the availability of the associated feature.
For an extension the assumptions are the same. Note though, that even if the extension is supported by the client a particular authenticator may not support that extension, so RPs must not assume that this is a guarantee that the authenticator processing steps for that extension will be performed. If the key is not present for an extension, an RP can't assume that the client processing steps for that extension will be carried out by this client, or that the extension will be forwarded to the authenticator.
This example shows how to get the capabilities object and iterate its values.
<pre id="log"></pre>
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
#log {
height: 230px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
First we await getClientCapabilities() to get an object containing the capabilities.
We then iterate the object and log the result (logging code not shown):
async function checkClientCapabilities() {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities) {
log("Client Capabilities:");
for (const [key, value] of Object.entries(capabilities)) {
log(` ${key}: ${value}`);
}
}
}
Before calling the function we check that it is defined, and log the result.
// Call the function to check capabilities.
if (PublicKeyCredential.getClientCapabilities) {
checkClientCapabilities();
} else {
log(
"PublicKeyCredential.getClientCapabilities() is not supported on this browser.",
);
}
{{EmbedLiveSample("Check all capabilities", "", "280")}}
This example checks a single capability, userVerifyingPlatformAuthenticator. A real application might use the result to configure the user interface.
<pre id="log"></pre>
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
#log {
height: 40px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
The code is similar to the previous example, except that we check a particular returned capability, and we use try...catch to catch the case where getClientCapabilities() is not supported.
checkIsUserVerifyingPlatformAuthenticatorAvailable();
async function checkIsUserVerifyingPlatformAuthenticatorAvailable() {
try {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.userVerifyingPlatformAuthenticator) {
log("Biometric login supported");
} else {
log("Biometric login not supported. Do password.");
}
} catch (error) {
if (error instanceof TypeError) {
log(
"PublicKeyCredential.getClientCapabilities() is not supported on this browser.",
);
} else {
log(`Unexpected error: ${error}`);
}
}
}
Note that here we log the result of a check. In a real application we might update the user interface to show appropriate options for verifying the user.
The log below displays either a string indicating the method is not supported, or one that indicates whether biometric or password login is supported.
{{EmbedLiveSample("Test for user verifying platform authenticator", "", "90")}}
{{Specifications}}
{{Compat}}