I am implementing passwordless authentication in an application, communicating the WebAuthn API via LiveView JS hooks. Over the past few days I have cleared a few hurdles as I’ve learned about the API from webauthn.guide.

The JS hook is properly sending back the attestation and client data to the LiveView. I can decode the client data and compare the challenge and origin. I can also decode the CBOR attestation, but this is where I get stuck. It’s not clear what to do with attestation_a and attestation_b.

The WebAuthn guide shows authData, ftm, and attStmt keys once the CBOR is decoded. I looked into decoding on the client, but that seemed to be a bad idea. The docs for Wax and CBOR have been helpful up to this point, and I’ve even dug into source code a bit. However, I’m not sure if the CBOR is being decoded correctly or what I need to do next to get authData and other attestation data.

If you have suggestions or examples, I would appreciate it.

Decoded Attestation

attestation_a: %{0 => <<3, 0, 116, 4, 0, 100, _REDACTED_>>, <<1, 0, 102>> => 2}
attestation_b: <<0, 110, 8, 0, 101, 9, 0, 103, _REDACTED_, 18, 0, 104, 19, 0, 97, 20, 0,
  117, 21, 0, 116, 22, 0, 104, 23, 0, 68, ...>>

LiveView Credentials Event Handler

def handle_event(
      "credentials",
      %{"attestation" => attestation, "clientData" => client_data, "type" => _type},
      %{assigns: %{challenge: server_challenge}} = socket
    ) do
  %{"challenge" => client_challenge, "origin" => client_origin} =
    client_data
    |> List.to_string()
    |> Jason.decode!()
    |> Map.update!("challenge", &Base.decode64!(&1, padding: false))

  # TODO: DECODE ATTESTATION
  {:ok, attestation_a, attestation_b} =
    attestation
    |> Base.decode64!()
    |> CBOR.decode()

  IO.inspect(attestation_a, label: "attestation_a")
  IO.inspect(attestation_b, label: "attestation_b")

  with true <- client_challenge == server_challenge,
        true <- client_origin == LiveShowyWeb.Endpoint.url() do
    # TODO: STORE PUB KEY AFTER VALIDATION PASSES
    # TODO: REDIRECT TO REFERRER OR HOME AFTER STORING PUB KEY
    {:noreply, put_flash(socket, :info, "Registration was successful")}
  else
    _ ->
      {:noreply, put_flash(socket, :error, "Registration failed")}
  end
end

HandleWebAuthn Hook

const HandleWebAuthn = {
  mounted() {
    console.info(`HandleWebAuthn mounted`)

    if (navigator.credentials) {
      console.info(`WebAuthn is supported by this browser.`)
      this.pushEvent("webauthn-supported", true)

      window.addEventListener("phx:challenge", async (data) => {
        const { appName, challenge, user } = data.detail
        const publicKey = {
          challenge: Uint8Array.from(challenge, c => c.charCodeAt(0)),
          rp: {
            name: appName,
            id: document.location.host,
          },
          user: {
            id: Uint8Array.from(user.id, c => c.charCodeAt(0)),
            name: user.email,
            displayName: user.username
          },
          pubKeyCredParams: [{ alg: -7, type: "public-key" }],
          timeout: 60000,
          attestation: "none",
          authenticatorSelection: {
            authenticatorAttachment: "platform",
            userVerification: "discouraged",
          },
        }

        const { response, type } = await navigator.credentials.create({ publicKey })
        const { attestationObject, clientDataJSON } = response
        const clientData = Array.from(new Uint8Array(clientDataJSON))

        const attestation = Array.from(new Uint8Array(attestationObject))
          .map(String.fromCharCode).join("")

        this.pushEvent("credentials", {attestation: btoa(attestation), clientData, type})
      })

    } else {
      console.error(`WebAuthn is not supported by this browser.`)
      this.pushEvent("webauthn-supported", false)
    }
  }
}