devise-webauthn 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8083a823cce7edf858475a062ea009193c3a86cf9b4a821db1dd2715430580d4
-  data.tar.gz: df00de569113a642c13f87cc4f6c93836acb5c5df1ef1cecfe492b01247a17aa
+  metadata.gz: aaa4817ea2af9200fa03ddf48357462fee35e64624b14d0de881b7805af7a34d
+  data.tar.gz: 88b7affbb03be29d61834f20924db27ecd8623c0f7c5463ce59554ebd727dcd7
 SHA512:
-  metadata.gz: ce764390d121fc68bd1732d655700ccae382ced384a24f350256f2bb633910d0038972637a8e9f4f5e512d0e13030c53851f7288733fb233e8d86fe00ab5c8b8
-  data.tar.gz: d2072d245253437be40005c81b9879f22f0a7c0fa3e0e3cd39b9b03f812aa05cdcd7404cbd4123afac473785364472f3e025dbdf025ae3f74af117854dcbca38
+  metadata.gz: 963eaa9ff4ce30759da2bb0b90fd2e8af1118c3c51caad4b574b7e28873033cdf16cdc9a91c29d21a4be2676e78255665df5db50d524c29a9321dfc864490a78
+  data.tar.gz: 758cb30bc99014c144ad7b8467cb9a24da62c7c0a1c7db1b7565436973ab145041ad3ac8eabf1951b648e56caa5682459ec0ebaf5f0fd21f0b8b07341c95b30a

data/.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

data/.github/workflows/ruby.yml

@@ -8,7 +8,7 @@ jobs:
 
     steps:
       - name: Check out repository code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -36,8 +36,12 @@ jobs:
           - rails_8_0
           - rails_7_2
           - rails_7_1
+          - devise_5_0
 
         exclude:
+          - ruby: 3.2
+            gemfile: rails_edge
+
           - ruby: 3.1
             gemfile: rails_edge
           - ruby: 3.1
@@ -69,7 +73,7 @@ jobs:
 
     steps:
     - name: Check out repository code
-      uses: actions/checkout@v5
+      uses: actions/checkout@v6
 
     - name: Set up Ruby
       uses: ruby/setup-ruby@v1

data/.rubocop.yml

@@ -7,6 +7,7 @@ AllCops:
   NewCops: enable
   Exclude:
     - "spec/internal/**/*"
+    - "spec/tmp/**/*"
     - "vendor/**/*"
     - "gemfiles/**/*"
     - "lib/devise/strategies/database_authenticatable.rb"

data/Appraisals

@@ -5,19 +5,19 @@ appraise "rails-edge" do
 end
 
 appraise "rails-8_1" do
-  gem "rails", "~> 8.1"
+  gem "rails", "~> 8.1.x"
 end
 
 appraise "rails-8_0" do
-  gem "rails", "~> 8.0"
+  gem "rails", "~> 8.0.x"
 end
 
 appraise "rails-7_2" do
-  gem "rails", "~> 7.2"
+  gem "rails", "~> 7.2.x"
 end
 
 appraise "rails-7_1" do
-  gem "rails", "~> 7.1"
+  gem "rails", "~> 7.1.x"
 
   gem "capybara", "~> 3.39"
   gem "importmap-rails", "~> 2.0"
@@ -27,3 +27,17 @@ appraise "rails-7_1" do
   gem "rspec-rails", "~> 7.1"
   gem "sqlite3", "~> 1.7"
 end
+
+appraise "devise-5_0" do
+  gem "devise", "~> 5.0.0.rc"
+
+  gem "rails", ">= 7.1"
+  gem "capybara", "~> 3.39"
+  gem "importmap-rails", "~> 2.0"
+  gem "pry-byebug", "~> 3.10"
+  install_if "-> { RUBY_VERSION < \"3.0\" }" do
+    gem "rack", "~> 2.2"
+  end
+  gem "rspec-rails", ">= 7.1"
+  gem "sqlite3", ">= 1.6", "!= 1.7.0", "!= 1.7.1", "!= 1.7.2", "!= 1.7.3"
+end

