Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Securing user accounts with WebAuthn

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.

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

February 27, 2021
Tweet

More Decks by Arnelle Balane

Other Decks in Technology

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 + + = =

  21. None
  22. None
  23. username: arnelle password: Password+1!?

  24. challenge-message

  25. challenge-message

  26. None
  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' } ] } });
  37. None
  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' } ] } })
  46. None
  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