Creating the WebAuthn Components Library for Phoenix LiveView Apps with Owen Bickford

Today on Elixir Wizards, Owen Bickford, fellow Wizard and creator of the WebauthnComponents library, joins us to talk about building passwordless authentication for Phoenix LiveView applications. Owen walks us through the evolution of authentication—touching on everything from plain text passwords to multi-factor setups—and explains the security flaws and user experience issues each method presents. He describes passkeys, a solution based on the WebAuthn API, which improves security and ease of use. The conversation covers cross-device support for passkeys, the role of password managers in keeping credentials synced, and ideas for enhancing WebauthnComponents, like supporting multiple passkeys per account. Owen invites listeners to contribute to the library’s development on GitHub and emphasizes the role passkeys play in improving app security and user experience. Topics discussed in this episode: Passkeys and the shift toward passwordless authentication WebAuthn API and its role in secure login systems Creating the WebauthnComponents library for Phoenix LiveView History of authentication from basic passwords to multi-factor approaches Security gaps and user experience challenges with traditional methods Asymmetric cryptography’s impact on secure logins Hardware-based credential storage and generation with Trusted Platform Modules Structure and components of the WebAuthn library: dependencies, LiveViews, and Ecto schemas Live components for real-time server-browser interactions Passkeys as a primary or secondary authentication method Key business considerations when choosing authentication methods Cross-device support for passkeys and credential syncing Strategies for passkey recovery if devices are lost Ensuring secure access in unattended environments Elixir’s ecosystem advantages for building authentication systems Simplifying JavaScript complexity within Elixir projects Future-proofing WebAuthn Components for seamless updates Using Igniter to enhance customization and refactoring Developer-friendly tools for secure authentication Inviting community contributions on GitHub and the Elixir forum Plans for telemetry and performance tracking Why adopting passkeys is a win for app security and user experience Links mentioned: https://github.com/liveshowy/webauthn_components https://en.wikipedia.org/wiki/Salt_(cryptography) https://en.wikipedia.org/wiki/Rainbow_table https://en.wikipedia.org/wiki/Multi-factor_authentication https://oauth.net/2/ https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API https://www.w3.org/TR/webauthn-3/ https://www.microsoft.com/en-us/windows/tips/windows-hello https://trustedcomputinggroup.org/resource/trusted-platform-module-tpm-summary/ https://hexdocs.pm/phoenix/mix_phx_gen_auth.html https://en.wikipedia.org/wiki/Public-key_cryptography SSH Protocol (Secure Shell) https://en.wikipedia.org/wiki/Secure_Shell https://www.yubico.com/products/yubikey-5-overview/ https://fidoalliance.org/how-fido-works/ https://1password.com/ https://keepassxc.org/ https://hexdocs.pm/ecto_ulid/Ecto.ULID.html https://en.wikipedia.org/wiki/Universally_unique_identifier https://hexdocs.pm/ecto/Ecto.Schema.html https://hexdocs.pm/sourceror/ https://github.com/ash-project/igniter Forum thread: https://elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941