Skip to content

Show separate error message when adding a Passkey twice #2756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
monorkin merged 3 commits into from
Mar 26, 2026
Merged

Show separate error message when adding a Passkey twice #2756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c53e7f7
Show separate error message when adding a Passkey twice
monorkin Mar 26, 2026
b1eb2db
Replace code golf with something sensible
monorkin Mar 26, 2026
96c383f
Only add duplicate messages if they are configured
monorkin Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions app/javascript/lib/action_pack/passkey.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ class PasskeyButton extends HTMLElement {

#handleError(error) {
console.error("Passkey ceremony failed", error)
const cancelled = error.name === "AbortError" || error.name === "NotAllowedError"
this.#showError(cancelled ? "cancelled" : "error")
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, cancelled } }))
const type = errorType(error)
this.#showError(type)
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, type } }))
}
Comment on lines 78 to +83
Copy link

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

InvalidStateError is mapped to the new "duplicate" error type for all passkey ceremonies, but only the registration helper sets a default duplicate message. Combined with the always-rendered (but potentially empty) duplicate div, this can lead to a blank error display. Consider scoping the "duplicate" handling to registration (this.purpose === "registration"), or making #showError fall back to the generic "error" message when the requested error element is missing/empty.

Copilot uses AI. Check for mistakes.
Comment on lines +82 to +83
Copy link

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The passkey:error event payload now includes duplicate, but other dispatch sites in this file still send { error, cancelled } (e.g. conditional mediation). This makes the event detail shape inconsistent for listeners. Consider updating all passkey:error dispatches to include a duplicate boolean (and update the file’s event documentation comment accordingly).

Copilot uses AI. Check for mistakes.

#showError(type) {
Expand Down Expand Up @@ -139,8 +139,8 @@ class PasskeySignInButton extends PasskeyButton {
this.form.submit()
} catch (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 } }))
const type = errorType(error)
this.button.dispatchEvent(new CustomEvent("passkey:error", { bubbles: true, detail: { error, type } }))
}
}
}
Expand All @@ -157,6 +157,15 @@ customElements.define("rails-passkey-sign-in-button", PasskeySignInButton)

// -- Shared helpers ----------------------------------------------------------

function errorType(error) {
switch (error.name) {
case "AbortError":
case "NotAllowedError": return "cancelled"
case "InvalidStateError": return "duplicate"
default: return "error"
}
}

function passkeysAvailable() {
return !!window.PublicKeyCredential
}
Expand Down
2 changes: 1 addition & 1 deletion app/views/my/passkeys/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<% end %>

<footer>
<%= passkey_registration_button my_passkeys_path, options: @registration_options, error: { class: "txt-negative margin-block-half" }, cancellation: { class: "txt-subtle margin-block-half" }, class: "btn btn--link center txt-medium" do %>
<%= passkey_registration_button my_passkeys_path, options: @registration_options, error: { class: "txt-negative margin-block-half" }, cancellation: { class: "txt-subtle margin-block-half" }, duplicate: { class: "txt-negative margin-block-half" }, class: "btn btn--link center txt-medium" do %>
<%= icon_tag "add" %>
<span>Register a passkey</span>
<% end %>
Expand Down
17 changes: 14 additions & 3 deletions lib/action_pack/passkey/form_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
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."
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."

Expand All @@ -33,6 +34,7 @@ def passkey_registration_button(name = nil, url = nil, **options, &block)
component_options, form_options, button_options, error_options = partition_passkey_options(url, options)
error_options[:error][:message] ||= REGISTRATION_ERROR_MESSAGE
error_options[:cancellation][:message] ||= REGISTRATION_CANCELLED_MESSAGE
error_options[:duplicate][:message] ||= REGISTRATION_DUPLICATE_MESSAGE
param = form_options.delete(:param)

content_tag("rails-passkey-registration-button", **component_options.transform_keys { |key| key.to_s.dasherize }) do
Expand Down Expand Up @@ -91,7 +93,7 @@ def partition_passkey_options(url, options)
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: {})
error_options = options.slice(:error, :cancellation, :duplicate).reverse_merge(error: {}, cancellation: {}, duplicate: {})

button_options = options.except(:options, :form, *component_options.keys, *error_options.keys)

Expand All @@ -106,7 +108,7 @@ def default_passkey_challenge_url
end
end

def passkey_error_messages(error: {}, cancellation: {})
def passkey_error_messages(error: {}, cancellation: {}, duplicate: {})
error_message = error[:message]
error_attributes = error.except(:message)
error_attributes[:data] ||= {}
Expand All @@ -117,6 +119,15 @@ def passkey_error_messages(error: {}, cancellation: {})
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)
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)
end

messages
end
end
Loading