Tweet
Tweet

Slide 1

Slide 1 text

Forget your passwords with the Web Authentication API Ben Lowry @benjaminlowry #webauthn

Slide 2

Slide 2 text

Agenda • What authentication means • The perils of passwords • Intro to WebAuthn • User experience considerations @benjaminlowry #webauthn

Slide 3

Slide 3 text

Authentication is … @benjaminlowry #webauthn

Slide 4

Slide 4 text

Proving your identity Something you know Password Something you have Device Something you are Biometric @benjaminlowry #webauthn

Slide 5

Slide 5 text

@benjaminlowry #webauthn

Slide 6

Slide 6 text

@benjaminlowry #webauthn

Slide 7

Slide 7 text

@benjaminlowry #webauthn

Slide 8

Slide 8 text

@benjaminlowry #webauthn

Slide 9

Slide 9 text

@benjaminlowry #webauthn

Slide 10

Slide 10 text

@benjaminlowry #webauthn

Slide 11

Slide 11 text

Not in those shoes @benjaminlowry #webauthn

Slide 12

Slide 12 text

@benjaminlowry #webauthn

Slide 13

Slide 13 text

Passwords are bad for users @benjaminlowry #webauthn

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

password ❌ Password ❌ Password1 ❌ P@ssword1 ✔ @benjaminlowry #webauthn

Slide 16

Slide 16 text

@benjaminlowry #webauthn

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Passwords are bad for everyone Data breaches Password re-use Using common passwords Phishing attacks @benjaminlowry #webauthn

Slide 19

Slide 19 text

Think you can trust other people with your secrets? @benjaminlowry #webauthn

Slide 20

Slide 20 text

81% of all hacking- related breaches use stolen or weak passwords @benjaminlowry #webauthn

Slide 21

Slide 21 text

@benjaminlowry #webauthn

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@benjaminlowry #webauthn

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@benjaminlowry #webauthn

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

What if we didn’t need to store passwords at all? @benjaminlowry #webauthn

Slide 29

Slide 29 text

Web Authentication API (WebAuthn) • Enables passwordless authentication • Simplifies multi-factor authentication • Delegates user verification to their own device ❌ @benjaminlowry #webauthn

Slide 30

Slide 30 text

How do I use it? External authenticator Cross-platform or Roaming Internal authenticator Platform or Bound @benjaminlowry #webauthn

Slide 31

Slide 31 text

@benjaminlowry #webauthn

Slide 32

Slide 32 text

What information is sent around? @benjaminlowry #webauthn

Slide 33

Slide 33 text

What information is sent around? Username Password? @benjaminlowry #webauthn

Slide 34

Slide 34 text

What information is sent around? Challenge User details Relying party details Authenticator requirements @benjaminlowry #webauthn

Slide 35

Slide 35 text

What information is sent around? Challenge User details Relying party details Authenticator requirements @benjaminlowry #webauthn

Slide 36

Slide 36 text

What information is sent around? Authenticator data Signature Credential ID Public key @benjaminlowry #webauthn

Slide 37

Slide 37 text

What information is sent around? Authenticator data Signature Credential ID Public key @benjaminlowry #webauthn

Slide 38

Slide 38 text

What information is sent around? CTAP – Client to Authenticator Protocol WebAuthn FIDO2 @benjaminlowry #webauthn

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn

Slide 41

Slide 41 text

How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn

Slide 42

Slide 42 text

How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn

Slide 43

Slide 43 text

How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn

Slide 44

Slide 44 text

How does a public key help secure my identity? Public key Private key @benjaminlowry #webauthn

Slide 45

Slide 45 text

Can I use it? @benjaminlowry #webauthn

Slide 46

Slide 46 text

Browser support https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API#Browser_compatibility @benjaminlowry #webauthn

Slide 47

Slide 47 text

Globally, it’s available for 67% https://caniuse.com/#feat=webauthn @benjaminlowry #webauthn

Slide 48

Slide 48 text

… but Australia is special @benjaminlowry #webauthn

Slide 49

Slide 49 text

Timeline Firefox logo created by The Mozilla Foundation 2016 2017 2018 2019 @benjaminlowry #webauthn

Slide 50

Slide 50 text

An overview of support External authenticator Internal (on device) Windows macOS Android iOS ❌ ❌ ❌ ❌ @benjaminlowry #webauthn

Slide 51

Slide 51 text

An overview of support External authenticator Internal (on device) Windows macOS Android iOS ❌ ❌ ❌ ❌ @benjaminlowry #webauthn

Slide 52

Slide 52 text

Browser differences https://github.com/apowers313/fido2-webauthn-status @benjaminlowry #webauthn

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

I liked WebAuthn before it was cool! @benjaminlowry #webauthn

Slide 55

Slide 55 text

You can still build it and offer it to users @benjaminlowry #webauthn

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

What are those options parameters? • Challenge • Relying party details • User details • Allowed authenticators See https://webauthn.guide/ @benjaminlowry #webauthn

Slide 58

Slide 58 text

How do I make login better for users? @benjaminlowry #webauthn

Slide 59

Slide 59 text

Account management flows Registration Login Credential management Account recovery @benjaminlowry #webauthn

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

What about managing devices? • Where do users go to manage them? • How will people identify their authenticators? @benjaminlowry #webauthn

Slide 64

Slide 64 text

What about managing devices? • What details do you want to display? • Do you want to prompt or force removal of inactive devices? @benjaminlowry #webauthn

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

What have other people done? @benjaminlowry #webauthn

Slide 67

Slide 67 text

@benjaminlowry #webauthn

Slide 68

Slide 68 text

@benjaminlowry #webauthn

Slide 69

Slide 69 text

How would I do it? @benjaminlowry #webauthn

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Thank you!

Slide 72

Slide 72 text

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