How to implement WebAuthn as MFA in Vaadin?

Flow
41

I guess it’s there higher on this same thread

42 
window.registerWebAuthn2 = function () {
        const publicKeyCredentialCreationOptions = {
            challenge: new Uint8Array(26),
            rp: {
                name: "Example MFA",
                id: "localhost"
            },
            user: {
                id: new Uint8Array(26),
                name: "jdoe@example.com",
                displayName: "John Doe"
            },
            authenticatorSelection: {
                authenticatorAttachment: "cross-platform",
            },
            pubKeyCredParams: [
                // We would like an elliptic curve to be used if possible
                {
                    type: "public-key",
                    alg: -7
                },
                // If not, then we will fallback on an RSA algorithm
                {
                    type: "public-key",
                    alg: -37
                }
            ],
            timeout: 60000,
            attestation: "direct",
            extensions: {}
        };

        navigator
            .credentials
            .create({ publicKey: publicKeyCredentialCreationOptions })
            .then(function (newCredentialInfo) {
                console.log(newCredentialInfo);
                return newCredentialInfo;
            }).catch(function (err) {
                console.error(err);
            });
        return newCredentialInfo;
    };
43

I don’t see where newCredentialInfo gets defined

44

It is defined in the navigator section.

45

No, that’s a parameter for an inner function. The returned variable isn’t the same (and quite likely it’s undefined at that point)

46

So how would you define it and where?

47

I don’t know enough of the code flow to answer that question. But I can see that’s not going to work unless there’s something else in code that I’m not seeing. You can try returning a dummy String from that function - it should be visible in your Java code.

48

So replace the last return newCredentialInfo; with return 'test'; or something

49

I cannot show you the whole script here because of the limitation. But the Js file can be found on https://github.com/privacyidea/webauthn-client/blob/master/pi-webauthn.js

50

You need to look into how that navigator works, and how you’re expected to get the new credential value out of that.

51

Also you might want to read up on Functions - JavaScript | MDN

52

and Functions - JavaScript | MDN

53

So I need to define a function newCredentialInfo before returning it?

54

If that .create function returns a Promise, then you might want to await for it, see Promise - JavaScript | MDN

55 
public HelloWorldView() {
    add(button);
    button.setText("Testen");
    button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    button.addClickListener(event -> {
      getElement().executeJs("registerWebAuthn2(this)")
      .then(encodedCredential -> {
        if (encodedCredential.getType() == JsonType.OBJECT) {
          JsonObject obj = (JsonObject) encodedCredential;
          String attestationObjectBase64 = obj.get("attestationObject").toString();
          byte[] attestationObject = Base64.getDecoder().decode(attestationObjectBase64);
          String clientDataJSONBase64 = obj.get("clientDataJSON").toString();
          byte[] clientDataJSON = Base64.getDecoder().decode(clientDataJSONBase64);
        }
      });
    });
  }
56

There is something wrong with the line JsonObject obj = (JsonObject) encodedCredential; .

57

Visual Studio Code shows me an error:
image.png

58

Make sure you have imported the correct JsonObject type.
It should be elemental.json.JsonObject

59

Thanks, I guess that was the issue.

60

Sorry for late replaying.