Refactor JS

.rubocop.yml

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

app/controllers/credentials_controller.rb

@@ -19,7 +19,7 @@ def create_options
   end
 
   def create
-    webauthn_credential = WebAuthn::Credential.from_create(params)
+    webauthn_credential = WebAuthn::Credential.from_create(JSON.parse(params[:credential][:public_key_credential]))
 
     begin
       webauthn_credential.verify(session[:current_registration]["challenge"], user_verification: true)
@@ -29,13 +29,13 @@ def create
       )
 
       if credential.update(
-        nickname: params[:credential_nickname],
+        nickname: params[:credential][: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

app/controllers/registrations_controller.rb

@@ -29,7 +29,7 @@ def create_options
   end
 
   def create
-    webauthn_credential = WebAuthn::Credential.from_create(params)
+    webauthn_credential = WebAuthn::Credential.from_create(JSON.parse(params[:registration][:public_key_credential]))
 
     user = User.new(session[:current_registration]["user_attributes"])
 
@@ -38,17 +38,17 @@ def create
 
       user.credentials.build(
         external_id: webauthn_credential.id,
-        nickname: params[:credential_nickname],
+        nickname: params[:registration][: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

app/controllers/sessions_controller.rb

@@ -28,7 +28,7 @@ def get_options
   # rubocop:enable Naming/AccessorMethodName
 
   def create
-    webauthn_credential = WebAuthn::Credential.from_get(params)
+    webauthn_credential = WebAuthn::Credential.from_get(JSON.parse(params[:session][:public_key_credential]))
 
     user = User.find_by(username: session[:current_authentication]["username"])
     raise "user #{session[:current_authentication]["username"]} never initiated sign up" unless user
@@ -46,7 +46,7 @@ def create
       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

app/javascript/controllers/add_credential_controller.js

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  async create(event) {
+  static targets = ["hiddenCredentialInput"]
+
+  async create() {
     const optionsResponse = await fetch("/credentials/create_options", {
       method: "POST",
       body: new FormData(this.element),
@@ -14,35 +16,16 @@ export default class extends Controller {
       console.log(data);
 
       if (optionsResponse.ok) {
-        const credential_nickname = event.target.querySelector("input[name='credential[nickname]']").value || "";
-        const callbackUrl = `/credentials?credential_nickname=${credential_nickname}`
-
         navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
-          .then((credential) => this.#submitCredential(encodeURI(callbackUrl), credential))
+          .then((credential) => {
+            console.log("Creating new public key credential...");
+            this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+            this.element.submit();
+          })
           .catch((error) => alert(error));
       } else {
-        alert(data.errors?.[0] || "Unknown error");
+        alert(data.errors?.[0] || "Sorry, something wrong happened.");
       }
     });
-    console.log("Creating new public key credential...");
-  }
-
-  #submitCredential(url, credential) {
-    fetch(url, {
-      method: this.element.method,
-      body: JSON.stringify(credential),
-      headers: {
-        "Content-Type": "application/json",
-        "Accept": "application/json",
-        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.getAttribute("content")
-      },
-      credentials: 'same-origin'
-    }).then(function(response) {
-        if (response.ok) {
-          window.location.replace("/")
-        } else {
-          alert("Sorry, something wrong happened.");
-        }
-      });
   }
  }

app/javascript/controllers/new_registration_controller.js

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  async create(event) {
+  static targets = ["hiddenCredentialInput"]
+
+  async create() {
     const optionsResponse = await fetch("/registration/create_options", {
       method: "POST",
       body: new FormData(this.element),
@@ -14,36 +16,17 @@ export default class extends Controller {
       console.log(data);
 
       if (optionsResponse.ok && data.user) {
-        const credential_nickname = event.target.querySelector("input[name='registration[nickname]']")?.value || "";
-        const registrationUrl = `/registration?credential_nickname=${credential_nickname}`;
-
         navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
-          .then((credential) => this.#submitRegistration(encodeURI(registrationUrl), credential))
+          .then((credential) => {
+            console.log("Creating new public key credential...");
+            this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+            this.element.submit();
+          })
           .catch((error) => alert(error.message || error));
 
-        console.log("Creating new public key credential...");
       } else {
         alert(data.errors?.[0] || "Unknown error");
       }
     });
   }
-
-  #submitRegistration(url, credential) {
-    fetch(url, {
-      method: this.element.method,
-      body: JSON.stringify(credential),
-      headers: {
-        "Content-Type": "application/json",
-        "Accept": "application/json",
-        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.getAttribute("content")
-      },
-      credentials: 'same-origin'
-    }).then(function(response) {
-        if (response.ok) {
-          window.location.replace("/")
-        } else {
-          alert("Sorry, something wrong happened.");
-        }
-      });
-  }
 }

app/javascript/controllers/new_session_controller.js

@@ -1,6 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static targets = ["hiddenCredentialInput"]
+
   async create() {
     const optionsResponse = await fetch("/session/get_options", {
       method: "POST",
@@ -12,32 +14,15 @@ export default class extends Controller {
         console.log(data);
 
         navigator.credentials.get({ publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(data) })
-          .then((credential) => this.#submitSession(credential))
+          .then((credential) => {
+            console.log("Getting public key credential...");
+            this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+            this.element.submit();
+          })
           .catch((error) => alert(error));
-
-        console.log("Getting public key credential...");
       } else {
-        alert(data.errors?.[0] || "Unknown error");
+        alert(data.errors?.[0] || "Sorry, something wrong happened.");
       }
     });
   }
-
-  #submitSession(credential) {
-    fetch(this.element.action, {
-      method: this.element.method,
-      body: JSON.stringify(credential),
-      headers: {
-        "Content-Type": "application/json",
-        "Accept": "application/json",
-        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.getAttribute("content")
-      },
-      credentials: 'same-origin'
-    }).then(function(response) {
-        if (response.ok) {
-          window.location.replace("/")
-        } else {
-          alert("Sorry, something wrong happened.");
-        }
-      });
-  }
 }

app/views/home/index.html.erb

@@ -35,6 +35,7 @@
           <%= 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: { "add-credential-target": "hiddenCredentialInput" } %>
       </div>
 
       <div class="center">

app/views/registrations/new.html.erb

@@ -30,6 +30,7 @@
                 <%= form.text_field :nickname, class: "mdc-text-field__input", placeholder: "Security Key nickname", required: true %>
                 <div class="mdc-line-ripple"></div>
               </div>
+              <%= form.hidden_field :public_key_credential, data: { "new-registration-target": "hiddenCredentialInput" } %>
             </div>
 
             <div class="center">

app/views/sessions/new.html.erb

@@ -18,6 +18,7 @@
                 <%= form.text_field :username, class: "mdc-text-field__input", placeholder: "Username", required: true, autocapitalize: "none", "aria-controls" => "username-helper-text" %>
                 <div class="mdc-line-ripple"></div>
               </div>
+              <%= form.hidden_field :public_key_credential, data: { "new-session-target": "hiddenCredentialInput" } %>
 
               <div class="mdc-text-field-helper-line">
                 <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">