Add WebAuthn 2FA in UI

Gemfile

@@ -44,6 +44,7 @@ gem "sprockets-rails"
 gem "rack-attack"
 gem "rqrcode"
 gem "rotp"
+gem "webauthn", "~> 2.0.0.a"
 
 # Logging
 gem "lograge"

Gemfile.lock

@@ -48,6 +48,7 @@ GEM
     ast (2.4.0)
     autoprefixer-rails (9.6.1)
       execjs
+    awrence (1.1.0)
     aws-eventstream (1.0.3)
     aws-sdk (2.11.263)
       aws-sdk-resources (= 2.11.263)
@@ -59,6 +60,7 @@ GEM
     aws-sigv4 (1.1.0)
       aws-eventstream (~> 1.0, >= 1.0.2)
     bcrypt (3.1.12)
+    bindata (2.4.4)
     bootsnap (1.4.3)
       msgpack (~> 1.0)
     builder (3.2.3)
@@ -70,6 +72,7 @@ GEM
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (>= 2.0, < 4.0)
+    cbor (0.5.9.6)
     celluloid (0.17.3)
       celluloid-essentials
       celluloid-extras
@@ -103,6 +106,8 @@ GEM
     colorize (0.8.1)
     compact_index (0.11.0)
     concurrent-ruby (1.1.5)
+    cose (0.8.0)
+      cbor (~> 0.5.9)
     crass (1.0.4)
     css_parser (1.7.0)
       addressable
@@ -171,6 +176,7 @@ GEM
     http_parser.rb (0.6.0)
     i18n (1.6.0)
       concurrent-ruby (~> 1.0)
+    ipaddr (1.2.2)
     jaro_winkler (1.5.2)
     jmespath (1.4.0)
     jquery-rails (4.3.3)
@@ -251,6 +257,8 @@ GEM
     nokogiri (1.10.4)
       mini_portile2 (~> 2.4.0)
     oj (3.7.12)
+    openssl (2.1.2)
+      ipaddr
     optimist (3.0.0)
     os (1.0.1)
     parallel (1.17.0)
@@ -352,6 +360,7 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
+    securecompare (1.0.0)
     shoryuken (2.1.3)
       aws-sdk-core (~> 2)
       celluloid (~> 0.17)
@@ -382,7 +391,7 @@ GEM
     toxiproxy (1.0.3)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (3.2.0)
+    uglifier (4.1.20)
       execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext
@@ -393,6 +402,14 @@ GEM
       raindrops (~> 0.7)
     validates_formatting_of (0.9.0)
       activemodel
+    webauthn (2.0.0.beta1)
+      awrence (~> 1.1)
+      bindata (~> 2.4)
+      cbor (~> 0.5.9)
+      cose (~> 0.8.0)
+      jwt (>= 1.5, < 3.0)
+      openssl (~> 2.0)
+      securecompare (~> 1.0)
     websocket-driver (0.7.0)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.3)
@@ -463,6 +480,7 @@ DEPENDENCIES
   uglifier (>= 1.0.3)
   unicorn (~> 5.5.0.1.g6836)
   validates_formatting_of
+  webauthn (~> 2.0.0.a)
   xml-simple
 
 BUNDLED WITH

app/assets/javascripts/application.js

@@ -8,6 +8,7 @@
 //= require jquery_ujs
 //= require clipboard
 //= require github_buttons
