Introduction to Passwordless: Modern Authentication Patterns for PWAs

Passwords were never designed to scale with the modern web — and Progressive Web Apps inherit all of their weaknesses while adding new constraints of their own.

This series explores how modern PWAs can move beyond passwords using FIDO-powered biometrics (WebAuthn), without falling into the trap of treating passwordless as a silver bullet. Starting from foundational concepts and best practices, it builds toward a real-world implementation I’ve created and improved from a POC that combines passwordless-first authentication with OpenID Connect for fallback and recovery.

The goal is not to explain APIs in isolation, but to show how authentication systems are actually designed, operated, and evolved in practice.

Series structure

Part I — Foundations

Goal: Align readers on what authentication really is before touching APIs.

Article 1 — Authentication is Not Login

• Identity vs authentication vs authorization

• Why passwords became a liability

• Threat models relevant to PWAs (phishing, replay, credential stuffing)

• Why “just add biometrics” is a misunderstanding

Article 2 — What “Passwordless” Actually Means

• Passwordless vs MFA vs passwordless-first

• Knowledge, possession, inherence factors (plain-language explanation)

• Where WebAuthn fits

• Common myths (passwordless = no backend, passwordless = device lock-in)

Part II — Standards & building blocks

Goal: Introduce the standards without drowning readers in specs.

Article 3 — WebAuthn & FIDO2, Explained Without the Spec

• What problems WebAuthn solves

• Public-key credentials, challenges, assertions

• Platform vs roaming authenticators

• User verification vs user presence

• Why WebAuthn is phishing-resistant by design

Article 4 — OpenID Connect as the Glue

• What OIDC actually provides (and what it doesn’t)

• Why PWAs still need federated identity

• Authorization Code + PKCE (conceptual, not tutorial-heavy)

• Using IdPs for bootstrap, recovery, and portability

Part III — Architecture & best practices

Goal: Show how real systems combine these pieces.

Article 5 — Designing a Passwordless-First PWA Architecture

• Decision points: when to attempt WebAuthn vs fallback

• Server responsibilities (credential storage, challenges, counters)

• Session management in PWAs

• Secure token handling (cookies vs storage)

• Why offline PWAs complicate auth more than expected

Article 6 — UX and Failure Are Part of the Security Model

• Retry flows, lockouts, and graceful degradation

• Multi-device reality

• Lost device scenarios

• Why fallback is not a weakness but a requirement

Part IV — My real implementation

Goal: Ground theory in a real, working flow.

Article 7 — A Real Passwordless PWA Flow (Architecture Walkthrough)

• Walk through the full authentication flow I designed

• Explain the decision tree (passwordless enabled vs not)

• Role of the backend vs browser vs authenticator

• Why each branch exists

Article 8 — Implementing WebAuthn in Practice

• Tooling used (e.g. WebAuthn server libs, client helpers)

• Data models (credential ID, public key, counters)

• Common implementation pitfalls

• What surprised me during implementation

Article 9 — Integrating OIDC (Feide) as Fallback and Recovery

• Why Feide was chosen

• How OIDC fits without undermining passwordless

• Security boundaries between IdP and my system

• Account linking considerations

Part V — Reflection & lessons learned

Goal: Help readers avoid future mistakes.

Article 10 — What Worked, What Didn’t, What I’d Change

• Trade-offs I accepted knowingly

• Things that looked good on paper but failed in reality

• Operational lessons (support, monitoring, edge cases)

Optional supplemental articles

• Why Passwordless Alone Is Not an Identity Strategy

  • Explain why fallback (OIDC, IdPs, recovery flows) is a design requirement, not a compromise

  • Connect passwordless to enrollment, recovery, device loss, and federation

  • Show architectural maturity without diving into APIs

• How Browser UX Shapes Security More Than Cryptography

  • How browser and OS UX decisions constrain authentication design

  • Why the same WebAuthn flow feels different in Chrome, Safari, and mobile OSes

  • How retries, error messages, and permission dialogs affect security outcomes

  • Why good UX prevents insecure workarounds more effectively than stronger algorithms

☰ Series Navigation

Core Series

• → Introduction

• Article 1 — Authentication is Not Login

• Article 2 — What “Passwordless” Actually Means

• Article 3 — WebAuthn & FIDO2, Explained Without the Spec

• Article 4 — OpenID Connect as the Glue

• Article 5 — Designing a Passwordless-First PWA Architecture

• Article 6 — UX and Failure Are Part of the Security Model

• Article 7 — A Real Passwordless PWA Flow (Architecture Walkthrough)

• Article 8 — Implementing WebAuthn in Practice

• Article 9 — Integrating OIDC (Feide) as Fallback and Recovery

• Article 10 — What Worked, What Didn’t, What I’d Change

Optional Extras

• Why Passwordless Alone Is Not an Identity Strategy

• How Browser UX Shapes Security More Than Cryptography