data/CHANGELOG.md

@@ -2,31 +2,73 @@
 
 ## Unreleased
 
+## [v0.3.0](https://github.com/cedarcode/devise-webauthn/compare/v0.2.2...v0.3.0/) - 2026-01-16
+
+### Added
+
+- WebAuthn JavaScript is now bundled as engine assets using custom HTML elements (`<webauthn-create>`, `<webauthn-get>`) instead of generating a Stimulus controller into the host application. [#84](https://github.com/cedarcode/devise-webauthn/pull/84) [@santiagorodriguez96]
+- Add endpoint to `SecondFactorWebauthnCredentialsController` for "upgrading" second factor webauthn credentials (i. e., security keys) to passkeys. [#80](https://github.com/cedarcode/devise-webauthn/pull/80) [@nicolastemciuc]
+
+### Changed
+
+- Loosen `devise` upper constraint to allow for v5. [#94](https://github.com/cedarcode/devise-webauthn/pull/94) [@santiagorodriguez96]
+- BREAKING!: Our [Form helpers](https://github.com/cedarcode/devise-webauthn/blob/355a6836315439f71265bb368bff4e8067033072/lib/devise/webauthn/helpers/credentials_helper.rb#L7-L58) now use the bundled WebAuthn JS asset now instead of the Stimulus controllers, so they expect it to be included in your application. [#84](https://github.com/cedarcode/devise-webauthn/pull/84) [@santiagorodriguez96]
+  - Previously generated Stimulus controller for handling WebAuthn client logic are no longer generated.
+  - Stimulus is no longer needed for this engine to work.
+- Make helpers for generating WebAuthn options public methods. [#106](https://github.com/cedarcode/devise-webauthn/pull/106) [@santiagorodriguez96]
+
+### Fixed
+
+- Fix `Remember me` checkbox not honored when going through the 2FA challenge flow. [#87](https://github.com/cedarcode/devise-webauthn/pull/87) [@santiagorodriguez96]
+
+## [v0.2.2](https://github.com/cedarcode/devise-webauthn/compare/v0.2.1...v0.2.2/) - 2025-12-11
+
+### Added
+
+- Update controllers and views generators to generate 2FA-related controllers and views. [#75](https://github.com/cedarcode/devise-webauthn/pull/75) [@santiagorodriguez96]
+- Add flash messages when removing credentials. [#78](https://github.com/cedarcode/devise-webauthn/pull/78) [@nicolastemciuc]
+
+### Changed
+
+- Generate webauthn credentials table with not null constraints in attributes that must be present. [#70](https://github.com/cedarcode/devise-webauthn/pull/70) [@santiagorodriguez96]
+
 ## [v0.2.1](https://github.com/cedarcode/devise-webauthn/compare/v0.2.0...v0.2.1/) - 2025-12-10
 
-- Add form helpers for security key registration and 2FA authentication.
-- Fix incorrect call to `resource_name` instead of using passed `resource` param in `login_with_security_key_button` helper.
-- Fix `NoMethodError` when calling `second_factor_enabled?` on resources without 2FA.
-- Avoid assuming `email` as the authentication key of the resource in form helpers.
+### Added
+
+- Add form helpers for security key registration and 2FA authentication. [#52](https://github.com/cedarcode/devise-webauthn/pull/52) [@santiagorodriguez96]
+
+### Fixed
+
+- Fix incorrect call to `resource_name` instead of using passed `resource` param in `login_with_security_key_button` helper. [#65](https://github.com/cedarcode/devise-webauthn/pull/65) [@santiagorodriguez96]
+- Fix `NoMethodError` when calling `second_factor_enabled?` on resources without 2FA. [#62](https://github.com/cedarcode/devise-webauthn/pull/62) [@nicolastemciuc]
+- Avoid assuming `email` as the authentication key of the resource in form helpers. [#66](https://github.com/cedarcode/devise-webauthn/pull/66) [@santiagorodriguez96]
 
 ## [v0.2.0](https://github.com/cedarcode/devise-webauthn/compare/v0.1.2...v0.2.0/) - 2025-12-03
 
-- Add new `webauthn_two_factor_authenticatable` module for enabling 2FA using WebAuthn credentials.
+### Added
+
+- Add new `webauthn_two_factor_authenticatable` module for enabling 2FA using WebAuthn credentials. [#49](https://github.com/cedarcode/devise-webauthn/pull/49) [@santiagorodriguez96]
 
 ## [v0.1.2](https://github.com/cedarcode/devise-webauthn/compare/v0.1.1...v0.1.2/) - 2025-12-03
 
 ### Fixed
 
-- Fixed sign in with passkey for resources with name different from "User"
+- Fixed sign in with passkey for resources with name different from "User". [#47](https://github.com/cedarcode/devise-webauthn/pull/47) [@joaquintomas2003], [@santiagorodriguez96]
 
 ## [v0.1.1](https://github.com/cedarcode/devise-webauthn/compare/v0.1.0...v0.1.1/) - 2025-11-13
 
 ### Changed
 
-- Updated gemspec metadata.
+- Updated gemspec metadata. [#43](https://github.com/cedarcode/devise-webauthn/pull/43) [@joaquintomas2003]
 
 ## [v0.1.0](https://github.com/cedarcode/devise-webauthn/compare/v0.0.0...v0.1.0/) - 2025-11-12
 
 ### Initial release
 
-- Provides passkey authentication for apps using Devise.
+- Provides passkey authentication for apps using Devise. [@joaquintomas2003], [@nicolastemciuc], [@RenzoMinelli], [@santiagorodriguez96]
+
+[@RenzoMinelli]: https://github.com/RenzoMinelli
+[@joaquintomas2003]: https://github.com/joaquintomas2003
+[@nicolastemciuc]: https://github.com/nicolastemciuc
+[@santiagorodriguez96]: https://github.com/santiagorodriguez96

data/Gemfile

@@ -7,9 +7,10 @@ git_source(:github) { |repo_name| "https://github.com/#{repo_name}" }
 # Specify your gem's dependencies in devise-webauthn.gemspec
 gemspec
 
-gem "appraisal", "~> 2.5"
+gem "appraisal", "~> 2.5", require: false
 gem "capybara", "~> 3.40"
 gem "combustion", "~> 1.3"
+gem "devise", "~> 4.9"
 gem "importmap-rails", "~> 2.2"
 gem "propshaft", "~> 1.2"
 gem "pry-byebug", "~> 3.11"
@@ -21,4 +22,3 @@ gem "rubocop-rails", "~> 2.32"
 gem "rubocop-rspec", "~> 3.6"
 gem "selenium-webdriver"
 gem "sqlite3", "~> 2.7"
-gem "stimulus-rails", "~> 1.3"

data/Gemfile.lock

@@ -1,8 +1,8 @@
 PATH
   remote: .
   specs:
-    devise-webauthn (0.2.1)
-      devise (~> 4.9)
+    devise-webauthn (0.3.0)
+      devise (>= 4.9)
       webauthn (~> 3.0)
 
 GEM
@@ -303,8 +303,6 @@ GEM
       websocket (~> 1.0)
     sqlite3 (2.7.3)
       mini_portile2 (~> 2.8.0)
-    stimulus-rails (1.3.4)
-      railties (>= 6.0.0)
     stringio (3.1.7)
     thor (1.4.0)
     timeout (0.4.3)
@@ -345,6 +343,7 @@ DEPENDENCIES
   appraisal (~> 2.5)
   capybara (~> 3.40)
   combustion (~> 1.3)
+  devise (~> 4.9)
   devise-webauthn!
   importmap-rails (~> 2.2)
   propshaft (~> 1.2)
@@ -357,7 +356,6 @@ DEPENDENCIES
   rubocop-rspec (~> 3.6)
   selenium-webdriver
   sqlite3 (~> 2.7)
-  stimulus-rails (~> 1.3)
 
 BUNDLED WITH
    2.7.1

data/README.md

@@ -6,9 +6,7 @@ Devise::Webauthn is a [Devise](https://github.com/heartcombo/devise) extension t
 ## Requirements
 
 - **Ruby**: 2.7+
-- **Stimulus Rails**: This gem requires [stimulus-rails](https://github.com/hotwired/stimulus-rails) to be installed and configured in your application.
-> **Note:** Stimulus Rails is needed for the generated code to work out of the box.  
-> If you prefer not to have this dependency, you’ll need to manually implement the JavaScript logic for WebAuthn interactions.
+- **JavaScript**: This gem includes WebAuthn JavaScript as custom HTML elements. You'll need to import the JavaScript file in your application.
 
 ## Installation
 
@@ -31,7 +29,7 @@ Or install it yourself as:
 First, ensure you have Devise set up in your Rails application. For a full guide on setting up Devise, refer to the [Devise documentation](https://github.com/heartcombo/devise?tab=readme-ov-file#getting-started).
 Then, follow these steps to integrate Devise::Webauthn:
 1. **Run Devise::Webauthn Generator:**
-   Run the generator to set up necessary configurations, migrations, and Stimulus controller:
+   Run the generator to set up necessary configurations and migrations:
    ```bash
    $ bin/rails generate devise:webauthn:install
    ```
@@ -45,7 +43,7 @@ Then, follow these steps to integrate Devise::Webauthn:
     - Create the WebAuthn initializer (`config/initializers/webauthn.rb`)
     - Generate the `WebauthnCredential` model and migration
     - Add `webauthn_id` field to your devise model (e.g., `User`)
-    - Install the Stimulus controller
+    - Configure JavaScript loading for your application (see [JavaScript Setup](#javascript-setup))
 
 2. **Run Migrations:**
    After running the generator, execute the migrations to update your database schema:
@@ -76,6 +74,29 @@ Then, follow these steps to integrate Devise::Webauthn:
     end
     ```
 
+5. **Include bundled WebAuthn JavaScript in your application:**
+   The install generator automatically configures JavaScript loading based on your setup:
+
+   **For importmap-rails:**
+   - Adds `pin "devise/webauthn", to: "devise/webauthn.js"` to `config/importmap.rb`
+   - Adds `import "devise/webauthn"` to `app/javascript/application.js`
+
+   **For node setups (esbuild, Bun, etc.):**
+   - Adds `<%= javascript_include_tag "devise/webauthn" %>` to your application layout
+
+   If the automatic setup doesn't work for your configuration, you can manually include the JavaScript:
+   ```erb
+   <%= javascript_include_tag "devise/webauthn" %>
+   ```
+
+#### Behavior
+
+When the form is submitted:
+1. The default form submission is prevented
+2. The browser's WebAuthn prompt is triggered with the provided options
+3. Upon successful authentication, the credential response is stored in the hidden input
+4. The form is submitted with the credential data
+
 ## How It Works
 
 ### Passkey authentication
@@ -138,6 +159,90 @@ To add a passkeys creation form:
 <% end %>
 ```
 
+### Handling unsupported WebAuthn
+
+The custom elements check for WebAuthn API support when they connect to the DOM. If the browser doesn't support WebAuthn, a `webauthn:unsupported` event is dispatched and the form submission handler is not attached.
+
+```javascript
+document.addEventListener('webauthn:unsupported', (event) => {
+  const { action } = event.detail; // 'create' or 'get'
+
+  // Hide the WebAuthn form and show a message
+  hideWebauthnFormWithMessage('Your browser does not support WebAuthn');
+});
+```
+
+### Customizing Javascript Error Handling
+
+By default, WebAuthn errors during registration or authentication are displayed using the browser's `alert()` dialog. You can customize this behavior by listening to the `webauthn:prompt:error` event.
+
+#### Listening for WebAuthn Errors
+
+The custom elements dispatch a `webauthn:prompt:error` event whenever an error occurs during the WebAuthn prompt interaction (registration or authentication). You can listen for this event and provide custom error handling:
+
+```javascript
+document.addEventListener('webauthn:prompt:error', (event) => {
+  event.preventDefault(); // Prevent the default alert
+
+  const { error, action } = event.detail;
+
+  // Your custom error handling
+  console.error(`WebAuthn ${action} failed:`, error);
+  showFlashMessage(error.message, 'error');
+});
+```
+
+#### Event Details
+
+The event includes the following information in `event.detail`:
+- `error`: The error object thrown during the WebAuthn operation
+- `action`: Either `"create"` (for registration) or `"get"` (for authentication)
+
+#### Handling Specific Error Types
+
+WebAuthn operations can fail for various reasons. Here are some common error types you might want to handle:
+
+```javascript
+document.addEventListener('webauthn:prompt:error', (event) => {
+  event.preventDefault();
+
+  const { error, action } = event.detail;
+
+  switch (error.name) {
+    case 'NotAllowedError':
+      // User cancelled the operation or timeout
+      showFlashMessage('Operation cancelled or timed out', 'warning');
+      break;
+
+    default:
+      // Generic error message
+      showFlashMessage(`Authentication error: ${error.message}`, 'error');
+  }
+});
+```
+
+#### Different Handling for Registration vs Authentication
+
+You can provide different error handling based on whether the error occurred during registration or authentication:
+
+```javascript
+document.addEventListener('webauthn:prompt:error', (event) => {
+  event.preventDefault();
+
+  const { error, action } = event.detail;
+
+  if (action === 'create') {
+    // Handle registration errors
+    handleRegistrationError(error);
+  } else if (action === 'get') {
+    // Handle authentication errors
+    handleAuthenticationError(error);
+  }
+});
+```
+
+**Note:** If you don't call `event.preventDefault()`, the default `alert()` will still be shown.
+
 ### Customizing Controllers
 Similar to [controllers customization on Devise](https://github.com/heartcombo/devise?tab=readme-ov-file#configuring-controllers), you can customize the Devise::Webauthn controllers.
 
@@ -155,6 +260,54 @@ devise_for :users, controllers: {
 
 3. Change or extend the generated controllers as needed.
 
+### Manually implementing WebAuthn forms
+
+The gem provides two custom HTML elements for WebAuthn operations. While the [form helpers](#helper-methods) handle this automatically, you can use these elements directly for custom implementations.
+
+#### `<webauthn-create>`
+
+Used for registering new credentials (passkeys or security keys).
+
+```html
+<form action="/passkeys" method="post">
+  <webauthn-create data-options-json="<%= create_passkey_options(@user).to_json %>">
+    <input type="hidden" name="public_key_credential" data-webauthn-target="response">
+    <input type="text" name="name" placeholder="Passkey name">
+    <button type="submit">Create Passkey</button>
+  </webauthn-create>
+</form>
+```
+
+**Requirements:**
+- Must be wrapped in a `<form>` element
+  - The form's action should point to the appropriate endpoint – you can use the provided url helpers:
+    - For creating passkeys: `passkeys_path(resource_name)`
+    - For creating 2FA security keys: `second_factor_webauthn_credentials_path(resource_name)`
+- Requires a `data-options-json` attribute containing JSON-serialized WebAuthn creation options
+- Must contain a hidden input with `data-webauthn-target="response"` to store the credential response
+- Must contain the submit button — the element intercepts form submission, calls the WebAuthn API, stores the credential in the hidden input, and then re-submits the form
+
+#### `<webauthn-get>`
+
+Used for authenticating with existing credentials.
+
+```html
+<form action="/users/sign_in" method="post">
+  <webauthn-get data-options-json="<%= passkey_authentication_options.to_json %>">
+    <input type="hidden" name="public_key_credential" data-webauthn-target="response">
+    <button type="submit">Sign in with Passkey</button>
+  </webauthn-get>
+</form>
+```
+
+**Requirements:**
+- Must be wrapped in a `<form>` element
+    - The form's action should point to the appropriate endpoint – you can use the provided url helpers:
+        - For passkey sign-in: `session_path(resource_name)`
+        - For 2FA with WebAuthn: `two_factor_authentication_path(resource_name)`
+- Requires a `data-options-json` attribute containing JSON-serialized WebAuthn request options
+- Must contain a hidden input with `data-webauthn-target="response"` to store the credential response
+- Must contain the submit button — the element intercepts form submission, calls the WebAuthn API, stores the credential in the hidden input, and then re-submits the form
 
 ## Development
 

data/app/assets/javascript/devise/webauthn.js

@@ -0,0 +1,179 @@
+function isWebAuthnSupported() {
+  return !!(
+    navigator.credentials &&
+    navigator.credentials.create &&
+    navigator.credentials.get &&
+    window.PublicKeyCredential
+  );
+}
+
+export class WebauthnCreateElement extends HTMLElement {
+  connectedCallback() {
+    this.style.display = 'contents';
+
+    if (!isWebAuthnSupported()) {
+      this.handleWebauthnUnsupported();
+      return;
+    }
+
+    this.closest('form').addEventListener('submit', async (event) => {
+      event.preventDefault();
+
+      try {
+        const options = JSON.parse(this.getAttribute('data-options-json'));
+        const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON(options);
+        const credential = await navigator.credentials.create({ publicKey });
+
+        this.querySelector('[data-webauthn-target="response"]').value = await this.stringifyRegistrationCredentialWithGracefullyHandlingAuthenticatorIssues(credential);
+
+        this.closest('form').submit();
+      } catch (error) {
+        this.handleError(error);
+      }
+    });
+  }
+
+  handleError(error) {
+    const event = new CustomEvent('webauthn:prompt:error', {
+      detail: { error, action: 'create' },
+      bubbles: true,
+      cancelable: true
+    });
+
+    // If no listener prevents default, show alert
+    if (this.dispatchEvent(event)) {
+      alert(error.message || error);
+    }
+  }
+
+  handleWebauthnUnsupported() {
+    this.dispatchEvent(new CustomEvent('webauthn:unsupported', {
+      detail: { action: 'create' },
+      bubbles: true
+    }));
+  }
+
+  // Stringifies registration credentials gracefully handling malformed ones (e.g., due to issues with
+  // certain authenticators like 1Password).
+  // It first tries to stringify them normally, and if the credential cannot be stringified (because its
+  // malformed), it attempts a workaround to convert the malformed credential into a valid format. This
+  // workaround was introduced for 1Password and might fail for other authenticators.
+  //
+  // Authenticators that return a proper credential should not affected by this workaround!
+  async stringifyRegistrationCredentialWithGracefullyHandlingAuthenticatorIssues(credential) {
+    try {
+      return JSON.stringify(credential);
+    } catch (e) {
+      console.warn("Authenticator returned a malformed credential, attempting to fix it. Error was:", e);
+    }
+
+    const response = credential.response;
+    const publicKey = response.getPublicKey ? await response.getPublicKey() : null;
+
+    return JSON.stringify({
+      type: credential.type,
+      id: credential.id,
+      rawId: credential.id,
+      authenticatorAttachment: credential.authenticatorAttachment,
+      clientExtensionResults: await credential.getClientExtensionResults(),
+      response: {
+        attestationObject: toBase64Url(response.attestationObject),
+        authenticatorData: toBase64Url(response.authenticatorData),
+        clientDataJSON: toBase64Url(response.clientDataJSON),
+        publicKey: toBase64Url(publicKey),
+        publicKeyAlgorithm: response.getPublicKeyAlgorithm(),
+        transports: response.getTransports(),
+      },
+    });
+  }
+}
+
+export class WebauthnGetElement extends HTMLElement {
+  connectedCallback() {
+    this.style.display = 'contents';
+
+    if (!isWebAuthnSupported()) {
+      this.handleWebauthnUnsupported();
+      return;
+    }
+
+    this.closest('form').addEventListener('submit', async (event) => {
+      event.preventDefault();
+
+      try {
+        const options = JSON.parse(this.getAttribute('data-options-json'));
+        const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON(options);
+        const credential = await navigator.credentials.get({ publicKey });
+
+        this.querySelector('[data-webauthn-target="response"]').value = await this.stringifyAuthenticationCredentialWithGracefullyHandlingAuthenticatorIssues(credential);
+
+        this.closest('form').submit();
+      } catch (error) {
+        this.handleError(error);
+      }
+    });
+  }
+
+  handleError(error) {
+    const event = new CustomEvent('webauthn:prompt:error', {
+      detail: { error, action: 'get' },
+      bubbles: true,
+      cancelable: true
+    });
+
+    // If no listener prevents default, show alert
+    if (this.dispatchEvent(event)) {
+      alert(error.message || error);
+    }
+  }
+
+  handleWebauthnUnsupported() {
+    this.dispatchEvent(new CustomEvent('webauthn:unsupported', {
+      detail: { action: 'get' },
+      bubbles: true
+    }));
+  }
+
+  // Stringifies authentication credentials gracefully handling malformed ones (e.g., due to issues with
+  // certain authenticators like 1Password).
+  // It first tries to stringify them normally, and if the credential cannot be stringified (because its
+  // malformed), it attempts a workaround to convert the malformed credential into a valid format. This
+  // workaround was introduced for 1Password and might fail for other authenticators.
+  //
+  // Authenticators that return a proper credential should not affected by this workaround!
+  async stringifyAuthenticationCredentialWithGracefullyHandlingAuthenticatorIssues(credential) {
+    try {
+      return JSON.stringify(credential);
+    } catch (e) {
+      console.warn("Authenticator returned a malformed credential, attempting to fix it. Error was:", e);
+    }
+
+    const response = credential.response;
+
+    return JSON.stringify({
+      type: credential.type,
+      id: credential.id,
+      rawId: credential.id,
+      authenticatorAttachment: credential.authenticatorAttachment,
+      clientExtensionResults: await credential.getClientExtensionResults(),
+      response: {
+        authenticatorData: toBase64Url(response.authenticatorData),
+        clientDataJSON: toBase64Url(response.clientDataJSON),
+        signature: toBase64Url(response.signature),
+        userHandle: response.userHandle ? toBase64Url(response.userHandle) : null,
+      },
+    });
+  }
+}
+
+function toBase64Url(buffer) {
+  if (!buffer) return null;
+
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  const base64 = btoa(binary);
+
+  return base64.replaceAll("+", "-").replaceAll("/", "_");
+}
+
+customElements.define('webauthn-create', WebauthnCreateElement);
+customElements.define('webauthn-get', WebauthnGetElement);

data/app/controllers/devise/passkeys_controller.rb

@@ -23,7 +23,12 @@ module Devise
     end
 
     def destroy
-      resource.passkeys.destroy(params[:id])
+      if resource.passkeys.destroy(params[:id])
+        set_flash_message! :notice, :passkey_deleted
+      else
+        set_flash_message! :alert, :passkey_deletion_failed, scope: :"devise.failure"
+      end
+
       redirect_to after_update_path
     end