+//= require webauthn-json
 //= require_tree .
 
 function handleClick(event, nav, removeNavExpandedClass, addNavExpandedClass) {

app/assets/javascripts/webauthn_credentials.js

@@ -0,0 +1,76 @@
+$(function(){
+  if(!webauthnJSON.supported()) {
+    if($("#unsupported-browser-message").length) {
+      $("#unsupported-browser-message").show();
+
+      $(".js-webauthn-button").each(function() {
+        $(this).prop("disabled", true);
+      });
+    }
+  }
+});
+
+$(".js-webauthn-registration-form").submit(function(event) {
+  event.preventDefault();
+  $("#security-key-error-message").hide();
+  var $form = $(this);
+
+  $.get({
+    url: "/internal/webauthn_registration/options",
+    dataType: "json",
+  }).done(function(options) {
+    webauthnJSON.create({ "publicKey": options }).then(
+      function(credential) {
+        callback(
+          "/internal/webauthn_registration",
+          {
+            "credential": credential,
+            "nickname": $("#nickname").val()
+          }
+        );
+      },
+      function(reason) {
+        $("#security-key-error-message").show();
+        var registerButton = $form.find("input.form__submit");
+        registerButton.attr('value', registerButton.attr('data-enable-with'));
+        registerButton.prop('disabled', false);
+      });
+  }).fail(function(response) { console.log(response) })
+});
+
+$(".js-webauthn-authentication-form").submit(function(event) {
+  event.preventDefault();
+  $("#security-key-error-message").hide();
+  var $form = $(this);
+
+  $.get({
+    url: "/internal/webauthn_session/options",
+    dataType: "json"
+  }).done(function(options) {
+    webauthnJSON.get({ "publicKey": options }).then(
+      function(credential) {
+        callback("/internal/webauthn_session", { "credential": credential });
+      },
+      function(reason) {
+        $("#security-key-error-message").show();
+        signInButton = $form.find(".js-webauthn-button");
+        signInButton.attr('value', signInButton.attr('data-enable-with'));
+        signInButton.prop('disabled', false);
+      });
+  }).fail(function(response) { window.location.replace(response.responseJSON["redirect_path"]) })
+});
+
+function callback(url, body) {
+  $.post({
+    url: url,
+    data: JSON.stringify(body),
+    dataType: "json",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  }).done(function(response) {
+    window.location.replace(response["redirect_path"]);
+  }).error(function(response) {
+    window.location.replace(response.responseJSON["redirect_path"]);
+  });
+}

app/assets/stylesheets/modules/button.css

@@ -63,6 +63,10 @@
   transition-property: opacity; }
   .form__submit:hover {
     opacity: .7; }
