How to implement WebAuthn as MFA in Vaadin?

Flow
1

I want to implement my own solution of MFA using WebAuthn token in Vaadin.
To do this, I have read Marc Englunds article about MFA & WebAuthn API: https://vaadin.com/blog/how-we-enabled-mfa-passkey-and-passwordless-using-the-webauthn-api

Altough he gives a description on how to implement MFA & WebAuthn in Vaadin, some things are unclear to me.

For example:

new Button("Add authenticator", click -> {
           MFA.enroll(user, userRepository, success -> {
               // MFA enabled! Update UI as appropriate.
           });

How is the MFA.enroll() function implemented? This is the important part here.

Or here:

UI.getCurrent().getPage()
               .executeJs("return MFADialog.createCredentials($0,$1,$2,$3,$4,$5)",
rpName, rpId, random, userId, username, displayName)
               .then(success -> { // …verify & store credentials }

I suppose the whole magic happens inside the braces after success ->.
How are the credentials being stored and sent back to the client?

2

Hi @youthful-yaffle , can you share more details what you want to achive

3

?

4

I want to implement a method for enrolling a WebAuthn token.

5

I need to know how credentials are stored and sent back to the server.

6

Marc was not ready to share the code publicly. Because it is security related he wants it to be top notch :nerd_face: But he shared that with me so I can probably explain a bit…

7

The MFADialog JS comes from his wrappers around the browser features. That is also used by the MFA.enroll function. Nothing too special there, but for the demo it indeed hides some essential parts…

8

It uses the paramers to create the public ckey options and then goes to navigator.credentials:

const assertion = await navigator.credentials
.get({
publicKey: publicKeyCredentialRequestOptions,
})

9

Then on the server side, the authentication data is pushed for the webauthn4j library.

10

Data is transmitted as base64 encoded as the Vaadin client-server communication don’t support binary data out of the box.

11

If you end up with a clean example, please, keep us posted.

12

Otherwise I’ll put this on my long list of examples that should be built

13

In my case the authentification on the server side is handled by privacyIDEA software.

14

Can I show you some code of mine and you show it to Marc?

15

Ah, so your problem is not webauthn specific

16

Based on his response today, he don’t have time to look into privacyIDEA specifics in any time soon. But in general, our consultants are expersts on integrating pretty much anything. But they naturally need a :moneybag: to motivate them :grin:

17

For the frontend I use Vaadin/Java to build web application and the token methods. On the backend I use privacyIDEA server for authentificating users.

18

So my problem is to build the client.

19

To be more precisely: I need to know how to store the user credentials and send them back to the Java client.

20

Sounds quickly like that. In case you now want to have a “step-up” or re-authentication to protect some more important task.