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

Merge pull request #2758 from basecamp/fix-yubikeys-getting-stuck-on-sign-in

Browse Source 
Fix yubikeys getting stuck on sign in
This commit is contained in:
Stanko Krtalić
2026-03-27 10:17:09 +01:00
committed by GitHub
parent 6778f9e47d c2fe41d376
commit 0a96799fc7
3 changed files with 70 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/lib/action_pack/passkey.js
+35 -13
View File
@@ -30,6 +30,7 @@ class PasskeyButton extends HTMLElement {
}
disconnectedCallback() {
this.abortConditionalMediation?.()
this.button.removeEventListener("click", this.#perform)
this.button.disabled = false
this.#hideErrors()
@@ -53,6 +54,7 @@ class PasskeyButton extends HTMLElement {
// Arrow function to preserve `this` binding for addEventListener/removeEventListener.
#perform = async () => {
await this.abortConditionalMediation?.()
this.button.disabled = true
this.#hideErrors()
this.button.dispatchEvent(new CustomEvent("passkey:start", { bubbles: true }))
@@ -105,6 +107,9 @@ class PasskeyRegistrationButton extends PasskeyButton {
}
class PasskeySignInButton extends PasskeyButton {
#conditionalMediationController = null
#conditionalMediationPromise = null
get purpose() { return "authentication" }
connectedCallback() {
@@ -116,32 +121,49 @@ class PasskeySignInButton extends PasskeyButton {
return this.getAttribute("mediation")
}
async perform(options, { mediation } = {}) {
return await authenticate(options, { mediation })
async perform(options, { signal, mediation } = {}) {
return await authenticate(options, { signal, mediation })
}
fillForm(passkey) {
fillSignInForm(this.form, passkey)
}
async abortConditionalMediation() {
if (this.#conditionalMediationController) {
this.#conditionalMediationController.abort()
await this.#conditionalMediationPromise
}
}
async #attemptConditionalMediation() {
if (await this.#conditionalMediationAvailable()) {
const options = this.options
this.form.dispatchEvent(new CustomEvent("passkey:start", { bubbles: true }))
try {
await refreshChallenge(options, this.challengeUrl, this.purpose)
const passkey = await this.perform(options, { mediation: this.mediation })
this.#conditionalMediationController = new AbortController()
this.#conditionalMediationPromise = this.#runConditionalMediation(options)
}
}
this.form.dispatchEvent(new CustomEvent("passkey:success", { bubbles: true }))
this.fillForm(passkey)
this.form.submit()
} catch (error) {
console.error("Passkey conditional mediation failed", error)
const type = errorType(error)
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, type } }))
}
async #runConditionalMediation(options) {
try {
await refreshChallenge(options, this.challengeUrl, this.purpose)
const passkey = await this.perform(options, { signal: this.#conditionalMediationController.signal, mediation: this.mediation })
this.form.dispatchEvent(new CustomEvent("passkey:success", { bubbles: true }))
this.fillForm(passkey)
this.form.submit()
} catch (error) {
if (error.name === "AbortError") return
console.error("Passkey conditional mediation failed", error)
const type = errorType(error)
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, type } }))
} finally {
this.#conditionalMediationController = null
this.#conditionalMediationPromise = null
}
}
app/views/sessions/new.html.erb
+8 -1
View File
@@ -22,7 +22,14 @@
</button>
<% end %>
<%= passkey_sign_in_button "Sign in with a passkey", session_passkey_path, options: @authentication_options, mediation: "conditional", class: "btn btn--link center txt-medium", hidden: true %>
<div class="margin-block-start">
<%= passkey_sign_in_button "Sign in with a passkey", session_passkey_path,
options: @authentication_options,
mediation: "conditional",
error: { class: "txt-negative margin-block-half" },
cancellation: { class: "txt-subtle margin-block-half" },
class: "btn btn--plain txt-link center txt-small" %>
</div>
</div>
lib/action_pack/passkey/form_helper.rb
+27 -32
View File
@@ -1,27 +1,18 @@
# View helpers for rendering passkey web components.
#
# Include this module in your helper or ApplicationHelper to get access to:
#
# - +passkey_registration_button+ — render a <rails-passkey-registration-button> web component with
# a form, hidden fields, and error messages for the registration ceremony.
# - +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.
# View helpers for rendering passkey registration and sign-in buttons.
module ActionPack::Passkey::FormHelper
REGISTRATION_ERROR_MESSAGE = "Something went wrong while registering your passkey."
REGISTRATION_CANCELLED_MESSAGE = "Passkey registration was cancelled. Try again when you are ready."
REGISTRATION_DUPLICATE_MESSAGE = "You already have a passkey registered on this device. Remove the existing one first to re-register."
REGISTRATION_DUPLICATE_MESSAGE = "You already have a passkey registered on this device. Remove the existing one first and try again."
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-registration-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+ —
# populated by the web component after the browser credential API resolves.
# Accepts a +label+ string or a block for button content.
# Renders a button for registering a new passkey. Accepts a +label+ string or a block
# for button content.
#
# Options:
# - +options+: WebAuthn creation options (JSON-serializable hash)
# - +challenge_url+: endpoint to refresh the challenge nonce
# - +wrapper+: HTML attributes for the outer web component element
# - +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
@@ -48,15 +39,14 @@ module ActionPack::Passkey::FormHelper
end
end
# Renders a +<rails-passkey-sign-in-button>+ web component containing a form with hidden
# fields for the passkey authentication ceremony and error messages. The form POSTs to +url+
# and includes hidden fields for +id+, +client_data_json+, +authenticator_data+, and +signature+.
# Accepts a +label+ string or a block for button content.
# Renders a button for signing in with a passkey. Accepts a +label+ string or a block
# for button content.
#
# Options:
# - +options+: WebAuthn request options (JSON-serializable hash)
# - +challenge_url+: endpoint to refresh the challenge nonce
# - +mediation+: WebAuthn mediation hint (e.g. +"conditional"+ for autofill-assisted sign in)
# - +wrapper+: HTML attributes for the outer web component element
# - +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
@@ -86,18 +76,21 @@ module ActionPack::Passkey::FormHelper
private
def partition_passkey_options(url, options)
passkey_options = options.fetch(:options, {})
wrapper_options = options.fetch(:wrapper, {})
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, :duplicate).reverse_merge(error: {}, cancellation: {}, duplicate: {})
button_options = options.except(:options, :form, *component_options.keys, *error_options.keys)
button_options = options.except(:options, :form, :wrapper, *component_options.keys, *error_options.keys)
[ component_options, form_options, button_options, error_options ]
[ wrapper_options.merge(component_options), form_options, button_options, error_options ]
end
def default_passkey_challenge_url
@@ -109,25 +102,27 @@ module ActionPack::Passkey::FormHelper
end
def passkey_error_messages(error: {}, cancellation: {}, duplicate: {})
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"
error_message, error_attributes = build_passkey_error_options("error", error)
cancellation_message, cancellation_attributes = build_passkey_error_options("cancelled", cancellation)
messages = tag.div(error_message, hidden: true, **error_attributes) +
tag.div(cancellation_message, hidden: true, **cancellation_attributes)
if duplicate[:message]
duplicate_attributes = duplicate.except(:message)
duplicate_attributes[:data] = { passkey_error: "duplicate" }
messages += tag.div(duplicate[:message], hidden: true, **duplicate_attributes)
duplicate_message, duplicate_attributes = build_passkey_error_options("duplicate", duplicate)
messages += tag.div(duplicate_message, hidden: true, **duplicate_attributes)
end
messages
end
def build_passkey_error_options(type, options)
message = options[:message]
attributes = options.except(:message)
attributes[:data] ||= {}
attributes[:data][:passkey_error] = type
[ message, attributes ]
end
end