bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup form helpers

Browse Source
This commit is contained in:
Stanko K.R.
2026-03-25 15:00:49 +01:00
parent 1983014be6
commit 8e4f9ce5e7
6 changed files with 123 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/credentials.css
-8
View File
@@ -32,12 +32,4 @@
opacity: 0;
}
:is(rails-passkey-creation-button, rails-passkey-sign-in-button) [data-passkey-error] {
display: none;
}
:is(rails-passkey-creation-button, rails-passkey-sign-in-button)[data-passkey-error-state="error"] [data-passkey-error="error"],
:is(rails-passkey-creation-button, rails-passkey-sign-in-button)[data-passkey-error-state="cancelled"] [data-passkey-error="cancelled"] {
display: block;
}
}
app/javascript/lib/action_pack/passkey.js
+55 -71
View File
@@ -14,34 +14,37 @@
// passkey:error — ceremony failed; detail: { error, cancelled }
//
// Attributes (rendered by the Ruby form helpers):
// creation-options — JSON WebAuthn creation options (on rails-passkey-creation-button)
// request-options — JSON WebAuthn request options (on rails-passkey-sign-in-button)
// options — JSON WebAuthn options (creation or request, on both)
// challenge-url — endpoint to refresh the challenge nonce (on both)
// mediation — WebAuthn mediation hint, e.g. "conditional" (on rails-passkey-sign-in-button)
import { register, authenticate } from "lib/action_pack/webauthn"
class PasskeyCreationButton extends HTMLElement {
// Base class for passkey web components. Manages the shared ceremony lifecycle:
// challenge refresh, button state, error display, and event dispatch.
// Subclasses implement `perform()` to run the specific WebAuthn ceremony
// and `fillForm()` to populate hidden fields before submission.
class PasskeyButton extends HTMLElement {
connectedCallback() {
this.button.addEventListener("click", this.#create)
this.button.addEventListener("click", this.#perform)
}
disconnectedCallback() {
this.button.removeEventListener("click", this.#create)
this.button.removeEventListener("click", this.#perform)
this.button.disabled = false
delete this.dataset.passkeyErrorState
this.#hideErrors()
}
get button() {
return this.querySelector("[data-passkey='create']")
return this.querySelector("[data-passkey]")
}
get form() {
return this.querySelector("form")
}
get creationOptions() {
return JSON.parse(this.getAttribute("creation-options"))
get options() {
return JSON.parse(this.getAttribute("options"))
}
get challengeUrl() {
@@ -49,20 +52,22 @@ class PasskeyCreationButton extends HTMLElement {
}
// Arrow function to preserve `this` binding for addEventListener/removeEventListener.
#create = async () => {
#perform = async () => {
this.button.disabled = true
this.#hideErrors()
this.button.dispatchEvent(new CustomEvent("passkey:start", { bubbles: true }))
try {
if (!passkeysAvailable()) throw new Error("Passkeys are not supported by this browser")
if (!this.creationOptions) throw new Error("Missing passkey creation options")
const options = this.options
if (!passkeysAvailable()) throw new Error("Passkeys are not supported by this browser")
if (!options) throw new Error("Missing passkey options")
const options = this.creationOptions
await refreshChallenge(options, this.challengeUrl)
const passkey = await register(options)
const passkey = await this.perform(options)
this.button.dispatchEvent(new CustomEvent("passkey:success", { bubbles: true }))
fillCreateForm(this.form, passkey)
this.fillForm(passkey)
this.form.submit()
} catch (error) {
this.button.disabled = false
@@ -71,97 +76,76 @@ class PasskeyCreationButton extends HTMLElement {
}
#handleError(error) {
console.error("Passkey ceremony failed", error)
const cancelled = error.name === "AbortError" || error.name === "NotAllowedError"
this.dataset.passkeyErrorState = cancelled ? "cancelled" : "error"
this.#showError(cancelled ? "cancelled" : "error")
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, cancelled } }))
}
#showError(type) {
const el = this.querySelector(`[data-passkey-error="${type}"]`)
if (el) el.hidden = false
}
#hideErrors() {
for (const el of this.querySelectorAll("[data-passkey-error]")) el.hidden = true
}
}
class PasskeySignInButton extends HTMLElement {
class PasskeyCreationButton extends PasskeyButton {
async perform(options) {
return await register(options)
}
fillForm(passkey) {
fillCreateForm(this.form, passkey)
}
}
class PasskeySignInButton extends PasskeyButton {
connectedCallback() {
this.button.addEventListener("click", this.#signIn)
super.connectedCallback()
if (this.mediation === "conditional") this.#attemptConditionalMediation()
}
disconnectedCallback() {
this.button.removeEventListener("click", this.#signIn)
this.button.disabled = false
delete this.dataset.passkeyErrorState
}
get button() {
return this.querySelector("[data-passkey='sign_in']")
}
get form() {
return this.querySelector("form")
}
get requestOptions() {
return JSON.parse(this.getAttribute("request-options"))
}
get challengeUrl() {
return this.getAttribute("challenge-url")
}
get mediation() {
return this.getAttribute("mediation")
}
// Arrow function to preserve `this` binding for addEventListener/removeEventListener.
#signIn = async () => {
this.button.disabled = true
this.button.dispatchEvent(new CustomEvent("passkey:start", { bubbles: true }))
try {
if (!passkeysAvailable()) throw new Error("Passkeys are not supported by this browser")
if (!this.requestOptions) throw new Error("Missing passkey request options")
const options = this.requestOptions
await refreshChallenge(options, this.challengeUrl)
const passkey = await authenticate(options)
this.button.dispatchEvent(new CustomEvent("passkey:success", { bubbles: true }))
fillSignInForm(this.form, passkey)
this.form.submit()
} catch (error) {
this.button.disabled = false
this.#handleError(error)
async perform(options, { mediation } = {}) {
return await authenticate(options, { mediation })
}
fillForm(passkey) {
fillSignInForm(this.form, passkey)
}
async #attemptConditionalMediation() {
if (await this.#conditionalMediationAvailable()) {
const options = this.requestOptions
const options = this.options
this.form.dispatchEvent(new CustomEvent("passkey:start", { bubbles: true }))
try {
await refreshChallenge(options, this.challengeUrl)
const passkey = await authenticate(options, { mediation: this.mediation })
const passkey = await this.perform(options, { mediation: this.mediation })
this.form.dispatchEvent(new CustomEvent("passkey:success", { bubbles: true }))
fillSignInForm(this.form, passkey)
this.fillForm(passkey)
this.form.submit()
} catch (error) {
this.#handleError(error)
console.error("Passkey conditional mediation failed", error)
const cancelled = error.name === "AbortError" || error.name === "NotAllowedError"
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, cancelled } }))
}
}
}
async #conditionalMediationAvailable() {
return this.requestOptions &&
return this.options &&
passkeysAvailable() &&
await window.PublicKeyCredential.isConditionalMediationAvailable?.()
}
#handleError(error) {
const cancelled = error.name === "AbortError" || error.name === "NotAllowedError"
this.dataset.passkeyErrorState = cancelled ? "cancelled" : "error"
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, cancelled } }))
}
}
customElements.define("rails-passkey-creation-button", PasskeyCreationButton)
app/views/my/passkeys/index.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<% end %>
<footer>
<%= passkey_creation_button my_passkeys_path, options: @creation_options, class: "btn btn--link center txt-medium" do %>
<%= passkey_creation_button my_passkeys_path, options: @creation_options, error: { class: "txt-negative" }, cancellation: { class: "txt-subtle" }, class: "btn btn--link center txt-medium" do %>
<%= icon_tag "add" %>
<span>Register a passkey</span>
<% end %>
lib/action_pack/passkey/form_helper.rb
+61 -36
View File
@@ -7,6 +7,11 @@
# - +passkey_sign_in_button+ — render a <rails-passkey-sign-in-button> web component with
# a form, hidden fields, and error messages for the authentication ceremony.
module ActionPack::Passkey::FormHelper
CREATION_ERROR_MESSAGE = "Something went wrong while registering your passkey."
CREATION_CANCELLED_MESSAGE = "Passkey registration was cancelled. Try again when you are ready."
SIGN_IN_ERROR_MESSAGE = "Something went wrong while signing in with your passkey."
SIGN_IN_CANCELLED_MESSAGE = "Passkey sign in was cancelled. Try again when you are ready."
# Renders a +<rails-passkey-creation-button>+ web component containing a form with hidden
# fields for the passkey registration ceremony and error messages. The form POSTs to +url+ and
# includes hidden fields for +client_data_json+, +attestation_object+, and +transports+ —
@@ -16,30 +21,28 @@ module ActionPack::Passkey::FormHelper
# Options:
# - +options+: WebAuthn creation options (JSON-serializable hash)
# - +challenge_url+: endpoint to refresh the challenge nonce
# - +param+: the form parameter namespace (default: +:passkey+)
# - +error_message+: message shown on ceremony failure
# - +cancelled_message+: message shown when ceremony is cancelled
# - +form+: additional HTML attributes for the +<form>+ tag
# - +form+: additional HTML attributes for the +<form>+ tag. Supports a +:param+ key
# to set the form parameter namespace (default: +:passkey+)
# - +error+: HTML attributes for the error message +<div>+. Supports a +:message+ key
# to override the default error text
# - +cancellation+: HTML attributes for the cancellation message +<div>+. Supports a
# +:message+ key to override the default cancellation text
# - All other options are passed to the +<button>+ tag
def passkey_creation_button(name = nil, url = nil, options:, challenge_url: nil, param: :passkey, error_message: "Something went wrong while registering your passkey.", cancelled_message: "Passkey registration was cancelled. Try again when you are ready.", form: {}, **button_options, &block)
def passkey_creation_button(name = nil, url = nil, **options, &block)
url, name = name, block ? capture(&block) : nil if block_given?
form_options = form.reverse_merge(method: :post, action: url, class: "button_to")
component_options, form_options, button_options, error_options = extract_passkey_component_options(url, options)
error_options[:error][:message] ||= CREATION_ERROR_MESSAGE
error_options[:cancellation][:message] ||= CREATION_CANCELLED_MESSAGE
param = form_options.delete(:param)
component_options = {
"creation-options": options.to_json,
"challenge-url": challenge_url || default_passkey_challenge_url
}
tag.send(:"rails-passkey-creation-button", **component_options) do
form_tag = tag.form(**form_options) do
content_tag("rails-passkey-creation-button", **component_options.transform_keys { |key| key.to_s.dasherize }) do
tag.form(**form_options) do
hidden_field_tag(:authenticity_token, form_authenticity_token) +
hidden_field_tag("#{param}[client_data_json]", nil, id: nil, data: { passkey_field: "client_data_json" }) +
hidden_field_tag("#{param}[attestation_object]", nil, id: nil, data: { passkey_field: "attestation_object" }) +
hidden_field_tag("#{param}[transports][]", nil, id: nil, data: { passkey_field: "transports" }) +
tag.button(name, type: :button, data: { passkey: "create" }, **button_options)
end
form_tag + passkey_error_messages(error_message, cancelled_message)
end + passkey_error_messages(**error_options)
end
end
@@ -51,37 +54,50 @@ module ActionPack::Passkey::FormHelper
# Options:
# - +options+: WebAuthn request options (JSON-serializable hash)
# - +challenge_url+: endpoint to refresh the challenge nonce
# - +param+: the form parameter namespace (default: +:passkey+)
# - +mediation+: WebAuthn mediation hint (e.g. +"conditional"+ for autofill-assisted sign in)
# - +error_message+: message shown on ceremony failure
# - +cancelled_message+: message shown when ceremony is cancelled
# - +form+: additional HTML attributes for the +<form>+ tag
# - +form+: additional HTML attributes for the +<form>+ tag. Supports a +:param+ key
# to set the form parameter namespace (default: +:passkey+)
# - +error+: HTML attributes for the error message +<div>+. Supports a +:message+ key
# to override the default error text
# - +cancellation+: HTML attributes for the cancellation message +<div>+. Supports a
# +:message+ key to override the default cancellation text
# - All other options are passed to the +<button>+ tag
def passkey_sign_in_button(name = nil, url = nil, options:, challenge_url: nil, param: :passkey, mediation: nil, error_message: "Something went wrong while signing in with your passkey.", cancelled_message: "Passkey sign in was cancelled. Try again when you are ready.", form: {}, **button_options, &block)
def passkey_sign_in_button(name = nil, url = nil, **options, &block)
url, name = name, block ? capture(&block) : nil if block_given?
form_options = form.reverse_merge(method: :post, action: url, class: "button_to")
component_options, form_options, button_options, error_options = extract_passkey_component_options(url, options)
error_options[:error][:message] ||= SIGN_IN_ERROR_MESSAGE
error_options[:cancellation][:message] ||= SIGN_IN_CANCELLED_MESSAGE
param = form_options.delete(:param)
component_options = {
"request-options": options.to_json,
"challenge-url": challenge_url || default_passkey_challenge_url
}
component_options[:mediation] = mediation if mediation
tag.send(:"rails-passkey-sign-in-button", **component_options) do
form_tag = tag.form(**form_options) do
content_tag("rails-passkey-sign-in-button", **component_options.transform_keys { |key| key.to_s.dasherize }) do
tag.form(**form_options) do
hidden_field_tag(:authenticity_token, form_authenticity_token) +
hidden_field_tag("#{param}[id]", nil, id: nil, data: { passkey_field: "id" }) +
hidden_field_tag("#{param}[client_data_json]", nil, id: nil, data: { passkey_field: "client_data_json" }) +
hidden_field_tag("#{param}[authenticator_data]", nil, id: nil, data: { passkey_field: "authenticator_data" }) +
hidden_field_tag("#{param}[signature]", nil, id: nil, data: { passkey_field: "signature" }) +
tag.button(name, type: :button, data: { passkey: "sign_in" }, **button_options)
end
form_tag + passkey_error_messages(error_message, cancelled_message)
end + passkey_error_messages(**error_options)
end
end
private
def extract_passkey_component_options(url, options)
passkey_options = options.fetch(:options, {})
component_options = options
.slice(:challenge_url, :mediation)
.reverse_merge(challenge_url: default_passkey_challenge_url, options: passkey_options.to_json(except: :challenge))
form_options = options
.fetch(:form, {})
.reverse_merge(method: :post, action: url, class: "button_to", param: :passkey)
error_options = options.slice(:error, :cancellation).reverse_merge(error: {}, cancellation: {})
button_options = options.except(:options, :form, *component_options.keys, *error_options.keys)
[ component_options, form_options, button_options, error_options ]
end
def default_passkey_challenge_url
if challenge_url = Rails.configuration.action_pack.passkey.challenge_url
instance_exec(&challenge_url)
@@ -90,8 +106,17 @@ module ActionPack::Passkey::FormHelper
end
end
def passkey_error_messages(error_message, cancelled_message)
tag.p(error_message, data: { passkey_error: "error" }, class: "txt-negative") +
tag.p(cancelled_message, data: { passkey_error: "cancelled" }, class: "txt-subtle")
def passkey_error_messages(error: {}, cancellation: {})
error_message = error[:message]
error_attributes = error.except(:message)
error_attributes[:data] ||= {}
error_attributes[:data][:passkey_error] = "error"
cancellation_message = cancellation[:message]
cancellation_attributes = cancellation.except(:message)
cancellation_attributes[:data] ||= {}
cancellation_attributes[:data][:passkey_error] = "cancelled"
tag.div(error_message, hidden: true, **error_attributes) + tag.div(cancellation_message, hidden: true, **cancellation_attributes)
end
end
lib/action_pack/web_authn/public_key_credential/creation_options.rb
+2 -2
View File
@@ -67,7 +67,7 @@ class ActionPack::WebAuthn::PublicKeyCredential::CreationOptions < ActionPack::W
# Returns a Hash suitable for JSON serialization and passing to the
# WebAuthn JavaScript API.
def as_json(*)
def as_json(options = {})
json = {
challenge: challenge,
rp: relying_party.as_json,
@@ -96,7 +96,7 @@ class ActionPack::WebAuthn::PublicKeyCredential::CreationOptions < ActionPack::W
json[:attestation] = attestation.to_s
end
json
json.as_json(options)
end
private
lib/action_pack/web_authn/public_key_credential/request_options.rb
+2 -2
View File
@@ -34,13 +34,13 @@ class ActionPack::WebAuthn::PublicKeyCredential::RequestOptions < ActionPack::We
# Returns a Hash suitable for JSON serialization and passing to the
# WebAuthn JavaScript API.
def as_json(*)
def as_json(options = {})
{
challenge: challenge,
rpId: relying_party.id,
allowCredentials: credentials.map { |credential| allow_credential_json(credential) },
userVerification: user_verification.to_s
}
}.as_json(options)
end
private