Implementing WebAuthn via LiveView

type1fool

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)
    }
  }
}

25 comments

/phoenix #authentication #encoding #webauthn #cbor

8 4902 25

2022-11-06 20:29:31 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

type1fool

I should clarify that I’m not using Wax at the moment since I want to A) keep my dependencies minimal and B) understand WebAuthn by implementing it myself.

Once this is working for registration and login, I would like to open source the work as a LiveComponent for LiveView apps.

Post #1

type1fool

Yesterday I added Wax to create a registration challenge, and I’ve hit a new hurdle. Frequently, the random challenge bytes contain char codes that translate to - and _ when they’re encoded as base64. This happens even if I overwrite the challenge bytes using :crypto.strong_rand_bytes(32).

[error] GenServer #PID<0.5290.0> terminating
** (ArgumentError) non-alphabet digit found: "-" (byte 45)
    (elixir 1.13.3) lib/base.ex:1005: Base.dec64/1
    (elixir 1.13.3) lib/base.ex:1022: Base."-do_decode64/2-lbc$^0/2-0-"/2
    (elixir 1.13.3) lib/base.ex:1015: Base.do_decode64/2
    (elixir 1.13.3) lib/map.ex:830: Map.update!/3
    (my_app 0.1.0) lib/my_app_web/live/user_live/register_webauthn.ex:120: MyAppWeb.UserLive.RegisterWebAuthn.handle_event/3
    (phoenix_live_view 0.17.7) lib/phoenix_live_view/channel.ex:349: anonymous fn/3 in Phoenix.LiveView.Channel.view_handle_event/3
    (telemetry 1.0.0) /Users/owen/projects/my_app_web/deps/telemetry/src/telemetry.erl:293: :telemetry.span/3
    (phoenix_live_view 0.17.7) lib/phoenix_live_view/channel.ex:206: Phoenix.LiveView.Channel.handle_info/2
    (stdlib 3.17) gen_server.erl:695: :gen_server.try_dispatch/4
    (stdlib 3.17) gen_server.erl:771: :gen_server.handle_msg/6
    (stdlib 3.17) proc_lib.erl:226: :proc_lib.init_p_do_apply/3

The hyphen and underscore are listed in the URL and filename safe alphabet section of the Base docs, but not in the preceding alphabet section.

If I use Base.url_encode64/2 & Base.url_decode64/2, I frequently get challenges which cannot be decoded by the browser:

{type: 'webauthn.create', challenge: 'anHfz4KTB0gvIAbdOgggj4kzi1VbtrBJqrRR94GcWCA', origin: 'http://localhost', crossOrigin: false, other_keys_can_be_added_here: 'do not compare clientDataJSON against a template. See https://goo.gl/yabPex'}
3webauthn.js:12 Uncaught (in promise) DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at http://localhost/assets/app.js:5081:49
    at Object.dispatchEvent (http://localhost/assets/app.js:1587:16)
    at LiveSocket2.dispatchEvent (http://localhost/assets/app.js:4775:21)
    at http://localhost/assets/app.js:4778:51
    at Array.forEach (<anonymous>)
    at LiveSocket2.dispatchEvents (http://localhost/assets/app.js:4778:16)
    at View.update (http://localhost/assets/app.js:3618:25)
    at http://localhost/assets/app.js:3816:24
    at View.applyDiff (http://localhost/assets/app.js:3385:9)
    at http://localhost/assets/app.js:3815:38

Is there some way to prevent hyphens and underscores in these challenges?

Post #2

tangui

Have you taken a look at wax_demo?

Encoding with WebAuthn is hard to get it right, but there are some examples of how to decode it in the browser for use in the JS webauthn API.

Post #3

al2o3cr

First off, you must use the url_ varieties of the encoder. In particular, you should be using them with the padding: false option - the spec mandates that padding should always be omitted

Re: the challenges that can’t be decoded by the browser - it’s hard to say what’s happening there. Calling window.atob("anHfz4KTB0gvIAbdOgggj4kzi1VbtrBJqrRR94GcWCA") in my local browser console gives 'jqßÏ\x82\x93\x07H/ \x06Ý:\b \x8F\x893\x8BU[¶°Iª´Q÷\x81\x9CX ' without an error

Post #4

type1fool

@tangui Yes, I’ve been diligently reviewing the docs and example repo. Thank you for Wax and the examples, btw!!!

@al2o3cr Thanks for posting. When I use Base.url_encode64(challenge.bytes, padding: false), I routinely get a hash that can’t be decoded, and it seems to happen only when there are underscores or hyphens.

Eventually, I did get a challenge which could be decoded by the browser, and the touchID prompt appeared. The next request produced a challenge that couldn’t be decoded.

Post #5

Exadra37

You can’t do that, they need to be base64url encoded.

That strings seem to be base64url encoded, because of the -.

On Firefox I can decode your anHfz4KTB0gvIAbdOgggj4kzi1VbtrBJqrRR94GcWCA that will output binary.

The only think I can think of now is that atob on your browser may require the padding to be present, aka = or == at the end of the string, but I may be wrong.

Post #6

type1fool

@Exadra37 As long as there are no hyphens or underscores, the challenge is encoded and decoded without a problem. The challenge intermittently contains char codes 62 (-) & 63 (_), which Chrome & Firefox don’t want to decode.

Padded

Not Padded

Post #7

type1fool

Whoo!!! This was wild!

It crossed my mind that I could double encode and decode the bytes on the server, and voila! It works!

Now, the challenge bytes are decoded successfully and reliably on the client, and the returned bytes match on the server.

%Wax.Challenge{
  acceptable_authenticator_statuses: [:fido_certified, :fido_certified_l1,
   :fido_certified_l1plus, :fido_certified_l2, :fido_certified_l2plus,
   :fido_certified_l3, :fido_certified_l3plus],
  allow_credentials: [],
  android_key_allow_software_enforcement: false,
  attestation: "none",
  bytes: <<70, 86, 81, 62, 234, 109, 239, 140, 123, 63, 220, 144, 15, 203, 189,
    151, 171, 128, 90, 251, 43, 189, 215, 68, 56, 67, 91, 233, 174, 85, 230,
    235>>,
  issued_at: -576459521,
  origin: "http://localhost",
  rp_id: "localhost",
  silent_authentication_enabled: false,
  timeout: 1200,
  token_binding_status: nil,
  trusted_attestation_types: [:none, :basic, :uncertain, :attca, :self],
  type: :attestation,
  user_verification: "preferred",
  verify_trust_root: true
}

# Decoded Client Data
client_data: %{
  "challenge" => <<70, 86, 81, 62, 234, 109, 239, 140, 123, 63, 220, 144, 15,
    203, 189, 151, 171, 128, 90, 251, 43, 189, 215, 68, 56, 67, 91, 233, 174,
    85, 230, 235>>,
  "clientExtensions" => %{},
  "hashAlgorithm" => "SHA-256",
  "origin" => "http://localhost",
  "type" => "webauthn.create"
}

Thanks to everyone who chimed in!

Post #8

derek-zhou

base64 use + and /, url_base64 use _ and -. Elixir supports both. Javascript atob/btoa is the first kind.
Also, if you are handling binary data, it is better to use this npm package base64-js in javascript. It will decode to and encode from a byte array.

Post #9

al2o3cr

I believe window.atob is not the right thing to use for this - the HTML specification describes what it does, and it isn’t “decode URL-safe base64”: