Go Passwordless with WebAuthn in Ruby

Nowadays, passwords are still our most common authentication method. However, they are not secure enough and have terrible UX.

Therefore, big industry players in the FIDO Alliance like Google, Mozilla, Apple, Amazon (among others) collaborated together to find a solution. WebAuthn was born and eventually became a W3C standard enabling users to authenticate on the web using public-key cryptography together with biometrics.

This talk will allow you to learn what WebAuthn is and how it works. You’ll also see how any Ruby app can easily get the level of authentication security and UX users deserve.

Transcript

1. Braulio Martinez Software Engineer brauliomlm brauliomartinezlm brauliomartinezlm@mastodon.social
2. Your Software Partner. Your Ally.
3. Go Passwordless with WebAuthn in Ruby
4. Motivation Context The Workings Adoption Take the step Future Resources
5. Authentication Factors
6. Knowledge factors ◦ Password ◦ PIN K
7. Possession factors ◦ Bank card ◦ USB physical key P
8. Inherent factors ◦ Fingerprint scan ◦ Voice recognition ◦ Face recognition ◦ Typing pattern I
9. ATM authentication Factors: ◦ Bank card - Possession ◦ 4-digit PIN - Knowledge
10. WhatsApp’s authentication Factors: ◦ Phone number ownership - Possession ▪ Proved by typing a code received via SMS ◦ [Optional] 6-digit PIN - Knowledge
11. Passwords ◦ Prone to phishing, brute force, etc ◦ All users compromised if hackers access a DB or a server ◦ Repetition across systems ◦ Bad UX
12. 81% of all hacking related breaches were a consequence of stolen passwords https://tinyurl.com/eumfschr
13. Most used second factors ◦ One Time Password (OTP) via SMS ◦ Time based OTP or TOTP via Google Authenticator
14. Only 28% of users use some kind of second authentication factor https://tinyurl.com/mpk979xz
15. 89% of organizations suffered at least one phishing attack in the course of 2022 with an average cost of $2.19M https://blog.hypr.com/press-releases/hypr-the-leader-in-phishing- resistant-mfa-raises-25m
16. Phishing & Replay Attack Example
19. Motivation Context The Workings Adoption Take the step Future Resources
20. What is WebAuthn?
21. WebAuthn (Web Authentication) is a standard that defines a set of rules for APIs to enable users to strongly register and authenticate on web applications using public key based cryptography.
22. Who created it?
23. +
25. What was the standardization process?
26. May, 2016 W3C First Public Working Draft
27. March, 2019 W3C Recommendation, Standard Level 1
28. April, 2021 W3C Recommendation, Standard Level 2
29. March, 2023 W3C Editor’s Draft, Standard Level 3
30. Where do people collaborate on the standard?
31. https://github.com/w3c/webauthn/issues
32. Motivation Context The Workings Adoption Take the step Future Resources
33. WebAuthn
34. What does it provide?
35. Possession factor
36. USB dongle
37. Phone
38. WebAuthn Spec
39. The WebAuthn Spec ◦ WebAuthn Credential ◦ 3 entities ◦ 2 user flows
40. WebAuthn Credential
41. 1. Strong
42. 2. Scoped
43. Digital Signatures
44. The Entities ◦ Authenticator ◦ Client ◦ Relying Party
45. The Entities ◦ Authenticator => User Device ▪ Creating and holding credentials securely, signing ◦ Client => Web Browser ◦ Relying Party => Web App
47. The User Flows ◦ Registration (of a credential) ◦ Authentication (of a credential)
48. Registration
50. Authentication
52. Behind the scenes
53. Registration
59. 🔑 🔐
63. Authentication
69. 📜
72. v(📜, 🔑) = ✅
73. v(origin) = ✅
75. The Code
76. cedarcode/webauthn-ruby
77. # Gemfile gem "webauthn" # config/initializers/webauthn.rb WebAuthn.configure do |config| config.origin = "https://your-app.com" end
78. Registration
80. # app/views/registrations/new.html.erb <%= form_with url: registration_path, ... do |form| %> <%= form.text_field :username %> <%= form.text_field :nickname %> <%= form.submit ‘Sign Up’ %> <% end %>
81. # app/controllers/credentials_controller.rb def create user = User.new(...) options = WebAuthn::Credential.options_for_create(...) if user.valid? session[:current_registration] = { challenge: options.challenge, ... } respond_to do |format| format.json { render json: options } end end end
82. # app/javascript/credentials.js navigator.credentials.create({ publicKey: { … } })
83. # app/javascript/credentials.js navigator.credentials.create({ publicKey: { … } })
84. # app/javascript/credentials.js navigator.credentials.create({ publicKey: { … } }). then(function(credential) { registerCredentialWithServer(credential); });
85. # app/javascript/credentials.js navigator.credentials.create({ publicKey: { … } }). then(function(credential) { registerCredentialWithServer(credential); });
86. # app/controllers/credentials_controller.rb def register credential = WebAuthn::Credential.from_create(params[:credential]) credential.verify(…) end
87. # app/controllers/credentials_controller.rb def register credential = WebAuthn::Credential.from_create(params[:credential]) credential.verify(…) current_user.webauthn_credentials.create!( webauthn_id: credential.id, public_key: credential.public_key ) end
88. # app/controllers/credentials_controller.rb def register credential = WebAuthn::Credential.from_create(params[:credential]) credential.verify(…) current_user.webauthn_credentials.create!( webauthn_id: credential.id, public_key: credential.public_key ) # return success end
89. Authentication
91. # app/views/sessions/new.html.erb <%= form_with url: session_path, ... do |form| %> <%= form.text_field :username %> <%= form.submit ‘Sign In’ %> <% end %>
92. # app/controllers/sessions_controller.rb def create user = User.find_by(...) if user options = WebAuthn::Credential.options_for_get( allow: user.credentials.pluck(:external_id), ... ) session[:current_authentication] = { challenge: options.challenge, ... } respond_to do |format| format.json { render json: options } end end end
93. # app/javascript/credentials.js navigator.credentials.get({ publicKey: { allowedCredentials: [{ id: registeredCredId, … }] } })
94. # app/javascript/credentials.js navigator.credentials.get({ publicKey: { allowedCredentials: [{ id: registeredCredId, … }] } })
95. # app/javascript/credentials.js navigator.credentials.get({ publicKey: { allowedCredentials: [{ id: registeredCredId, … }] } }).then(function(credential) { authenticateCredentialWithServer(credential); });
96. # app/javascript/credentials.js navigator.credentials.get({ publicKey: { allowedCredentials: [{ id: registeredCredId, … }] } }).then(function(credential) { authenticateCredentialWithServer(credential); });
97. # app/controllers/credentials_controller.rb def authenticate credential = WebAuthn::Credential.from_get(params[:credential]) credential.verify(…, public_key: registered_credential.public_key) end
98. # app/controllers/credentials_controller.rb def authenticate credential = WebAuthn::Credential.from_get(params[:credential]) registered_credential = current_user .webauthn_credentials .find_by(webauthn_id: credential.id) credential.verify(…, public_key: registered_credential.public_key) end
99. # app/controllers/credentials_controller.rb def authenticate credential = WebAuthn::Credential.from_get(params[:credential]) registered_credential = current_user .webauthn_credentials .find_by(webauthn_id: credential.id) credential.verify(…, public_key: registered_credential.public_key) # return success end
100. WebAuthn as a 2nd Factor 1st: Password - Knowledge 2nd: WebAuthn Credential - Possession
101. Optional: Local User Verification
102. Inherence
103. Knowledge
104. navigator.credentials.get({ publicKey: { …, “userVerification”: “required” }});
105. WebAuthn as a 2nd & 3rd Factor 1st: Password - Knowledge 2nd: WebAuthn Credential - Possession 3rd: WebAuthn User Verification - Knowledge or Inherence
106. WebAuthn as a 2nd & 3rd Factor 1st: Password - Knowledge 2nd: WebAuthn Credential - Possession 3rd: WebAuthn User Verification - Knowledge or Inherence
107. WebAuthn as 1st & 2nd factor 1st: WebAuthn Credential - Possession 2nd: WebAuthn User Verification - Knowledge or Inherence
108. Password-less 🙉
110. Wins! ✅ No brute force ✅ No sensitive data (secrets) in the Server ✅ No phishing ✅ No man-in-the-middle attacks
111. Challenges 🚧 Device loss recovery UX 🚧 Portability across devices
112. Motivation Context The Workings Adoption Take the step Future Resources
113. How can we solve this for mass adoption?
114. Passkeys https://tinyurl.com/2m4h6yeh
115. Multi device WebAuthn Credential
116. Passkeys Features (many WIP) • Browser Autofill UI • Cross device authentication authenticators • Cross device authentication client • Device Public Key (DPK)
117. Are multi device Passkeys as secure as device bound Passkeys?
118. Registration
120. Authentication
122. Password-less
123. WebAuthn Platform/Browser Support (Oct 2019)
124. Disclaimer: a few of these browsers/platforms might still be using legacy U2F to talk to authenticators WebAuthn Platform/Browser Support (April 2023) iOS Android Windows macOS Linux Chrome Edge Safari - - - Firefox Brave
125. Passkeys Support *credits to https://passkeys.dev/device-support/
126. September 2018 18F/Login.gov https://fidoalliance.org/u-s-general-services-administrations-rollout-of-fido2-on-login-gov/
127. April 2019 Google Accounts http://tiny.cc/z776vz
128. June 2019 Shopify http://tiny.cc/5876vz https://shopify.engineering/supporting-passkeys-in-shop-authentication-flows (March 2023)
129. August 2019 Github https://github.blog/2019-08-21-github-supports-webauthn-for-security-keys/
130. December 2019 Basecamp https://m.signalvnoise.com/basecamp-now-supports-security-keys-for-two-factor-authentication-thanks-to-webauthn/
131. September 2020 GitLab https://gitlab.com/gitlab-org/gitlab/-/merge_requests/26692
132. November 2020 AWS SSO https://aws.amazon.com/blogs/aws/multi-factor-authentication-with-webauthn-for-aws-sso/
133. Motivation Context The Workings Adoption Take the step Future Resources
134. How to migrate my app to use WebAuthn?
135. https://github.com/cedarcode/webauthn-rails-demo-app webauthn.cedarcode.com ◦ Blank sheet app ◦ Rails & Stimulus.js ◦ Fully passwordless - WebAuthn only
136. https://github.com/cedarcode/webauthn-2fa-rails-demo webauthn-2fa.cedarcode.com ◦ Blank sheet app ◦ Rails & Stimulus.js ◦ WebAuthn as 2nd factor
137. https://github.com/rubygems/rubygems.org/pull/2865 Rubygems.org ◦ Real life application ◦ Only 2FA ◦ Clearance based authentication
138. https://github.com/mastodon/mastodon/pull/14466 Mastodon ◦ Real life application ◦ Only 2FA ◦ Devise based authentication
139. Motivation Context The Workings Adoption Take the step Future Resources
140. ◦ webauthn-ruby v3.X.X ▪ Maintenance and staying on edge on dependencies ▪ Evolving as well as the standard keeps changing ◦ webauthn + devise, keep pushing as a second factor ◦ Passkeys
141. Thanks to webauthn-ruby contributors! ◦ @grzuy - Gonzalo Rodriguez (former Cedarcode) ◦ @bdewater - Bart @Thatch (former Shopify) ◦ @santiagorodriguez96 - Santiago Rodriguez @Cedarcode ◦ @sorah - Sorah Fukumori @Cookpad ◦ @lgarron - Lucas Garron @Github ◦ @padulafacundo - Facundo Padula (former Cerdacode)
142. Motivation Context The Workings Adoption Take the step Future Resources
143. ◦ https://webauthn.io ◦ https://github.com/cedarcode/webauthn-ruby ◦ https://fidoalliance.org/fido2-2/fido2-web-authentication-webauthn/ ◦ https://www.yubico.com/services-with-yubikey/webauthn ◦ https://www.w3.org/TR/webauthn
144. Thanks!
145. Q&A WebAuthn Demo
146. Braulio Martinez Software Engineer brauliomlm brauliomartinezlm brauliomartinezlm@mastodon.social WebAuthn Demo