Tweet
Tweet

Slide 1

Slide 1 text

Securing user accounts with WebAuthn Arnelle Balane @arnellebalane

Slide 2

Slide 2 text

Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Subscribe to our channel! /UncaughtException

Slide 3

Slide 3 text

bit.ly/cds-cebu-webauthn

Slide 4

Slide 4 text

Passwords aren’t enough

Slide 5

Slide 5 text

username: arnelle password: password

Slide 6

Slide 6 text

Threat: Guessed Passwords username: arnelle password: password

Slide 7

Slide 7 text

Top 200 Most Common Passwords (source: NordPass)

Slide 8

Slide 8 text

Passwords must: ● have 12 or more characters ● contain at least 1 number ● contain at least 1 uppercase letter ● contain at least 1 lowercase letter ● contain at least 1 special symbol

Slide 9

Slide 9 text

Passwords must: ● have 12 or more characters ● contain at least 1 number ● contain at least 1 uppercase letter ● contain at least 1 lowercase letter ● contain at least 1 special symbol U5XmcaJD>X(,"?qa

Slide 10

Slide 10 text

Passwords must: ● have 12 or more characters ● contain at least 1 number ● contain at least 1 uppercase letter ● contain at least 1 lowercase letter ● contain at least 1 special symbol Password+1!? 🙄

Slide 11

Slide 11 text

Password Reuse Password+1!?

Slide 12

Slide 12 text

Threat: Credential Stuffing username: arnelle password: Password+1!?

Slide 13

Slide 13 text

username: arnelle password: Password+1!? username: arnelle password: Password+1!? another very important service Threat: Credential Stuffing

Slide 14

Slide 14 text

One Time Passwords (OTP) username: arnelle password: Password+1!? OTP: 123456 SMS

Slide 15

Slide 15 text

Threat: Phishing username: arnelle password: Password+1!? OTP: 123456 username: arnelle password: Password+1!? OTP: 123456

Slide 16

Slide 16 text

Password Managers ● no need to memorize passwords ● stronger passwords

Slide 17

Slide 17 text

● use existing social media accounts Social Login

Slide 18

Slide 18 text

WebAuthn (Web Authentication API)

Slide 19

Slide 19 text

Public Key Cryptography public key private key

Slide 20

Slide 20 text

Public Key Cryptography + + = =

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

username: arnelle password: Password+1!?

Slide 24

Slide 24 text

challenge-message

Slide 25

Slide 25 text

challenge-message

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Terminologies Relying Party (RP) Client Authenticator

Slide 28

Slide 28 text

Terminologies WebAuthn CTAP2

Slide 29

Slide 29 text

Terminologies WebAuthn CTAP2 FIDO2

Slide 30

Slide 30 text

Authenticators Roaming Authenticators (Yubikey, Titan Key, etc.) Platform Authenticators (Face ID, Touch ID, etc.)

Slide 31

Slide 31 text

Demo time! ✨ webauthn-api.arnelle.me

Slide 32

Slide 32 text

Registration

Slide 33

Slide 33 text

PublicKeyCredentialCreationOptions Registration

Slide 34

Slide 34 text

{ "challenge": "Xr0koZvdaxrhJJ...", "rp": { "id": "webauthn-api.arnelle.me", "name": "WebAuthn Demo" }, "user": { "id": "[email protected]", "name": "[email protected]", "displayName": "Arnelle Balane" }, "pubKeyCredParams": [ { "alg": -7, "type": "public-key" } ] }

Slide 35

Slide 35 text

Registration Call WebAuthn API

Slide 36

Slide 36 text

navigator.credentials.create({ publicKey: { challenge: toArrayBuffer('Xr0koZvdaxrhJJ...'), rp: { id: 'webauthn-api.arnelle.me', name: 'WebAuthn Demo' }, user: { id: toArrayBuffer('[email protected]'), name: '[email protected]', displayName: 'Arnelle Balane', }, pubKeyCredParams: [ { alg: -7, type: 'public-key' } ] } });

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Registration PublicKeyCredential

Slide 39

Slide 39 text

PublicKeyCredential { id: 'UG2APqfTRoyK3SAILd2n8ANsitRK...', rawId: ArrayBuffer(), type: 'public-key', response: { clientDataJSON: ArrayBuffer(), attestationObject: ArrayBuffer() } }

Slide 40

Slide 40 text

Registration PublicKeyCredential

Slide 41

Slide 41 text

Authentication

Slide 42

Slide 42 text

PublicKeyCredentialRequestOptions Authentication

Slide 43

Slide 43 text

{ "challenge": "Xr0koZvdaxrhJJ...", "rpId": "webauthn-api.arnelle.me", "allowCredentials": [ { "id": "UG2APqfTRoyK3SAILd2n8ANsitRK...", "type": "public-key" } ] }

Slide 44

Slide 44 text

Authentication Call WebAuthn API

Slide 45

Slide 45 text

navigator.credentials.get({ publicKey: { challenge: toArrayBuffer('Xr0koZvdaxrhJJ...'), rpId: 'webauthn-api.arnelle.me', allowCredentials: [ { id: toArrayBuffer('UG2APqfTRoyK3SAI...'), type: 'public-key' } ] } })

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Authentication PublicKeyCredential

Slide 48

Slide 48 text

PublicKeyCredential { id: 'UG2APqfTRoyK3SAILd2n8ANsitRK...', rawId: ArrayBuffer(), type: 'public-key', response: { clientDataJSON: ArrayBuffer(), authenticatorData: ArrayBuffer(), signature: ArrayBuffer(), userHandle: ArrayBuffer() } }

Slide 49

Slide 49 text

Authentication PublicKeyCredential

Slide 50

Slide 50 text

webauthn.io

Slide 51

Slide 51 text

webauthn.me

Slide 52

Slide 52 text

dongleauth.info

Slide 53

Slide 53 text

● MDN: PublicKeyCredentialCreationOptions ● MDN: PublicKeyCredentialRequestOptions ● w3.org/TR/webauthn-2 Other Resources

Slide 54

Slide 54 text

Thank you! Securing user accounts with WebAuthn Arnelle Balane @arnellebalane