Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

The state of passwordless auth on the web

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 64 Anuncio

The state of passwordless auth on the web

Descargar para leer sin conexión

Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand?

In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfil for them to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision for how authentication could look in the future and a blueprint for how to build the best auth experience today.

--

Links:
Passkey demo: https://www.passkeys.io/

https://webauthn.me/
https://web.dev/passkey-registration/
https://web.dev/web-otp/
https://web.dev/security-credential-management/

https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete
https://github.com/philnash/web-otp-input

Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand?

In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfil for them to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision for how authentication could look in the future and a blueprint for how to build the best auth experience today.

--

Links:
Passkey demo: https://www.passkeys.io/

https://webauthn.me/
https://web.dev/passkey-registration/
https://web.dev/web-otp/
https://web.dev/security-credential-management/

https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete
https://github.com/philnash/web-otp-input

Anuncio
Anuncio

Más Contenido Relacionado

Más reciente (20)

Anuncio

The state of passwordless auth on the web

  1. 1. THE STATE OF ********LESS AUTH ON THE WEB
  2. 2. PHIL NASH twitter.com/philnash twitter.com/philnash @phil@philna.sh @phil@philna.sh linkedin.com/in/philnash linkedin.com/in/philnash https://philna.sh https://philna.sh
  3. 3. PASSWORDS
  4. 4. PASSWORDS ARE TERRIBLE
  5. 5. TRADE OFFS
  6. 6. VS
  7. 7. VS USER EXPERIENCE
  8. 8. VS USER EXPERIENCE SECURITY
  9. 9. PASSWORDS EXPERIENCE Hard to remember good passwords Hard to choose good passwords Needs password managers SECURITY Easy to break easy passwords Password leaks/credential stuffing Vulnerable to phishing
  10. 10. USE A PASSWORD MANAGER
  11. 11. PASSWORD MANAGER EXPERIENCE Good passwords are easy No repetition SECURITY Long, difficult passwords Unique passwords Still vulnerable to phishing
  12. 12. 24% USE A PASSWORD MANAGER
  13. 13. CAN WE IMPROVE THIS?
  14. 14. autocomplete="new-password" /> <input 1 type="password" 2 name="password" 3 id="password" 4 5
  15. 15. type="email" autocomplete="username" /> autocomplete="current-password" /> <input 1 2 name="username" 3 id="username" 4 5 6 <input 7 type="password" 8 name="password" 9 id="password" 10 11
  16. 16. CREDENTIAL MANAGEMENT API
  17. 17. STORE AND RETRIEVE CREDENTIALS
  18. 18. STORE CREDENTIALS if ("PasswordCredential" in window) { const cred = new PasswordCredential({ id: userId, password: password }); try { await navigator.credentials.store(cred); } catch(error) { console.error(error); } window.location.href = loggedInUrl; } 1 2 3 4 5 6 7 8 9 10 11 12
  19. 19. STORE CREDENTIALS if ("PasswordCredential" in window) { const cred = new PasswordCredential({ id: userId, password: password }); try { await navigator.credentials.store(cred); } catch(error) { console.error(error); } window.location.href = loggedInUrl; } 1 2 3 4 5 6 7 8 9 10 11 12 const cred = new PasswordCredential({ id: userId, password: password }); if ("PasswordCredential" in window) { 1 2 3 4 5 try { 6 await navigator.credentials.store(cred); 7 } catch(error) { 8 console.error(error); 9 } 10 window.location.href = loggedInUrl; 11 } 12
  20. 20. STORE CREDENTIALS if ("PasswordCredential" in window) { const cred = new PasswordCredential({ id: userId, password: password }); try { await navigator.credentials.store(cred); } catch(error) { console.error(error); } window.location.href = loggedInUrl; } 1 2 3 4 5 6 7 8 9 10 11 12 const cred = new PasswordCredential({ id: userId, password: password }); if ("PasswordCredential" in window) { 1 2 3 4 5 try { 6 await navigator.credentials.store(cred); 7 } catch(error) { 8 console.error(error); 9 } 10 window.location.href = loggedInUrl; 11 } 12 await navigator.credentials.store(cred); if ("PasswordCredential" in window) { 1 const cred = new PasswordCredential({ 2 id: userId, 3 password: password 4 }); 5 try { 6 7 } catch(error) { 8 console.error(error); 9 } 10 window.location.href = loggedInUrl; 11 } 12
  21. 21. RETRIEVE CREDENTIALS const creds = await navigator.credentials.get({ password: true }); if (creds) { loginWith(creds); } 1 2 3 4 5 6
  22. 22. RETRIEVE CREDENTIALS SILENTLY unmediated: true, const creds = await navigator.credentials.get({ 1 password: true, 2 3 }); 4 if (creds) { 5 loginWith(creds); 6 } 7
  23. 23. WHEN SIGNING OUT navigator.credentials.preventSilentAccess()
  24. 24. CREDENTIAL MANAGEMENT EXPERIENCE One click logins No need to remember passwords SECURITY Easy to break easy passwords Password leaks/credential stuffing Less vulnerable to phishing
  25. 25. TWO FACTOR AUTHENTICATION
  26. 26. TWO FACTOR AUTHENTICATION EXPERIENCE Two steps Needs another device Requires phone signal SECURITY
  27. 27. CAN WE MAKE IT BETTER?
  28. 28. inputmode="numeric" autocomplete="one-time-code" /> <input 1 type="text" 2 name="otp" 3 id="otp" 4 5 6
  29. 29. WEBOTP API
  30. 30. CREDENTIAL MANAGEMENT API (AGAIN)
  31. 31. if ('OTPCredential' in window) { navigator.credentials.get({ otp: { transport: ['sms'] } }).then((otp) => { console.log(otp.code); }); }
  32. 32. TWO FACTOR AUTHENTICATION EXPERIENCE Two (minimal) steps Needs another device Requires phone signal SECURITY
  33. 33. 2FA WITH SECURITY KEY
  34. 34. WEBAUTHN
  35. 35. navigator.credentials.create({ publicKey: { challenge: challengeFromServer, rp: { id: "example.com", }, user: { id: userId, name: "philnash", displayName: "Phil Nash", }, pubKeyCredParams: [ { type: "public-key", alg: -7 }, { type: "public-key", alg: -257 } ] }
  36. 36. navigator.credentials.get({ publicKey: { challenge: challengeFromServer, allowCredentials: [{ id: credentialId, type: 'public-key', transports: ['usb', 'ble', 'nfc'], }] } });
  37. 37. 2FA WITH WEBAUTHN EXPERIENCE Two (minimal) steps Needs authenticator key or platform authenticator Need to either move key around or register multiple devices SECURITY Overcomes poor/leaked passwords with second factor Public/private key cryptography, unleakable! Phishing resistant!
  38. 38. PASSWORDLESS
  39. 39. MAGIC LINKS
  40. 40. MAGIC LINKS EXPERIENCE No need for a password Relies on email Friction SECURITY Pretty secure
  41. 41. PASSKEYS
  42. 42. PASSKEYS MULTI DEVICE CREDENTIALS
  43. 43. PASSKEYS WebAuthn but with platform authenticator WebAuthn but with platform authenticator Verifies the user on the device Verifies the user on the device Authenticates the user with the server Authenticates the user with the server Syncs across your devices Syncs across your devices Can be used cross device where sync is not Can be used cross device where sync is not possible possible
  44. 44. if (window.PublicKeyCredential && PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailab PublicKeyCredential.​ ​ isConditionalMediationAvailable) { Promise.all([ PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvail PublicKeyCredential.​ ​ isConditionalMediationAvailable(), ]).then(results => { if (results.every(r => r === true)) { // Call WebAuthn creation } }); }
  45. 45. navigator.credentials.create({ publicKey: { challenge: challengeFromServer, rp: { id: "example.com" }, user: { id: userId, name: "philnash", displayName: "Phil N pubKeyCredParams: [ {alg: -7, type: "public-key"}, { type: "public-key", alg: -257 } ], authenticatorSelection: { authenticatorAttachment: "platform", requireResidentKey: true, userVerification: "preferred" } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  46. 46. navigator.credentials.create({ publicKey: { challenge: challengeFromServer, rp: { id: "example.com" }, user: { id: userId, name: "philnash", displayName: "Phil N pubKeyCredParams: [ {alg: -7, type: "public-key"}, { type: "public-key", alg: -257 } ], authenticatorSelection: { authenticatorAttachment: "platform", requireResidentKey: true, userVerification: "preferred" } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 authenticatorSelection: { authenticatorAttachment: "platform", requireResidentKey: true, userVerification: "preferred" } navigator.credentials.create({ 1 publicKey: { 2 challenge: challengeFromServer, 3 rp: { id: "example.com" }, 4 user: { id: userId, name: "philnash", displayName: "Phil N 5 pubKeyCredParams: [ 6 {alg: -7, type: "public-key"}, 7 { type: "public-key", alg: -257 } 8 ], 9 10 11 12 13 14 } 15 }); 16
  47. 47. DEMO
  48. 48. PASSKEYS EXPERIENCE No need for a password Requires platform authenticator Syncs SECURITY Phishing resistant Unleakable
  49. 49. PASSKEYS EXPERIENCE No need for a password Requires platform authenticator Syncs SECURITY Phishing resistant Unleakable Perfect?
  50. 50. OTHER DRAWBACKS?
  51. 51. OTHER DRAWBACKS? Browser support! Browser support!
  52. 52. OTHER DRAWBACKS? Browser support! Browser support! But it's coming But it's coming
  53. 53. RECOMMENDATIONS
  54. 54. RECOMMENDATIONS Detect passkey support and offer it first Detect passkey support and offer it first
  55. 55. RECOMMENDATIONS Detect passkey support and offer it first Detect passkey support and offer it first Support multiple passkeys Support multiple passkeys
  56. 56. RECOMMENDATIONS Detect passkey support and offer it first Detect passkey support and offer it first Support multiple passkeys Support multiple passkeys Fallback to password with 2FA Fallback to password with 2FA
  57. 57. RECOMMENDATIONS Detect passkey support and offer it first Detect passkey support and offer it first Support multiple passkeys Support multiple passkeys Fallback to password with 2FA Fallback to password with 2FA Once a user can use passkeys, upgrade and Once a user can use passkeys, upgrade and remove old, weak remove old, weak credentials credentials
  58. 58. LINKS https://webauthn.me/ https://webauthn.me/ https://web.dev/passkey-registration/ https://web.dev/passkey-registration/ https://web.dev/web-otp/ https://web.dev/web-otp/ https://web.dev/security-credential- https://web.dev/security-credential- management/ management/
  59. 59. THANK YOU twitter.com/philnash twitter.com/philnash @phil@philna.sh @phil@philna.sh linkedin.com/in/philnash linkedin.com/in/philnash https://philna.sh https://philna.sh

×