Forget your passwords with the Web Authentication API

Passwords are hard. Data breaches frequently expose poor security practices, proving that, as an industry, we're not very good at this. As developers have become more aware of these challenges, we've tried to offload password management to "the big guns", making our lives easier, but what about our users? From confusing or ineffective password complexity restrictions to password fields you can't paste into, it's no wonder so many people find one password and stick with it.

The Web Authentication API (WebAuthn) allows you to build passwordless authentication or two factor authentication into your web applications seamlessly in the browser. Using an asymmetric key pair where the public key is sent to a server, and the private key stored securely on your device, your secrets are never sent over the internet, greatly reducing the risk of phishing attempts.

This talk will provide an introduction to WebAuthn, outlining the benefits, tradeoffs, and future of this new authentication protocol. You will see how to build an experience that puts control over their credentials (literally) back into the hands of your users.

--

Specification
Level 1 – W3C Recommendation https://www.w3.org/TR/webauthn/
Level 2 – Working Draft https://w3c.github.io/webauthn/

Demos
https://webauthn.io/
https://webauthn.me/debugger
https://www.passwordless.dev
https://webauthntest.azurewebsites.net/

Guides
https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
https://webauthn.guide/

Workshops
https://fidoalliance.org/developer-tutorial-getting-started-with-webauthn/
https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0

Libraries
.NET https://github.com/abergs/fido2-net-lib
Node.js https://github.com/apowers313/fido2-lib
Various https://developers.yubico.com/Software_Projects/FIDO2/

More links
https://github.com/herrjemand/awesome-webauthn

Transcript

