type1fool

type1fool

WebAuthnLiveComponent - Passwordless Auth for LiveView Apps

WebAuthnLiveComponent WebAuthnComponents

See this post about renaming the package.

Passwordless authentication for Phoenix LiveView applications.

Description

I am happy to announce public availability of WebAuthnComponents, an implementation of passwordless authentication designed for LiveView applications.

As Passkey support is rolled out to operating systems, browsers, and credential managers, WebAuthnComponents will allow you to easily add passwordless authentication to greenfield and brownfield applications.

This package is released as part of my talk at ElixirConf 2022. As of September 1, 2022, it is in an early alpha stage, and I am looking for feedback from early adopters. See the readme for caveats and plans for v1.

Updates

Resources

Most Liked

Hermanverschooten

Hermanverschooten

Hi Owen, thanks for the great library.
I just completed adding it to my existing Phoenix application and it works like a charm.
I did a little writeup on my blog to explain the steps I took.

type1fool

type1fool

Update

:tada: Version 0.6.0 has been released :tada:

This release extends the new wac.install Mix Task to generate all the code required to implement Passkeys in a new LiveView application. Also, the TokenComponent has been removed in favor of cookie-based session storage.

The readme and other documentation has been updated, and setup should now be a much more streamlined process. Using wac.install, you no longer need to generate the LiveView or other code to get up and running. See the wac.install docs for available options.

Thanks to @oullette @sax @mward-sudo and everyone who’s provided feedback on this project.

End User Demo

State of Passkeys

Passkey support has been picking up steam, and I’m looking forward to Windows adding support for credential management across devices. Recently, Passkey support graduated out of beta for 1Password, my preferred credential manager. MacOS and Android users can use their platform-specific credential managers as well.

Next Steps

My next planned improvement is to add Telemetry events to the components and remove all calls to Logger, with the goal of improving observability.

I would also like to document the process of implementing WebauthnComponents in existing applications, but this is a daunting task. Providing step-by-step migration from basic auth or 0auth seems feasible, though guides for migrating from phx.gen.auth, Pow, and various packages may put too much burden on maintenance. If you have thoughts or would like to contribute, feel free to ping me here or in an issue.

type1fool

type1fool

Update

:tada: Version 0.7.0 has been released, with one new feature and a bug fix.

  1. Now, WebauthnComponents supports Passkey autofill, which streamlines the authentication process for existing users.
  2. Migrations are now generated in a deterministic order, fixing a bug where the users could be generated after its dependent migrations.

Passkey Autofill

With the introduction of autofill, users will be presented with a Passkey prompt automatically after the authentication component is mounted. Previously, users would need to click the “authenticate” button first, often thinking the email field was also required. With autofill, users have a more seamless authentication experience. :woman_surfing:t4:

If a user has multiple accounts on an application, they will still be prompted to select the desired account.

Order of Migrations

Most of the templates and generators I created can be generated out of order, but migrations are an exception. Because migration files are generated with a timestamp and users must be created first, it’s important to create them in the correct order.

The migrations generator was using a plain Elixir map for its template files. Elixir maps are unordered, so the order of the keys in code are not necessarily the order they will be processed in Enum functions or for comprehensions. This is an oversight that catches me more often than I’d like to admit. :see_no_evil_monkey:

The solution was to convert the template map into a Keyword list, which maintains the order of its keys (fix commit). Now, we can be sure that the users table is created before the user_keys and user_tokens tables which depend on it. :dizzy:

Credits

Shout out to Daniel Pinheiro for introducing the autofill feature and to David Parry for reporting the migrations issue.

type1fool

type1fool

Surprise! The video was uploaded just a couple hours ago. :tada:

10
Post #6
type1fool

type1fool

Wondering if this awesome project still has wings!

:heart_decoration: Thank you @artokun & @scoop! :heart_decoration:

I suppose an update would be appropriate.

By all means, feel free to try out webauthn_components now in a non-production environment. Feedback on documentation, the API, and the demo app would be great! If you have some familiarity with WebAuthn, you could even open an issue or PR if you have ideas for improvements.

Update

The development pause is a result of a few challenges:

  • I had been waiting for Passkey support in 1Password (finally in beta).
  • I hadn’t been working on any projects using Passkeys.
  • There’s not enough time in the day.

Last weekend, I installed the 1Password beta and successfully added Passkeys for a few personal accounts to observe the user flow. It’s nice having Passkeys stored in a cross-platform virtual device, but not a hard requirement for supporting Passkeys in an application.

This weekend, I plan on adding Passkeys to a side project. As part of this process, I will be making improvements to the package as issues surface.

I just spent some time working on the Phoenix app generator (PR 5505), and have a better understanding of Mix.Task and Mix.Generator. This will help with building code generators for the various schemas and migrations. As a result, adoption should be much easier, especially for greenfield apps.

I’ll keep this thread updated as things change.

Btw, welcome to ElixirForum, @artokun! :partying_face:

Where Next?

Popular in Announcing Top

hauleth
PhoenixBakery is library for Phoenix 1.6 (and later) that provides modules implementing Phoenix.Digester.Compressor. There are currently ...
New
simagyari
Hi Everyone, I’d like to share my first open-source package and my first Elixir project, GeoMeasure. It enables one to calculate propert...
New
metehan
exterm_ai runs a real PTY in Elixir and exposes it in the browser using xterm.js. Previously I shared exterm library without AI this one ...
#ai
New
hauleth
It is library created by me and @abc3. It is simple client for DuckDB, but with small twist when compared with other libraries out there ...
New
webofbits
Helix is a visual workflow designer for AI agents and multi-agent systems, built with Phoenix and React Flow. It provides an intuitive dr...
#ai
New
corka149
A JSON patch is a way to define a sequence of manipulating operations on a JavaScript object. The IETF published the RFC 6902 - found he...
New
tmbb
Playfair (named after: William Playfair) is a data visualization/plotting library with the goal of being able to produce publication-qual...
New
rkallos
Peep is a new TelemetryMetrics reporter that supports both StatsD (and Dogstatsd) and Prometheus. While load testing a new Websocket-bas...
New
waseigo
I saw this LinkedIn post: *Can your programming language do this? This is a macro in Clojure called `dotrace`. When you surround a pie...
New
trisolaran
Hi! :waving_hand: I would like to present LiveSelect, a little library that I wrote to easily add a dynamic selection input to your LV f...
194 10054 106
New

Other popular topics Top

yurko
Here are few pieces of (common) Linux knowledge that we use for reasonably small one server apps. We use Ubuntu but this should work for ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
sacepums
Hey guys. I'm new to elixir and im really stocked about it. But I ran into a bit of problem - I need to convert a date sting, for examp...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lis...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 42633 214
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New

We're in Beta

About us Mission Statement