Implementing WebAuthn via LiveView

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. :heart_decoration:

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

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.

6 Likes

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?

1 Like

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.

2 Likes

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

2 Likes

@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. :frowning:

1 Like

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.

1 Like

@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

:face_with_head_bandage:

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. :tada:

%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! :pray:

1 Like

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.

2 Likes

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”:

  1. If data contains a code point that is not one of
4 Likes

I’m keeping my dependencies as minimal as possible. If the double encode/decode solution turns out to be brittle, I will likely use base64-js. The Socket report looks acceptable, and the package is actually maintained by Feross, one of the creators of Socket.dev. :sunglasses: Thanks for the suggestion!

@tangui The Wax demo is using DETS for storage, but I’m using Postgres. Jason fails to encode the cose key for storage due to invalid bytes. Is there a way to encode they key for DB storage?

Error

[error] GenServer #PID<0.695.0> terminating
** (Jason.EncodeError) invalid byte 0x98 in <<152, 56, 87, 90, 219, 182, 209, 197, 234, 133, 243, 172, 126, 118, 138, 103, 80, ..., 166, 6, 236, 39, 106, 29, 54>>

Example Cose Key

%{
  -3 => <<182, 81, 183, 218, 92, 107, 106, 120, 60, 51, 75, 104, 141, 130,
    119, 232, 34, 245, 84, 203, 246, 165, 148, 179, 169, 31, 205, 126, 241,
    188, 241, 176>>,
  -2 => <<89, 29, 193, 225, 4, 234, 101, 162, 32, 6, 15, 14, 130, 179, 223,
    207, 53, 2, 134, 184, 178, 127, 51, 145, 57, 180, 104, 242, 138, 96, 27,
    221>>,
  -1 => 1,
  1 => 2,
  3 => -7
}

Wax Registration doc

@type1fool I’ve also written a webauthn library, and am the creator of the cbor library as well. GitHub - scalpel-software/webauthn: Authenticate users to your web application using public key cryptography by becoming a webauthn relying party (I will be writing more documentation soon)

For saving the cose key you can create a custom ecto type and save it as a binary.

something like

defmodule Ecto.CoseKey do
  use Ecto.Type

  def type, do: :binary

  def cast(value) when is_map(value) do
    try do
      {:ok, CBOR.encode(value)}
    rescue
      Protocol.UndefinedError -> :error
    end
  end

  def cast(_), do: :error

  def load(data) when is_binary(data) do
    case CBOR.decode(data) do
      {:ok, cose_key, ""} -> {:ok, cose_key}
      _other -> :error
    end
  end

  def dump(value), do: {:ok, value}
end

Let me know if you have any additional questions.

2 Likes

You can store it as a string:

key |> term_to_binary() |> Base.encode64()

and back from the DB:

key_from_db |> Base.decode64() |> binary_to_term()

1 Like

Hey @tomciopp ! I saw the webauthn package when I was getting started, but the alpha status and docs made it hard to choose it fwiw. Regardless, I see that cbor is a dependency for Wax, so I owe you and @tangui a drink. :beers:

Thank you for the custom Ecto type suggestion. It works, and it’s idiomatic. Nice! Now I need to use Ecto.Type to clean up some unrelated work. :smiley_cat:

1 Like

On another note, after a bit of refactoring, I removed the double encoding/decoding steps after finding issues with my Uint8Array JS implementation. I still get errors on occasion, but they’re much less frequent. I suspect the JS needs just a little more TLC.

Update

I’ve made significant progress on this over the past weeks. In Chrome (and Safari - see next reply), I can register and login using TouchID or a USB key via WebAuthn. :tada: To share what I’ve been learning, I started live streaming via Twitch.

Today, I encountered an error when I attempted to register in Safari. The attestation statement is coming back with an invalid format. pubKeyCredParams is configured as recommended by webauthn.guide and MDN docs, so I don’t understand why Safari/WebKit is returning a different format. Has anyone else seen this?

Safari: Invalid attStmt

attestation_decoded: {:ok,
 %{
   "attStmt" => %{
     "x5c" => [
       %CBOR.Tag{
         tag: :bytes,
         value: <<48, 130, 2, 66, 48, 130, 1, 201, 160, 3, 2, 1, 2, 2, 6, 1,
           128, 124, 231, 151, 17, 48, 10, 6, 8, 42, 134, 72, 206, 61, 4, 3, 2,
           48, 72, 49, 28, 48, 26, 6, 3, 85, 4, ...>>
       },
       %CBOR.Tag{
         tag: :bytes,
         value: <<48, 130, 2, 52, 48, 130, 1, 186, 160, 3, 2, 1, 2, 2, 16, 86,
           37, 83, 149, 199, 167, 251, 64, 235, 226, 40, 216, 38, 8, 83, 182,
           48, 10, 6, 8, 42, 134, 72, 206, 61, 4, 3, ...>>
       }
     ]
   },
   "authData" => %CBOR.Tag{
     tag: :bytes,
     value: <<73, 150, 13, 229, 136, 14, 140, 104, 116, 52, 23, 15, 100, 118,
       96, 91, 143, 228, 174, 185, 162, 134, 50, 199, 153, 92, 243, 186, 131,
       29, 151, 99, 69, 0, 0, 0, 0, 242, 74, 142, 112, 208, 211, 248, ...>>
   },
   "fmt" => "apple"
 }, ""}

Chrome: Valid attStmt

attestation_decoded: {:ok,
%{
  "attStmt" => %{
    "alg" => -7,
    "sig" => %CBOR.Tag{
      tag: :bytes,
      value: <<48, 69, 2, 32, 47, 29, 113, 135, 145, 72, 34, 17, 253, 171, 217,
        197, 203, 183, 23, 136, 9, 11, 218, 71, 128, 245, 55, 104, 177, 220,
        10, 73, 42, 207, 157, 7, 2, 33, 0, 158, 243, 192, 200, ...>>
    }
  },
  "authData" => %CBOR.Tag{
    tag: :bytes,
    value: <<73, 150, 13, 229, 136, 14, 140, 104, 116, 52, 23, 15, 100, 118,
      96, 91, 143, 228, 174, 185, 162, 134, 50, 199, 153, 92, 243, 186, 131,
      29, 151, 99, 69, 98, 109, 204, 235, 173, 206, 0, 2, 53, 188, 198, ...>>
  },
  "fmt" => "packed"
}, ""}

Public Key Config

const publicKey = {
  challenge: challenge.buffer,
  rp: {
    name: appName,
    id: rp_id,
  },
  user: {
    id: new Uint8Array(16).buffer,
    name: user.email,
    displayName: user.username,
  },
  pubKeyCredParams: [{ alg: -7, type: "public-key" }],
  timeout: 60000,
  attestation: attestation,
  authenticatorSelection: {
    userVerification: user_verification,
  },
};

Ok, I poked around webauthn.io and found that it would only work in Safari if attestation was set to none. Problem solved I suppose, though I’m reading further on implications of this change.

Testing on my iPhone with Safari 15.4, somehow, navigator.credentials doesn’t exist. I’m baffled since webauth.io can register, and I see the call to navigator.credentials.create in the source JS. I do have Web Authentication API & Web Authentication Modern enabled in advanced settings, and it seems to have been supported since v13 (caniuse). This is weird.

Edit: Eureka!
It turns out Safari only allows navigator.credentials on https with no exception for localhost. Running my site over ngrok https, WebAuthn works! :beers:

5 Likes

just found your video on this, thanks for sharing! Is the source code for the module around anywhere?

1 Like