How to detect if the browser has support for webauthn

Question

Webauthn is currently only supported in a limited number of devices https://caniuse.com/#search=webauthn.

In JavaScript I want to be able to detect if the users browser has support before offering them an sign-in or join form.

Checking for navigator.credentials seems to work but is it the right way to check for this support?

if(!navigator.credentials) {
  alert('fail');
}

Answer 1

By checking navigator.credentials you're checking that the browser supports Credentials Management API, which is more than just WebAuthn.

Credential Management API so far supports 3 type of credentials, FederatedCredential, PasswordCredential and PublicKeyCredential.

WebAuthn is built on top of the PublicKeyCredential interface. See https://www.w3.org/TR/webauthn/#iface-pkcredential.

So what you need is:

if (typeof PublicKeyCredential === "undefined") {
    alert('fail');
}

That's why when you ask the browser to create a "WebAuthn credential", you need to specify the public key type: navigator.credentials.create({ "publicKey": { ... } }), see https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/create#Parameters.