Refactor JS

.rubocop.yml

@@ -231,7 +231,7 @@ Rails/I18nLocaleAssignment:
   Enabled: true
 
 Rails/I18nLocaleTexts:
-  Enabled: true
+  Enabled: false
 
 Rails/IgnoredColumnsAssignment:
   Enabled: true

app/assets/stylesheets/application.css

@@ -32,6 +32,7 @@ body {
 
 .center {
   display: flex;
+  justify-content:center;
 }
 
 .center input {

app/controllers/credentials_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class CredentialsController < ApplicationController
-  def create
+  def create_options
     create_options = WebAuthn::Credential.options_for_create(
       user: {
         id: current_user.webauthn_id,
@@ -18,8 +18,8 @@ def create
     end
   end
 
-  def callback
-    webauthn_credential = WebAuthn::Credential.from_create(params)
+  def create
+    webauthn_credential = WebAuthn::Credential.from_create(JSON.parse(credential_params[:public_key_credential]))
 
     begin
       webauthn_credential.verify(session[:current_registration]["challenge"], user_verification: true)
@@ -29,13 +29,13 @@ def callback
       )
 
       if credential.update(
-        nickname: params[:credential_nickname],
+        nickname: credential_params[:nickname],
         public_key: webauthn_credential.public_key,
         sign_count: webauthn_credential.sign_count
       )
-        render json: { status: "ok" }, status: :ok
+        redirect_to root_path, notice: "Security Key registered successfully"
       else
-        render json: "Couldn't add your Security Key", status: :unprocessable_content
+        redirect_to root_path, alert: "Couldn't register your Security Key"
       end
     rescue WebAuthn::Error => e
       render json: "Verification failed: #{e.message}", status: :unprocessable_content
@@ -51,4 +51,8 @@ def destroy
 
     redirect_to root_path
   end
+
+  def credential_params
+    params.require(:credential).permit(:public_key_credential, :nickname)
+  end
 end

app/controllers/registrations_controller.rb

@@ -4,12 +4,12 @@ class RegistrationsController < ApplicationController
   def new
   end
 
-  def create
-    user = User.new(username: params[:registration][:username])
+  def create_options
+    user = User.new(username: registration_params[:username])
 
     create_options = WebAuthn::Credential.options_for_create(
       user: {
-        name: params[:registration][:username],
+        name: registration_params[:username],
         id: user.webauthn_id
       },
       authenticator_selection: { user_verification: "required" }
@@ -28,8 +28,8 @@ def create
     end
   end
 
-  def callback
-    webauthn_credential = WebAuthn::Credential.from_create(params)
+  def create
+    webauthn_credential = WebAuthn::Credential.from_create(JSON.parse(registration_params[:public_key_credential]))
 
     user = User.new(session[:current_registration]["user_attributes"])
 
@@ -38,22 +38,26 @@ def callback
 
       user.credentials.build(
         external_id: webauthn_credential.id,
-        nickname: params[:credential_nickname],
+        nickname: registration_params[:nickname],
         public_key: webauthn_credential.public_key,
         sign_count: webauthn_credential.sign_count
       )
 
       if user.save
         sign_in(user)
 
-        render json: { status: "ok" }, status: :ok
+        redirect_to root_path, notice: "Security Key registered successfully"
       else
-        render json: "Couldn't register your Security Key", status: :unprocessable_content
+        redirect_to new_registration_path, alert: "Couldn't register your Security Key"
       end
     rescue WebAuthn::Error => e
       render json: "Verification failed: #{e.message}", status: :unprocessable_content
     ensure
       session.delete(:current_registration)
     end
   end
+
+  def registration_params
+    params.require(:registration).permit(:username, :nickname, :public_key_credential)
+  end
 end

app/controllers/sessions_controller.rb

@@ -4,7 +4,8 @@ class SessionsController < ApplicationController
   def new
   end
 
-  def create
+  # rubocop:disable Naming/AccessorMethodName
+  def get_options
     user = User.find_by(username: session_params[:username])
 
     if user
@@ -24,9 +25,10 @@ def create
       end
     end
   end
+  # rubocop:enable Naming/AccessorMethodName
 
-  def callback
-    webauthn_credential = WebAuthn::Credential.from_get(params)
+  def create
+    webauthn_credential = WebAuthn::Credential.from_get(JSON.parse(session_params[:public_key_credential]))
 
     user = User.find_by(username: session[:current_authentication]["username"])
     raise "user #{session[:current_authentication]["username"]} never initiated sign up" unless user
@@ -44,7 +46,7 @@ def callback
       credential.update!(sign_count: webauthn_credential.sign_count)
       sign_in(user)
 
-      render json: { status: "ok" }, status: :ok
+      redirect_to root_path, notice: "Security Key authenticated successfully"
     rescue WebAuthn::Error => e
       render json: "Verification failed: #{e.message}", status: :unprocessable_content
     ensure
@@ -61,6 +63,6 @@ def destroy
   private
 
   def session_params
-    params.require(:session).permit(:username)
+    params.require(:session).permit(:username, :public_key_credential)
   end
 end

app/javascript/application.js

@@ -1,7 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "controllers"
-import "credential"
-import "messenger"
 import Rails from "@rails/ujs";
 
 Rails.start();

app/javascript/controllers/webauthn_credential_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["hiddenCredentialInput"]
+  static values = { optionsUrl: String }
+
+  async create() {
+    try {
+      const optionsResponse = await fetch(this.optionsUrlValue, {
+        method: "POST",
+        body: new FormData(this.element),
+        headers: {
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.getAttribute("content")
+        }
+      });
+
+      const optionsJson = await optionsResponse.json();
+      console.log(optionsJson);
+
+      if (optionsResponse.ok) {
+        console.log("Creating new public key credential...");
+
+        const credential = await navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(optionsJson) });
+        this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+        this.element.submit();
+      } else {
+        alert(optionsJson.errors?.[0] || "Sorry, something wrong happened.");
+      }
+    } catch (error) {
+      alert(error.message || error);
+    }
+  }
+
+  async get() {
+    try {
+      const optionsResponse = await fetch(this.optionsUrlValue, {
+        method: "POST",
+        body: new FormData(this.element),
+        headers: {
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.getAttribute("content")
+        }
+      });
+
+      const optionsJson = await optionsResponse.json();
+      console.log(optionsJson);
+
+      if (optionsResponse.ok) {
+        console.log("Getting public key credential...");
+
+        const credential = await navigator.credentials.get({ publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(optionsJson) })
+        this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+        this.element.submit();
+      } else {
+        alert(optionsJson.errors?.[0] || "Sorry, something wrong happened.");
+      }
+    } catch (error) {
+      alert(error.message || error);
+    }
+  }
+}

app/views/home/index.html.erb

@@ -23,16 +23,24 @@
   </ul>
 
   <div data-controller="add-credential">
-    <%= form_with scope: :credential, url: credentials_path, local: false, data: { action: "ajax:success->add-credential#create" } do |form| %>
+    <%= form_with(
+      scope: :credential,
+      url: credentials_path,
+      data: {
+        controller: "webauthn-credential",
+        action: "webauthn-credential#create:prevent",
+        "webauthn-credential-options-url-value": create_options_credentials_path,
+      }) do |form| %>
       <div class="form-field">
         <div class="mdc-text-field mdc-text-field--fullwidth" data-controller="textfield">
           <%= form.text_field :nickname, class: "mdc-text-field__input", placeholder: "New Security Key nickname", required: true %>
           <div class="mdc-line-ripple"></div>
         </div>
+        <%= form.hidden_field :public_key_credential, data: { "webauthn-credential-target": "hiddenCredentialInput" } %>
       </div>
 
       <div class="center">
-        <%= form.submit "Add Security Key", class: "mdc-button mdc-button--unelevated" %>
+        <button type="submit" class="mdc-button mdc-button--unelevated">Add Security Key</button>
       </div>
     <% end %>
   </div>