Passwordless in Production: Implementing FIDO Passkeys for Frontend

In this session, I'll share our end-to-end journey implementing FIDO passkeys in our frontend, replacing traditional password authentication with a more secure, frictionless solution. I'll dive into our technical architecture, frontend integration challenges, cross-platform considerations, and critical UX decisions that balanced security with user experience. You'll discover how we tackled browser compatibility issues, optimized performance, and overcame unexpected hurdles during our production rollout. Drawing from our real-world implementation serving millions of users, this talk provides actionable insights for developers considering or currently implementing passwordless authentication, complete with code examples, lessons learned, and tangible results that demonstrate the impact of our transition to passkeys.

Transcript

1. Manish Kumar Nov 16th, 2025 Passwordless in Production Implementing FIDO Passkeys in Frontend JS Conf Japan
2. JS Conf Japan 2025 Nov 16th, 2025 User’s Device FIDO Server I want to create a new Account Give me the Public Key Creates a Key Pair with Hardware Security Here is the Public Key Generate and store New Key Pair specific to RP Store the Public Key in Database Before we start I have a Question
3. Nov 16th, 2025 Have your users ever ~ Used a password more than twice? ~ Got their password stolen? ~ Got Phished? ~ Forgot their password only to reset it again and again? JS Conf Japan 2025
4. JS Conf Japan 2025 Nov 16th, 2025 User’s Device FIDO Server I want to create a new Account Give me the Public Key Creates a Key Pair with Hardware Security Here is the Public Key Generate and store New Key Pair specific to RP Store the Public Key in Database If you said yes to any one of these questions, WebAuthn and Passkeys are for you!
5. Why Passkeys? How does it work? Registration / Authentication Passkey Adoption: What worked for us Passkey Adoption: Technical Considerations Primary agenda JS Conf JP 2025 Nov 16th, 2025 01 02 03 04
6. JS Conf Japan 2025 Nov 16th, 2025 About Me From India, in Japan since 1 year and 1 Month First time presenting in Public Platform / Web Engineer by profession Photography and gaming as part time hobby — Manish Kumar Platform Engineer @Mercari Japan manishprivet | https://manishk.dev
7. WebAuthn Standard Solution WebAuthn is a set of technologies that enable passwordless authentication between servers, browsers, and authenticators. It is - 💪 Strong 󰡷 Scoped 🎫 Attested Nov 16th, 2025 JS Conf Japan 2025 http://webauthn.guide/#about-webauthn
8. Nov 16th, 2025 Why Passkeys? JS Conf Japan 2025 • Most widely adopted implementation of WebAuthn standard
9. Nov 16th, 2025 Why Passkeys? JS Conf Japan 2025 • Can replace passwords and MFA altogether in most cases
10. Nov 16th, 2025 Why Passkeys? JS Conf Japan 2025 • Phishing Resistant ◦ Bound to your device ◦ Enables biometric authentication
11. Nov 16th, 2025 Why Passkeys? JS Conf Japan 2025 • Widely and natively integrated ◦ Supported in all Modern Browsers ◦ Mac OS Ventura+ and iOS 16+ with iCloud Keychain ◦ Android 12+ with Google Password Manager ◦ Windows 10 22H2+ via Windows Hello https://developer.apple.com/news/?id=mgdnfp8w https://developers.google.com/identity/passkeys/supported-environments https://learn.microsoft.com/en-us/windows/security/identity-protection/passkeys
12. Nov 16th, 2025 JS Conf Japan 2025 How does it work -
13. JS Conf Japan 2025 Nov 16th, 2025 User’s Device How does it work - …? Auth Server I want to create a new Account Give me the Public Key Creates a Key Pair with Hardware Security Here is the Public Key Generate and store New Key Pair specific to RP Store the Public Key in Database https://fidoalliance.org/specifications
14. Nov 16th, 2025 JS Conf Japan 2025 How does it work - Registration?
15. JS Conf Japan 2025 Nov 16th, 2025 User’s Device How does it work - Registration? Auth Server I want to create a new Account Give me the Public Key Creates a Key Pair with Hardware Security Here is the Public Key Generate and store New Key Pair specific to RP Store the Public Key in Database https://fidoalliance.org/specifications
16. JS Conf Japan 2025 Nov 16th, 2025 Webauthn API - Registration? https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
17. Nov 16th, 2025 JS Conf Japan 2025 How does it work - Authentication?
18. JS Conf Japan 2025 Nov 16th, 2025 User’s Device How does it work - Authentication? Auth Server Initiate Authentication Authentication Request + Challenge Signs the response with Private Key Here is the signed response Key Pair stored in Keychain Public Key in Database Validates the response using Public Key Access Tokens / 401 Not Authorized https://fidoalliance.org/specifications
19. JS Conf Japan 2025 Nov 16th, 2025 Webauthn API - Authentication? https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
20. Nov 16th, 2025 Passkey Adoption among Mercari Users JS Conf Japan 2025 Mar. 2023 Jun. Sept. Dec. Mar. 2024 Jun. Sept. Dec. Mar. 2025 0.1M 0.8M 1.5M 2.2M 3.5M 4.4M 6.0M 7.5M 9.4M Jun. 10.4M https://careers.mercari.com/en/mercan/articles/52225/
21. What worked for us… Nov 16th, 2025 JS Conf Japan 2025
22. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • Conditional UI by default ◦ Prompts Passkey sign in if the device has a Passkey registered ◦ A “Sign in with passkey” button as fallback UI / UX Considerations http://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/get#mediation
23. Nov 16th, 2025 Conditional UI JS Conf Japan 2025 http://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/get#mediation
24. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • Passkey Enforcement ◦ enforce passkey-only sign-in for accounts with registered passkeys UI / UX Considerations
25. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • Passkey registration prompt after Sign In ◦ 1-tap non blocking CTA ◦ Bonus: Conditional Create can now be used to do the same thing natively UI / UX Considerations https://developer.chrome.com/docs/identity/webauthn-conditional-create
26. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • Stored securely in a credential manager • Accessed across devices https://www.passkeycentral.org/introduction-to-passkeys/passkey-types Synced Passkeys / Multi Device Credentials
27. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • No need to re-enroll devices • Generally available in modern iOS and Android OS(s) natively https://www.passkeycentral.org/introduction-to-passkeys/passkey-types Synced Passkeys / Multi Device Credentials
28. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 Synced Passkey support as of November 2025 https://www.passkeycentral.org/introduction-to-passkeys/passkey-types Synced Passkeys / Multi Device Credentials
29. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • Multiple Credentials per account • Fallback Options ◦ SMS OTP ◦ Email Link Sign In Fallback / Recovery Options
30. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • Account Recovery Choices ◦ Via verified email ◦ My Number Card Fallback / Recovery Options
31. Nov 16th, 2025 What worked for us … JS Conf Japan 2025 • Phased Rollouts • Clear Communication to Users • Being up to date with behaviour among new OS Versions Progressive Release & User Adaptation Strategy
32. Technical Considerations Nov 16th, 2025 JS Conf Japan 2025
33. Nov 16th, 2025 Technical Considerations JS Conf Japan 2025 • Cross platform / browser issues ◦ For apple devices, Conditional mediation supported only in Safari 17+ ▪ Can be detected by isConditionalMediationAvailable() ◦ Incognito tabs suppress passkey prompts https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/isConditionalMediationAvailable_static
34. Nov 16th, 2025 Technical Considerations JS Conf Japan 2025 • RP (Relying Party) ID Choice ◦ Pick a shared parent domain ◦ Pick and pin it early!
35. Nov 16th, 2025 Technical Considerations JS Conf Japan 2025 • Options caching ◦ Cache options before “sign in with passkey” button click ◦ Needed for browsers with strict transient activation duration
36. Nov 16th, 2025 Technical Considerations JS Conf Japan 2025 • Options caching ◦ Cache options on the page load ◦ Needed for browsers with strict transient activation duration
37. Nov 16th, 2025 Technical Considerations JS Conf Japan 2025 • Limiting Credential Registration ◦ Use excludeCredentials ▪ prevents duplicate passkeys https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API/WebAuthn_extensions#appidexclude
38. Nov 16th, 2025 What we talked about today … JS Conf Japan 2025 • Passkey Adoption • API Implementation and Flow • Scale and Operational Best Practices • Technical Nuances
39. Passkeys aren’t just a feature — they’re the next phase of secure, user-friendly authentication Thank you for listening Questions? Contact @manishprivet