Securing user accounts with WebAuthn

The Web Authentication API (also called WebAuthn) uses public-key cryptography instead of passwords or SMS for two-factor authentication in websites. In this talk, we will learn how to use the Web Authentication API, both in the browser-side as well as setting up the server-side to support WebAuthn.

Transcript

1. Securing user accounts with WebAuthn Arnelle Balane @arnellebalane
2. Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Subscribe to our channel! /UncaughtException
3. bit.ly/cds-cebu-webauthn
4. Passwords aren’t enough
5. username: arnelle password: password
6. Threat: Guessed Passwords username: arnelle password: password
7. Top 200 Most Common Passwords (source: NordPass)
8. 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
9. 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
10. 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!? 🙄
11. Password Reuse Password+1!?
12. Threat: Credential Stuffing username: arnelle password: Password+1!?
13. username: arnelle password: Password+1!? username: arnelle password: Password+1!? another very important service Threat: Credential Stuffing
14. One Time Passwords (OTP) username: arnelle password: Password+1!? OTP: 123456 SMS
15. Threat: Phishing username: arnelle password: Password+1!? OTP: 123456 username: arnelle password: Password+1!? OTP: 123456
16. Password Managers • no need to memorize passwords • stronger passwords
17. • use existing social media accounts Social Login
18. WebAuthn (Web Authentication API)
19. Public Key Cryptography public key private key
20. Public Key Cryptography + + = =
23. username: arnelle password: Password+1!?
24. challenge-message
25. challenge-message
27. Terminologies Relying Party (RP) Client Authenticator
28. Terminologies WebAuthn CTAP2
29. Terminologies WebAuthn CTAP2 FIDO2
30. Authenticators Roaming Authenticators (Yubikey, Titan Key, etc.) Platform Authenticators (Face ID, Touch ID, etc.)
31. Demo time! ✨ webauthn-api.arnelle.me
32. Registration
33. PublicKeyCredentialCreationOptions Registration
34. { "challenge": "Xr0koZvdaxrhJJ...", "rp": { "id": "webauthn-api.arnelle.me", "name": "WebAuthn Demo" }, "user": { "id": "arnellebalane@gmail.com", "name": "arnellebalane@gmail.com", "displayName": "Arnelle Balane" }, "pubKeyCredParams": [ { "alg": -7, "type": "public-key" } ] }
35. Registration Call WebAuthn API
36. navigator.credentials.create({ publicKey: { challenge: toArrayBuffer('Xr0koZvdaxrhJJ...'), rp: { id: 'webauthn-api.arnelle.me', name: 'WebAuthn Demo' }, user: { id: toArrayBuffer('arnellebalane@gmail.com'), name: 'arnellebalane@gmail.com', displayName: 'Arnelle Balane', }, pubKeyCredParams: [ { alg: -7, type: 'public-key' } ] } });
38. Registration PublicKeyCredential
39. PublicKeyCredential { id: 'UG2APqfTRoyK3SAILd2n8ANsitRK...', rawId: ArrayBuffer(), type: 'public-key', response: { clientDataJSON: ArrayBuffer(), attestationObject: ArrayBuffer() } }
40. Registration PublicKeyCredential
41. Authentication
42. PublicKeyCredentialRequestOptions Authentication
43. { "challenge": "Xr0koZvdaxrhJJ...", "rpId": "webauthn-api.arnelle.me", "allowCredentials": [ { "id": "UG2APqfTRoyK3SAILd2n8ANsitRK...", "type": "public-key" } ] }
44. Authentication Call WebAuthn API
45. navigator.credentials.get({ publicKey: { challenge: toArrayBuffer('Xr0koZvdaxrhJJ...'), rpId: 'webauthn-api.arnelle.me', allowCredentials: [ { id: toArrayBuffer('UG2APqfTRoyK3SAI...'), type: 'public-key' } ] } })
47. Authentication PublicKeyCredential
48. PublicKeyCredential { id: 'UG2APqfTRoyK3SAILd2n8ANsitRK...', rawId: ArrayBuffer(), type: 'public-key', response: { clientDataJSON: ArrayBuffer(), authenticatorData: ArrayBuffer(), signature: ArrayBuffer(), userHandle: ArrayBuffer() } }
49. Authentication PublicKeyCredential
50. webauthn.io
51. webauthn.me
52. dongleauth.info
53. • MDN: PublicKeyCredentialCreationOptions • MDN: PublicKeyCredentialRequestOptions • w3.org/TR/webauthn-2 Other Resources
54. Thank you! Securing user accounts with WebAuthn Arnelle Balane @arnellebalane