1 of 78

No passwords, no problem

Move beyond passwords with WebAuthn and passkeys

1

@carlastabile

Carla Urrea Stabile

2 of 78

🪑💳

2

@carlastabile

Carla Urrea Stabile

3 of 78

🪑💳

😰

3

@carlastabile

Carla Urrea Stabile

4 of 78

passwords suck

4

@carlastabile

Carla Urrea Stabile

5 of 78

passwords suck

🧠

5

@carlastabile

Carla Urrea Stabile

6 of 78

passwords suck

🧠 🥷

6

@carlastabile

Carla Urrea Stabile

7 of 78

hello, i’m carla! 👋

Sr. Developer Advocate @ Auth0 by Okta

Software Engineer ~10 years

Sometimes I make Youtube videos

7

find me as @CarlaStabile almost everywhere

@carlastabile

Carla Urrea Stabile

8 of 78

disclaimer: I might simplify certain things to try to explain them in an easier way.

8

@carlastabile

Carla Urrea Stabile

9 of 78

whenever you see a QR code, feel free to scan it because your girl is full of resources.✨

9

@carlastabile

Carla Urrea Stabile

10 of 78

✅ share my dislike for passwords

10

@carlastabile

Carla Urrea Stabile

11 of 78

✅ share my dislike for passwords

# TODO: talk about alternatives

# TODO: webauthn

# TODO: passkeys

11

@carlastabile

Carla Urrea Stabile

12 of 78

passwords

🤔

12

@carlastabile

Carla Urrea Stabile

13 of 78

passwordless

😀

13

@carlastabile

Carla Urrea Stabile

14 of 78

Passwordless authentication is any form of authentication that doesn’t require the user to provide a password at login.”

Yubico Glossary

14

@carlastabile

Carla Urrea Stabile

15 of 78

why is passworless better…

improves user experience

15

@carlastabile

Carla Urrea Stabile

16 of 78

why is passworless better…

improves user experience

📧📱

16

@carlastabile

Carla Urrea Stabile

17 of 78

why is passworless better…

more secure

🔐

17

@carlastabile

Carla Urrea Stabile

18 of 78

why is passworless better…

reduces cost of ownership

(both in time 💸 and emotionally 😰)

18

@carlastabile

Carla Urrea Stabile

19 of 78

how does passwordless work?

🤔

19

@carlastabile

Carla Urrea Stabile

20 of 78

knowledge – something you know

possession – something you have

inherence – something you are

20

authentication factors

@carlastabile

Carla Urrea Stabile

21 of 78

possession factor || inherence factor

21

@carlastabile

Carla Urrea Stabile

22 of 78

possession factor || inherence factor

22

@carlastabile

Carla Urrea Stabile

23 of 78

public-key cryptography

🔑 🔐

23

@carlastabile

Carla Urrea Stabile

24 of 78

👍 multiple authentication factors

🔐 public-key cryptography

👀 phishing-resistant

24

@carlastabile

Carla Urrea Stabile

25 of 78

👍 multiple authentication factors

🔐 public-key cryptography

👀 phishing-resistant

prove intent through deliberate action

25

@carlastabile

Carla Urrea Stabile

26 of 78

Web Authentication API

aka WebAuthn

browser-based API that allows servers to register and authenticate users using public-key cryptography instead of a password.

W3C recommendation, 8 April 2021

26

@carlastabile

Carla Urrea Stabile

27 of 78

27

photo by @sambego

@carlastabile

Carla Urrea Stabile

28 of 78

webauthn in action – create credential

28

@carlastabile

Carla Urrea Stabile

29 of 78

webauthn in action – authenticate

29

@carlastabile

Carla Urrea Stabile

30 of 78

create new webauthn credentials

30

{username}

@carlastabile

Carla Urrea Stabile

31 of 78

create new webauthn credentials

31

{challenge}

@carlastabile

Carla Urrea Stabile

32 of 78

create new webauthn credentials

32

{challenge}

@carlastabile

Carla Urrea Stabile

33 of 78

create new webauthn credentials

33

{challenge}

user interaction

@carlastabile

Carla Urrea Stabile

34 of 78

create new webauthn credentials

34

{

signed challenge

public key

private key ID

}

@carlastabile

Carla Urrea Stabile

35 of 78

create new webauthn credentials

35

{

signed challenge

public key

private key ID

}

@carlastabile

Carla Urrea Stabile

36 of 78

authenticate with webauthn credentials

36

{username}

@carlastabile

Carla Urrea Stabile

37 of 78

authenticate with webauthn credentials

37

{

challenge

private key ID

}

@carlastabile

Carla Urrea Stabile

38 of 78

authenticate with webauthn credentials

38

{

challenge

private key ID

}

@carlastabile

Carla Urrea Stabile

39 of 78

authenticate with webauthn credentials

39

{

challenge

private key ID

}

user interaction

@carlastabile

Carla Urrea Stabile

40 of 78

authenticate with webauthn credentials

40

