How to decide if a device can login with Webauthn's fingerprint in Javascript?

user_2421093 0
Viewed 2761

I created a Webauthn authentication for my website. Now I'm trying to create a good interface for the best user experience. My users are not techies.

I'm interested in the fingerprint authentication as option. The webauthn via Yubico 2 or Google Titan keys is very rare in my users. When the users log in with email and password, I want to show a message like "Do you want to register your fingerprint for your next access? [Register now]".

I would like to show the message to the right users. So, how to decide in which cases show the message?

According to https://caniuse.com/#search=PublicKeyCredential, first of all I can use a test like this:

var support_webauthn = (typeof window['PublicKeyCredential'] !== "undefined")

This test determine if the browser supports the public keys authentication, but also passing the test I don't know if the hardware has a fingerprint sensor.

I know that the Android devices allows the Webauthn fingerprint authentication (instead of iPhone, for example). So, in addition of this I can check if the OS is Android isAndroid = /android/i.test(navigator.userAgent);

But in this case I cannot show the message to the users with another supported device - e.g. with a Macbook pro (with the fingerprint sensor working).

How can I approach the issue?

webauthn feature-detection user-experience authentication javascript
1 Answers

Short answer: WebAuthn will not allow you to perform such operations like probing whether Authenticator has fingerprint sensor or not in advance before credential creations.

But What you can do using PublicKeyCredential that allows you to detect if the user has built-in authenticator such as Windows Hello, TouchID, Android device with a fingerprint sensor (even without a fingerprint sensor, screen lock can provide equivalent user verification functionality) using the PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable. So this function returns a Boolean value and you can check it using JavaScript if users have built-in authenticator, if so processed and you will be able to register a user using the fingerprint sensor or screen lock or else don't prompt the user that's so simple. I personally never looked at the android but in general, this is useful to detect built-in authenticators.

Update as of chrome version 77 you can make use of extensions which is provided by PublicKeyCredentialCreationOptions.extensions object which is an optional and developers can make use of it by specifying during creation credentials extensions object and set UVM boolean to true.

extensions : {
    uvi: true,
    uvm: true
},

After credential creations, the client outputs an array of arrays with 3 values containing information about how the user was verified (e.g. fingerprint, pin, pattern) and other information. But Keep in mind in the advance developer cannot probe if a device has a fingerprint sensor or not. Please have a look at developer.mozilla.org for further explanation.

However, to play around webAuthn using android sample project can be found here:

https://fidoalliance.org/developer-tutorial-webauthn-web-fido2-android/ https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0

user_114470370
Related