Determine passkey supported devices/browsers visiting my website

Question

I am trying to log the support for Webauthn and Passkeys of the devices/browsers visiting my webapp.

I am checking webauthn support this way:

window.PublicKeyCredential?.isUserVerifyingPlatformAuthenticatorAvailable().then((e: boolean)=> e)

and determining Passkey support by verifying support for Conditional UI this way:

  if(typeof window.PublicKeyCredential.isConditionalMediationAvailable === "function") {
    return window.PublicKeyCredential?.isConditionalMediationAvailable().then( (e: boolean) => e )
  }

I believe that, in order to support passkeys, the browser or device has to support webauthn. What is interesting is I do find a small subset of logs where webauthn support for that device is false , however, isConditionalMediationAvailable support has evaluated to true .

This subset of devices seem to be coming in from the following User-Agents:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.61

How is this possible? Is my understanding correct?

Answer 1

isUVPAA represents the local platform authenticator.

isConditionalMediationAvailable represents the browser's autofill capability for passkeys.

This doesn't completely represent whether passkeys can be used, but they're two important features for the passkey experience. So if they both return true, both autofill and the local platform authenticator can be used for passkeys.

There are some cases which this does not cover, such as a lack of local platform authenticator but support for the Cross Device Authentication (CDA) flow (eg using a passkey from a phone or tablet).