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

First Post! Switch mode

andreaseriksson

andreaseriksson

The presentation was great. Cant wait to test this out

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 OP

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 OP

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.

Last Post!

type1fool

type1fool OP

I would be happy to co-maintain the WebAuthn components lib. I’m actively using it and was even working on a PR tonight. I don’t think I have the time to be a sole maintainer.

:smiling_face_with_sunglasses:

Peaceful James strikes again! This is great to hear. Thank you for your contributions and for offering your support. I will look over the PR when I have some time, hopefully this week.

:victory_hand:

Also, shout out to @Terbium-135 for a very neglected PR to add cross-platform authenticator support. I will take another look when I have a moment to focus on the repo.

Where Next?

Trending in Announcing Top

bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
387 14960 120
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
shahryarjb
The Chelekom project is a library of Phoenix and LiveView components generated via Mix tasks to fit developer needs seamlessly. One of i...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New

Other Trending Topics Top

type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New
juhalehtonen
There has been a thread to discuss the Stack Overflow Developer Survey on this forum every year since 2018, so here’s yet another one for...
New
bjorng
We want to introduce a new native datatype to Erlang: native records. Although replacing all tuple records with native records is not our...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
alexslade
Fly’s CEO posted this recently - Turn And Face The Strange · The Fly Blog It says that Fly is going all-in on sprites, which is a worry ...
New

We're in Beta

About us Mission Statement