1. Forget your passwords with the Web Authentication API Ben Lowry @benjaminlowry #webauthn
2. Agenda • What authentication means • The perils of passwords • Intro to WebAuthn • User experience considerations @benjaminlowry #webauthn
3. Authentication is … @benjaminlowry #webauthn
4. Proving your identity Something you know Password Something you have Device Something you are Biometric @benjaminlowry #webauthn
5. @benjaminlowry #webauthn
6. @benjaminlowry #webauthn
7. @benjaminlowry #webauthn
8. @benjaminlowry #webauthn
9. @benjaminlowry #webauthn
10. @benjaminlowry #webauthn
11. Not in those shoes @benjaminlowry #webauthn
12. @benjaminlowry #webauthn
13. Passwords are bad for users @benjaminlowry #webauthn
14. We’re not good at creating passwords 1. 123456 2. password 3. 12345678 4. qwerty 5. 123456789 6. 12345 7. 1234 8. 111111 9. 1234567 10. dragon https://wpengine.com/unmasked/ @benjaminlowry #webauthn
15. password ❌ Password ❌ Password1 ❌ P@ssword1 ✔ @benjaminlowry #webauthn
16. @benjaminlowry #webauthn
17. We’re not good at remembering passwords • 60% of people admit to re-using passwords • Password resets are frustrating for users and expensive for businesses https://www.darkreading.com/informationweek-home/password-reuse-abounds-new-survey-shows/d/d-id/1331689 @benjaminlowry #webauthn
18. Passwords are bad for everyone Data breaches Password re-use Using common passwords Phishing attacks @benjaminlowry #webauthn
19. Think you can trust other people with your secrets? @benjaminlowry #webauthn
20. 81% of all hacking- related breaches use stolen or weak passwords @benjaminlowry #webauthn
21. @benjaminlowry #webauthn
22. Dealing with passwords Social login Offload that risk to the big guns Multi-factor authentication (2FA or MFA) Verify with SMS One-time passcodes @benjaminlowry #webauthn
23. @benjaminlowry #webauthn
24. Dealing with passwords Social login Offload that risk to the big guns Multi-factor authentication (2FA or MFA) Verify with SMS One-time passcodes @benjaminlowry #webauthn
25. Dealing with passwords Social login Offload that risk to the big guns Multi-factor authentication (2FA or MFA) Verify with SMS One-time passcodes @benjaminlowry #webauthn
26. @benjaminlowry #webauthn
27. Dealing with passwords Social login Offload that risk to the big guns Multi-factor authentication (2FA or MFA) Verify with SMS One-time passcodes @benjaminlowry #webauthn
28. What if we didn’t need to store passwords at all? @benjaminlowry #webauthn
29. Web Authentication API (WebAuthn) • Enables passwordless authentication • Simplifies multi-factor authentication • Delegates user verification to their own device ❌ @benjaminlowry #webauthn
30. How do I use it? External authenticator Cross-platform or Roaming Internal authenticator Platform or Bound @benjaminlowry #webauthn
31. @benjaminlowry #webauthn
32. What information is sent around? @benjaminlowry #webauthn
33. What information is sent around? Username Password? @benjaminlowry #webauthn
34. What information is sent around? Challenge User details Relying party details Authenticator requirements @benjaminlowry #webauthn
35. What information is sent around? Challenge User details Relying party details Authenticator requirements @benjaminlowry #webauthn
36. What information is sent around? Authenticator data Signature Credential ID Public key @benjaminlowry #webauthn
37. What information is sent around? Authenticator data Signature Credential ID Public key @benjaminlowry #webauthn
38. What information is sent around? CTAP – Client to Authenticator Protocol WebAuthn FIDO2 @benjaminlowry #webauthn
39. What does the authenticator do? • Verifies identity  Possession, e.g. touch  PIN or biometric • Stores a new credential  Scoped to the website and user  Phishing resistant – “un-phishable” • Generates an asymmetric key pair  Stores private key securely  Sends public key to browser @benjaminlowry #webauthn
40. How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn
41. How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn
42. How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn
43. How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn
44. How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn
45. Can I use it? @benjaminlowry #webauthn
46. Browser support https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API#Browser_compatibility @benjaminlowry #webauthn
47. Globally, it’s available for 67% https://caniuse.com/#feat=webauthn @benjaminlowry #webauthn
48. … but Australia is special @benjaminlowry #webauthn
49. Timeline Firefox logo created by The Mozilla Foundation 2016 2017 2018 2019 @benjaminlowry #webauthn
50. An overview of support External authenticator Internal (on device) Windows macOS Android iOS ❌ ❌ ❌ ❌ @benjaminlowry #webauthn
51. An overview of support External authenticator Internal (on device) Windows macOS Android iOS ❌ ❌ ❌ ❌ @benjaminlowry #webauthn
52. Browser differences https://github.com/apowers313/fido2-webauthn-status @benjaminlowry #webauthn
54. I liked WebAuthn before it was cool! @benjaminlowry #webauthn
55. You can still build it and offer it to users @benjaminlowry #webauthn
56. Getting started // feature detection for WebAuthn window.PublicKeyCredential // detection for platform/on-device authenticator await window.PublicKeyCredential .isUserVerifyingPlatformAuthenticatorAvailable() // registration of authenticator await window.navigator.credentials.create(options) // authenticate with authenticator await window.navigator.credentials.get(options) @benjaminlowry #webauthn
57. What are those options parameters? • Challenge • Relying party details • User details • Allowed authenticators See https://webauthn.guide/ @benjaminlowry #webauthn
58. How do I make login better for users? @benjaminlowry #webauthn
59. Account management flows Registration Login Credential management Account recovery @benjaminlowry #webauthn
60. What information do you need? • Passwordless login or second factor? • Is a password still required? • Is a password still allowed? • Register the token now or later? @benjaminlowry #webauthn
61. How do you get more people using it? • Hints on the login page? • Prompt after logging in with password? • What kind of messages do you want? • How forcefully will you push? @benjaminlowry #webauthn
62. How does it change your login page? • Passwordless? Do you have a different login page entirely or a separate form? • Usernameless? More conditions to meet, but it’s an option • Fall back to using a password? @benjaminlowry #webauthn
63. What about managing devices? • Where do users go to manage them? • How will people identify their authenticators? @benjaminlowry #webauthn
64. What about managing devices? • What details do you want to display? • Do you want to prompt or force removal of inactive devices? @benjaminlowry #webauthn
65. What if I don’t have my device? • If they don’t have a password, how can they log in if they lose their key? • Have you stored their email address to send an account recovery email? • Have you verified that email? @benjaminlowry #webauthn
66. What have other people done? @benjaminlowry #webauthn
67. @benjaminlowry #webauthn
68. @benjaminlowry #webauthn
69. How would I do it? @benjaminlowry #webauthn
70. Recap • The problems with how we do authentication now • How WebAuthn is better for users and for developers • The state of WebAuthn • What should I build today? • What should I think about for tomorrow? @benjaminlowry #webauthn
71. Thank you!
72. Resources • Specification  Level 1 – W3C Recommendation https://www.w3.org/TR/webauthn/  Level 2 – Working Draft https://w3c.github.io/webauthn/ • Demos  https://webauthn.io/  https://webauthn.me/debugger  https://www.passwordless.dev  https://webauthntest.azurewebsites.net/ • Guides  https://developer.mozilla.org/en- US/docs/Web/API/Web_Authentication_API  https://webauthn.guide/ • Workshops  https://fidoalliance.org/developer-tutorial- getting-started-with-webauthn/  https://codelabs.developers.google.com/codelabs/ webauthn-reauth/#0 • Libraries  .NET https://github.com/abergs/fido2-net-lib  Node.js https://github.com/apowers313/fido2-lib  Various https://developers.yubico.com/Software_Projects/ FIDO2/ • More links  https://github.com/herrjemand/awesome- webauthn @benjaminlowry #webauthn