chore: fetch options endpoints from javascript

Author: nicolastemciuc

app/assets/javascript/devise/webauthn.js

@@ -4,8 +4,8 @@ export class WebauthnCreateElement extends HTMLElement {
       event.preventDefault();
 
       try {
-        const options = JSON.parse(this.getAttribute('data-options-json'));
-        const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON(options);
+        const response = await fetch(this.getAttribute('data-options-url');
+        const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON(await response.json());
         const credential = await navigator.credentials.create({ publicKey });
 
         this.querySelector('[data-webauthn-target="response"]').value = JSON.stringify(credential);
@@ -37,8 +37,8 @@ export class WebauthnGetElement extends HTMLElement {
       event.preventDefault();
 
       try {
-        const options = JSON.parse(this.getAttribute('data-options-json'));
-        const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON(options);
+        const response = await fetch(this.getAttribute('data-options-url');
+        const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON(await response.json());
         const credential = await navigator.credentials.get({ publicKey });
 
         this.querySelector('[data-webauthn-target="response"]').value = JSON.stringify(credential);

lib/devise/webauthn/helpers/credentials_helper.rb

@@ -9,7 +9,7 @@ def passkey_creation_form_for(resource, form_classes: nil, &block)
           method: :post,
           class: form_classes
         ) do |f|
-          tag.webauthn_create(data: { options_json: create_passkey_options(resource) }) do
+          tag.webauthn_create(data: { options_url: options_for_create_passkeys_path(resource) }) do
             concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
             concat capture(f, &block)
           end
@@ -22,7 +22,7 @@ def login_with_passkey_button(text = nil, session_path:, button_classes: nil, fo
           method: :post,
           class: form_classes
         ) do |f|
-          tag.webauthn_get(data: { options_json: passkey_authentication_options }) do
+          tag.webauthn_get(data: { options_url: options_for_get_passkeys_path(resource) }) do
             concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
 
             concat f.button(text, type: "submit", class: button_classes, &block)
@@ -36,7 +36,7 @@ def security_key_creation_form_for(resource, form_classes: nil, &block)
           method: :post,
           class: form_classes
         ) do |f|
-          tag.webauthn_create(data: { options_json: create_security_key_options(resource) }) do
+          tag.webauthn_create(data: { options_url: options_for_create_second_factor_webauthn_credentials_path(resource) }) do
             concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
             concat capture(f, &block)
           end
@@ -49,7 +49,7 @@ def login_with_security_key_button(text = nil, resource:, button_classes: nil, f
           method: :post,
           class: form_classes
         ) do |f|
-          tag.webauthn_get(data: { options_json: security_key_authentication_options(resource) }) do
+          tag.webauthn_get(data: { options_url: options_for_get_second_factor_webauthn_credentials_path(resource) }) do
             concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
             concat f.button(text, type: "submit", class: button_classes, &block)
           end