+  .form__submit:disabled {
+    opacity: .5;
+    cursor: default;
+  }
 
 .download__format {
   margin-bottom: 24px;

app/assets/stylesheets/type.css

@@ -34,12 +34,18 @@ label.t-hidden {
   overflow: visible\0;
   clip: auto\0; }
 
+.t-red {
+  color: red; }
+
 .t-gray {
   color: #9da2ab; }
 
 .t-uppercase {
   text-transform: uppercase; }
 
+.t-credentials-list {
+  margin-bottom: 70px; }
+
 .t-list__heading {
   font-weight: 800;
   font-size: 12px;
@@ -212,3 +218,7 @@ a.t-list__item {
 .t-item--hidden {
   display: none !important;
 }
+
+.t--hidden {
+  display: none;
+}

app/controllers/internal/webauthn_registrations_controller.rb

@@ -0,0 +1,44 @@
+class Internal::WebauthnRegistrationsController < ApplicationController
+  def options
+    current_user.update(webauthn_handle: WebAuthn.generate_user_id) unless current_user.webauthn_handle
+
+    options_for_create = WebAuthn::Credential.options_for_create(
+      user: {
+        name: current_user.handle,
+        display_name: current_user.handle,
+        id: current_user.webauthn_handle
+      },
+      exclude: current_user.webauthn_credentials.pluck(:external_id)
+    )
+
+    session[:webauthn_challenge] = options_for_create.challenge
+
+    render json: options_for_create, status: :ok
+  end
+
+  def create
+    webauthn_credential = WebAuthn::Credential.from_create(params[:credential])
+
+    if webauthn_credential.verify(session[:webauthn_challenge])
+      user_credential = current_user.webauthn_credentials.build(
+        external_id: webauthn_credential.id,
+        public_key: webauthn_credential.public_key,
+        nickname: params[:nickname],
+        sign_count: webauthn_credential.sign_count
+      )
+
+      if user_credential.save
+        flash[:success] = t(".success")
+        status = :ok
+      else
+        flash[:error] = t(".fail")
+        status = :internal_server_error
+      end
+    else
+      flash[:error] = t("internal.webauthn_sessions.incorrect_security_key")
+      status = :unauthorized
+    end
+
+    render json: { redirect_path: webauthn_credentials_path }, status: status
+  end
+end

app/controllers/internal/webauthn_sessions_controller.rb

@@ -0,0 +1,37 @@
+class Internal::WebauthnSessionsController < Clearance::SessionsController
+  def options
+    user = User.find_by(handle: session[:mfa_user])
+
+    if user&.webauthn_enabled?
+      options_for_get = WebAuthn::Credential.options_for_get(
+        allow: user.webauthn_credentials.pluck(:external_id)
+      )
+
+      session[:webauthn_challenge] = options_for_get.challenge
+
+      render json: options_for_get, status: :ok
+    else
+      flash[:error] = t("webauthn_credentials.not_enabled")
+      render json: { redirect_path: sign_in_path }, status: :unauthorized
+    end
+  end
+
+  def create
+    user = User.find_by(handle: session.delete(:mfa_user))
+    webauthn_credential = WebAuthn::Credential.from_get(params[:credential])
+
+    if user&.webauthn_enabled? && user&.webauthn_verified?(session[:webauthn_challenge], webauthn_credential)
+      sign_in(user) do |status|
+        if status.success?
+          render json: { redirect_path: root_path }, status: :ok
+        else
+          flash[:notice] = status.failure_message
+          render json: { redirect_path: sign_in_path }
+        end
+      end
+    else
+      flash[:error] = t("internal.webauthn_sessions.incorrect_security_key")
+      render json: { redirect_path: sign_in_path }, status: :unauthorized
+    end
+  end
+end

app/controllers/sessions_controller.rb

@@ -4,7 +4,7 @@ def create
 
     if @user&.mfa_enabled?
       session[:mfa_user] = @user.handle
-      render "sessions/otp_prompt"
+      render "sessions/mfa_prompt"
     else
       do_login
     end

app/controllers/webauthn_credentials_controller.rb

@@ -0,0 +1,22 @@
+class WebauthnCredentialsController < ApplicationController
+  before_action :redirect_to_signin, unless: :signed_in?
+
+  def index
+    @user = current_user
+  end
+
+  def destroy
+    credential = current_user.webauthn_credentials.find_by(id: params[:id])
+    if credential
+      credential.destroy
+      if credential.destroyed?
+        flash[:success] = t(".success")
+      else
+        flash[:error] = t(".fail")
+      end
+    else
+      flash[:error] = t(".not_found")
+    end
+    redirect_to webauthn_credentials_url
+  end
+end

app/models/user.rb

@@ -25,6 +25,8 @@ class User < ApplicationRecord
   has_many :deletions, dependent: :nullify
   has_many :web_hooks, dependent: :destroy
 
+  has_many :webauthn_credentials, dependent: :destroy
+
   after_validation :set_unconfirmed_email, if: :email_changed?, on: :update
   before_create :generate_api_key, :generate_confirmation_token
 
@@ -172,6 +174,10 @@ def mfa_enabled?
     !mfa_disabled?
   end
 
+  def webauthn_enabled?
+    webauthn_credentials.any?
+  end
+
   def disable_mfa!
     mfa_disabled!
     self.mfa_seed = ""
@@ -210,6 +216,26 @@ def otp_verified?(otp)
     save!(validate: false)
   end
 
+  def webauthn_verified?(current_challenge, webauthn_credential)
+    user_credential = webauthn_credentials.find_by!(external_id: webauthn_credential.id)
+
+    if webauthn_credential.user_handle.present?
+      return false unless webauthn_handle == webauthn_credential.user_handle
+    end
+
+    begin
+      webauthn_credential.verify(
+        current_challenge,
+        public_key: user_credential.public_key,
+        sign_count: user_credential.sign_count
+      )
+
+      user_credential.update!(sign_count: webauthn_credential.sign_count, last_used_on: Time.current)
+    rescue WebAuthn::Error
+      false
+    end
+  end
+
   def block!
     transaction do
       update_attribute(:email, "security+locked-#{SecureRandom.hex(4)}-#{id}-#{handle}@rubygems.org")

app/models/webauthn_credential.rb

@@ -0,0 +1,4 @@
+class WebauthnCredential < ApplicationRecord
+  validates :external_id, :public_key, :nickname, presence: true
+  belongs_to :user
+end

app/views/profiles/edit.html.erb

@@ -102,6 +102,8 @@
       </div>
       <%= submit_tag t('.mfa.update'), :class => 'form__submit' %>
     <% end %>
+
+    <h2><%= link_to t('webauthn_credentials.index.title'), webauthn_credentials_path %></h2>
   <% else %>
     <p>
       <%= t '.mfa.disabled' %>