{

signed challenge

public key

}

@carlastabile

Carla Urrea Stabile

41 of 78

authenticate with webauthn credentials

41

{

signed challenge

public key

}

@carlastabile

Carla Urrea Stabile

42 of 78

42

CTAP2

WebAuthn

FIDO2

@carlastabile

Carla Urrea Stabile

43 of 78

how does the Web Authentication API looks like?

two main methods:

navigator.credentials.create

navigator.credentials.get

43

@carlastabile

Carla Urrea Stabile

44 of 78

how does the API looks like?

two main methods:

navigator.credentials.create

navigator.credentials.get

44

browser-based == JavaScript 😰 … but i got you.

@carlastabile

Carla Urrea Stabile

45 of 78

Makes your Ruby/Rails web server become a functional WebAuthn Relying Party.”

Thanks @cedarcode 🫶

@carlastabile

Carla Urrea Stabile

46 of 78

create webauthn credential – server side

46

@carlastabile

Carla Urrea Stabile

47 of 78

create webauthn credential – server side

47

@carlastabile

Carla Urrea Stabile

48 of 78

create webauthn credential – client side

48

your frontend needs to call navigator.credentials.create() somehow

@carlastabile

Carla Urrea Stabile

49 of 78

authenticate with webauthn credential (get) – server side

49

@carlastabile

Carla Urrea Stabile

50 of 78

authenticate with webauthn credential (get) – client side

50

your frontend needs to call navigator.credentials.get() somehow

@carlastabile

Carla Urrea Stabile

51 of 78

webauthn >>> passwords

private/public key based authentication

51

@carlastabile

Carla Urrea Stabile

52 of 78

webauthn >>> passwords

private/public key based authentication

phishing-resistant

52

@carlastabile

Carla Urrea Stabile

53 of 78

webauthn >>> passwords

private/public key based authentication

phishing-resistant

you only store public data in your db

53

@carlastabile

Carla Urrea Stabile

54 of 78

webauthn >>> passwords

private/public key based authentication

phishing-resistant

you only store public data in your db

better user-experience

54

@carlastabile

Carla Urrea Stabile

55 of 78

no more passwords! 🎉

55

@carlastabile

Carla Urrea Stabile

56 of 78

✅ share my dislike for passwords

✅ talk about alternatives

✅ webauthn

# TODO: passkeys

56

@carlastabile

Carla Urrea Stabile

57 of 78

can we go even further?

🤔

57

@carlastabile

Carla Urrea Stabile

58 of 78

✨ passkeys ✨

58

@carlastabile

Carla Urrea Stabile

59 of 78

passkeys are a replacement for passwords

59

@carlastabile

Carla Urrea Stabile

60 of 78

passkeys are a replacement for passwords

intuitive

60

@carlastabile

Carla Urrea Stabile

61 of 78

passkeys are a replacement for passwords

intuitive

automatically unique per-service

61

@carlastabile

Carla Urrea Stabile

62 of 78

passkeys are a replacement for passwords

intuitive

automatically unique per-service

breach resistant

62

@carlastabile

Carla Urrea Stabile

63 of 78

passkeys are a replacement for passwords

intuitive

automatically unique per-service

breach resistant

phishing-resistant

63

@carlastabile

Carla Urrea Stabile

64 of 78

technically speaking…

passkeys are FIDO2 discoverable credentials

64

@carlastabile

Carla Urrea Stabile

65 of 78

technically speaking…

passkeys are FIDO2 discoverable credentials

WebAuthn credential is not considered a passkey unless it’s discoverable.

65

@carlastabile

Carla Urrea Stabile

66 of 78

two types of passkeys

66

@carlastabile

Carla Urrea Stabile

67 of 78

two types of passkeys

synced

device-bound

67

@carlastabile

Carla Urrea Stabile

68 of 78

passkeys in action 🚀 – sign up

68

@carlastabile

Carla Urrea Stabile

69 of 78

passkeys in action 🚀 – login

69

@carlastabile

Carla Urrea Stabile

70 of 78

passkeys in action 🚀 – multi-device feature

70

@carlastabile

Carla Urrea Stabile

71 of 78

✅ share my dislike for passwords

✅ talk about alternatives

✅ webauthn

✅ passkeys

71

@carlastabile

Carla Urrea Stabile

72 of 78

moving forward… 👀

72

@carlastabile

Carla Urrea Stabile

73 of 78

where can you use passkeys already?

73

… and many others!

@carlastabile

Carla Urrea Stabile

74 of 78

webauthn.me

74

@carlastabile

Carla Urrea Stabile

75 of 78

passkeys.dev

75

@carlastabile

Carla Urrea Stabile

76 of 78

…it’s been a ride 😮‍💨

76

@carlastabile

Carla Urrea Stabile

77 of 78

…at least it’s been a ride without having to deal with passwords

77

@carlastabile

Carla Urrea Stabile

78 of 78

thank you! 🫶

78

@carlastabile

Carla Urrea Stabile