Implementing WebAuthn via LiveView

type1fool · June 30, 2022, 2:29pm

It’s not publicly available yet, but I intend to extract it from the app and release a package.

type1fool · August 15, 2022, 1:28am

Update

I will be speaking at ElixirConf 2022 on this topic, and I plan to release a new Hex package, WebAuthnLiveComponent.

The package is a work in progress, and I have most of the Phoenix code in place. Since WebAuthn is a browser API, I have added a JS hook named WebAuthn, which is used by the component’s HTML form.

Call for Help

In order to release this as a package, I need to bundle the JS with the Elixir code. I haven’t found clear instructions for doing this in the Hex or Mix docs. I’ve referenced the source code in phoenix_live_view and react-phoenix, but it’s not clear exactly what I need to do for a LiveComponent with a JS hook.

So, I’m looking for help getting the JS module into the Hex package, assuming this can/should be done. If publishing to NPM isn’t necessary, I’d like to avoid it.

Repo: webauthn_live_component
Related Branch: #6_add_js_hooks (WIP)

al2o3cr · August 15, 2022, 1:56am

Neither of those are directly involved, other than making sure your package.json file winds up in the Hex package along with the desired JS. For instance, here’s the config from phoenix_html:

github.com

phoenixframework/phoenix_html/blob/main/mix.exs#L45


      
                {:ex_doc, ">= 0.0.0", only: :docs}
              ]
            end
          
            defp package do
              [
                maintainers: ["Chris McCord", "José Valim"],
                licenses: ["MIT"],
                files: ~w(lib priv CHANGELOG.md LICENSE mix.exs package.json README.md),
                links: %{
                  Changelog: "https://hexdocs.pm/phoenix_html/changelog.html",
                  GitHub: @source_url
                }
              ]
            end
          end

The other half of the setup is in the generated esbuild config in any Phoenix app:

github.com

phoenixframework/phoenix/blob/f256e80e852d516852b4a8e2c1a94801689721e4/installer/templates/phx_single/config/config.exs#L38


      
          # at the `config/runtime.exs`.
          config :<%= @app_name %>, <%= @app_module %>.Mailer, adapter: Swoosh.Adapters.Local<% end %><%= if @assets do %>
          
          # Configure esbuild (the version is required)
          config :esbuild,
            version: "0.14.41",
            default: [
              args:
                ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
              cd: Path.expand("../assets", __DIR__),
              env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
            ]<% end %>
          
          # Configures Elixir's Logger
          config :logger, :console,
            format: "$time $metadata[$level] $message\n",
            metadata: [:request_id]
          
          # Use Jason for JSON parsing in Phoenix
          config :phoenix, :json_library, Jason

Setting NODE_PATH to ../deps means that any Hex package in deps that also quacks like an Node package (ie, has a package.json) will work. For instance, that’s how you can say import "phoenix_html" in app.js.

type1fool · August 15, 2022, 11:21pm

Thank you, Matt! The phoenix_html example was very helpful. The only other hurdle was that I had been using the component via a local path instead of GitHub or Hex, so the JS wasn’t being pulled in. Now that I’m using the (currently private) Hex package, everything is in its right place .

derpycoder · November 6, 2022, 7:51am

This is awesome.

I was frantically searching for a Fido implementation, because I want to make use of Passkeys after updating my Mac & related devices, but I may not be able to implement it from scratch like you did!!

Perhaps you can add a demo like this:

Thank You.

type1fool · November 6, 2022, 8:29pm

Hey @derpycoder! At ElixirConf, I released an early alpha WebAuthnLiveComponent on Hex. It’s not ready for production, but you can find more details in the forum thread dedicated to the new package. Now that LiveView 0.18 is out, I am planning to update the component, add tests and docs, and get it ready for beta testing before the end of the year.