WebAuthn Client Registration: How to access user credentials and send them to server for user authentification?

Integration / Auth Clients
1

I want to implement WebAuthn using Java/Vaadin for the client side.

My goal is to reach that point that any users can register/enroll a WebAuthn in the context of 2FA. The created token should be saved on a privacyIDEA server for later use. It also handles the authentification of the users.

What I have done so far:

  • Creating the web application with Vaadin (Java framework)

  • Implementing methods for the token management in Java

  • Using a JavaScript client plugin from privacyIDEA Github for authentification

The communication between Mozilla Firefox and my Yubikey works fine. The user credentials are being created and can be displayed in the browser console.

This is the output:

PublicKeyCredential { rawId: ArrayBuffer, response: AuthenticatorAttestationResponse, id: "nV8W7CnC2ZZbNtajZ_gTPWrmuzH52rcHChbZ4qPSfg0CjPMI8SpYNZ8-dCO6TyTzOZavLrRtmw6r0N_9Oem-yw", type: "public-key" }
    id: "nV8W7CnC2ZZbNtajZ_gTPWrmuzH52rcHChbZ4qPSfg0CjPMI8SpYNZ8-dCO6TyTzOZavLrRtmw6r0N_9Oem-yw"
    rawId: ArrayBuffer { byteLength: 64 }
    ...
    response: AuthenticatorAttestationResponse { attestationObject: ArrayBuffer, clientDataJSON: ArrayBuffer }
    ...
    type: "public-key"
    <prototype>: PublicKeyCredentialPrototype { getClientExtensionResults: getClientExtensionResults(), rawId: Getter, response: Getter, … }
    ...

I need these credentials to be transferred to privacyIDEA to finish the registration of the WebAuthn token. Before I can do that, the credentials need to be transferred to the Java/Vaadin client.

For this purpose I used the JavaScript client from privacyIDEA Github:

window.registerWebAuthn = function () {
            const publicKeyCredentialCreationOptions = {
                challenge: new Uint8Array(26),
                 rp: {
                    name: "Example",
                    id  : "localhost"
            },
                user: {
                    id: new Uint8Array(26),
                    name: "xyz@test.com",
                    displayName: "Foo Bar"
                }
            };
            
            navigator
                .credentials
                .create({publicKey: publicKeyCredentialCreationOptions})
                .then(function (newCredentialInfo) {
                    console.log(newCredentialInfo);
                    return newCredentialInfo;
              }).catch(function (err) {
                 console.error(err);
              });
   };

The essentiell part for me is coming now. I have tried to return newCredentialInfo in the Java console. For that I used following Vaadin/Java code:

@JsModule("./src/pi-webauthn.js")
public class MFAPageView {

    private Button buttonPrimary0 = new Button();

    public MFAPageView() {

        buttonPrimary0.setText("Create token");

        layoutColumn2.add(buttonPrimary0);
        buttonPrimary0.addClickListener(e -> {
            UI.getCurrent().getPage().executeJs("return registerWebAuthn()")
                    .then(newCredentialInfo -> {
                        System.out.println(newCredentialInfo);
                        System.out.println(new Gson().toJson(newCredentialInfo));
                    });
        });

Running this code will result into an empty string:

elemental.json.impl.JreJsonNull@5f7e6f19
{}

Can you help me to find a solution for this?