devise-webauthn 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf586d5c54c83dcd4dd18c38e2dfe2c8d16cd86dc90e3c5c09b516d3c60dff04
-  data.tar.gz: 5a56dc38f1bd836b69dae7057f44ba95868b1edbfe5820eab77466ec2db59ffd
+  metadata.gz: aaa4817ea2af9200fa03ddf48357462fee35e64624b14d0de881b7805af7a34d
+  data.tar.gz: 88b7affbb03be29d61834f20924db27ecd8623c0f7c5463ce59554ebd727dcd7
 SHA512:
-  metadata.gz: c62d4d71fd255dbf5867c76a524ed2b8e22df167e537e52a928f5a88351291ccb4cc74aef5e0466b27c42242d6b0ab105e67acc2ba9d7cb673625ff0b31100b4
-  data.tar.gz: fefeab5ad1470d5a2eb3f451c823763f237c8fe3f302f46d02917bbf337a0ab3011fc518b209d6105aed7ca23c21cb8ef9621f360a6a980204d3fe28508cf552
+  metadata.gz: 963eaa9ff4ce30759da2bb0b90fd2e8af1118c3c51caad4b574b7e28873033cdf16cdc9a91c29d21a4be2676e78255665df5db50d524c29a9321dfc864490a78
+  data.tar.gz: 758cb30bc99014c144ad7b8467cb9a24da62c7c0a1c7db1b7565436973ab145041ad3ac8eabf1951b648e56caa5682459ec0ebaf5f0fd21f0b8b07341c95b30a

data/.github/workflows/ruby.yml

@@ -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

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,37 +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
 
-- Generate webauthn credentials table with not null constraints in attributes that must be present.
-- Update controllers and views generators to generate 2FA-related controllers and views.
-- Add flash messages when removing credentials.
+### 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.2)
-      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/second_factor_webauthn_credentials_controller.rb

@@ -14,14 +14,24 @@ module Devise
       else
         set_flash_message! :alert, :webauthn_credential_verification_failed, scope: :"devise.failure"
       end
-      redirect_to after_update_path
+      redirect_to after_create_path
     rescue WebAuthn::Error
       set_flash_message! :alert, :webauthn_credential_verification_failed, scope: :"devise.failure"
-      redirect_to after_update_path
+      redirect_to after_create_path
     ensure
       session.delete(:webauthn_challenge)
     end
 
+    def update
+      if resource.second_factor_webauthn_credentials.find(params[:id]).update(authentication_factor: 0)
+        set_flash_message! :notice, :security_key_promoted
+      else
+        set_flash_message! :alert, :security_key_promotion_failed, scope: :"devise.failure"
+      end
+
+      redirect_to after_update_path
+    end
+
     def destroy
       if resource.second_factor_webauthn_credentials.destroy(params[:id])
         set_flash_message! :notice, :security_key_deleted
@@ -29,7 +39,7 @@ module Devise
         set_flash_message! :alert, :security_key_deletion_failed, scope: :"devise.failure"
       end
 
-      redirect_to after_update_path
+      redirect_to after_destroy_path
     end
 
     private
@@ -52,9 +62,21 @@ module Devise
       )
     end
 
+    # The default url to be used after creating a second factor key. You can overwrite
+    # this method in your own SecondFactorWebauthnCredentialsController.
+    def after_create_path
+      new_second_factor_webauthn_credential_path(resource_name)
+    end
+
     # The default url to be used after creating a second factor key. You can overwrite
     # this method in your own SecondFactorWebauthnCredentialsController.
     def after_update_path
+      request.referer || new_second_factor_webauthn_credential_path(resource_name)
+    end
+
+    # The default url to be used after deleting a second factor key. You can overwrite
+    # this method in your own SecondFactorWebauthnCredentialsController.
+    def after_destroy_path
       new_second_factor_webauthn_credential_path(resource_name)
     end
   end

data/config/locales/en.yml

@@ -6,11 +6,13 @@ en:
     second_factor_webauthn_credentials:
       security_key_created: "Security Key created successfully."
       security_key_deleted: "Security Key deleted successfully."
+      security_key_promoted: "Security Key promoted to passkey successfully."
     failure:
       passkey_not_found: "Your passkey doesn't exist or is not valid."
       passkey_verification_failed: "Passkey verification failed."
       passkey_deletion_failed: "Passkey deletion failed."
       security_key_deletion_failed: "Security Key deletion failed."
+      security_key_promotion_failed: "Security Key promotion to passkey failed."
       sign_in_not_initiated: "Sign in was not initiated."
       two_factor_required: "Two-factor authentication is required to sign in."
       webauthn_credential_not_found: "Your WebAuthn credential doesn't exist or is not valid."

data/devise-webauthn.gemspec

@@ -29,6 +29,6 @@ Gem::Specification.new do |spec|
   spec.metadata["rubygems_mfa_required"] = "true"
   spec.required_ruby_version = ">= 2.7"
 
-  spec.add_dependency "devise", "~> 4.9"
+  spec.add_dependency "devise", ">= 4.9"
   spec.add_dependency "webauthn", "~> 3.0"
 end

data/gemfiles/devise_5_0.gemfile

@@ -0,0 +1,26 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "appraisal", "~> 2.5", require: false
+gem "capybara", "~> 3.39"
+gem "combustion", "~> 1.3"
+gem "devise", "~> 5.0.0.rc"
+gem "importmap-rails", "~> 2.0"
+gem "propshaft", "~> 1.2"
+gem "pry-byebug", "~> 3.10"
+gem "puma", "~> 6.6"
+gem "rails", ">= 7.1"
+gem "rspec-rails", ">= 7.1"
+gem "rubocop", "~> 1.79"
+gem "rubocop-rails", "~> 2.32"
+gem "rubocop-rspec", "~> 3.6"
+gem "selenium-webdriver"
+gem "sqlite3", ">= 1.6", "!= 1.7.0", "!= 1.7.1", "!= 1.7.2", "!= 1.7.3"
+gem "stimulus-rails", "~> 1.3"
+
+install_if -> { RUBY_VERSION < "3.0" } do
+  gem "rack", "~> 2.2"
+end
+
+gemspec path: "../"

data/gemfiles/rails_7_1.gemfile

@@ -2,14 +2,15 @@
 
 source "https://rubygems.org"
 
-gem "appraisal", "~> 2.5"
+gem "appraisal", "~> 2.5", require: false
 gem "capybara", "~> 3.39"
 gem "combustion", "~> 1.3"
+gem "devise", "~> 4.9"
 gem "importmap-rails", "~> 2.0"
 gem "propshaft", "~> 1.2"
 gem "pry-byebug", "~> 3.10"
 gem "puma", "~> 6.6"
-gem "rails", "~> 7.1"
+gem "rails", "~> 7.1.x"
 gem "rspec-rails", "~> 7.1"
 gem "rubocop", "~> 1.79"
 gem "rubocop-rails", "~> 2.32"

data/gemfiles/rails_7_2.gemfile

@@ -2,14 +2,15 @@
 
 source "https://rubygems.org"
 
-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"
 gem "puma", "~> 6.6"
-gem "rails", "~> 7.2"
+gem "rails", "~> 7.2.x"
 gem "rspec-rails", "~> 8.0"
 gem "rubocop", "~> 1.79"
 gem "rubocop-rails", "~> 2.32"

data/gemfiles/rails_8_0.gemfile

@@ -2,14 +2,15 @@
 
 source "https://rubygems.org"
 
-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"
 gem "puma", "~> 6.6"
-gem "rails", "~> 8.0"
+gem "rails", "~> 8.0.x"
 gem "rspec-rails", "~> 8.0"
 gem "rubocop", "~> 1.79"
 gem "rubocop-rails", "~> 2.32"

data/gemfiles/rails_8_1.gemfile

@@ -2,14 +2,15 @@
 
 source "https://rubygems.org"
 
-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"
 gem "puma", "~> 6.6"
-gem "rails", "~> 8.1"
+gem "rails", "~> 8.1.x"
 gem "rspec-rails", "~> 8.0"
 gem "rubocop", "~> 1.79"
 gem "rubocop-rails", "~> 2.32"

data/gemfiles/rails_edge.gemfile

@@ -2,9 +2,10 @@
 
 source "https://rubygems.org"
 
-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"

data/lib/devise/strategies/database_authenticatable.rb

@@ -13,6 +13,7 @@ module Devise
         if validate(resource){ hashed = true; resource.valid_password?(password) }
           if second_factor_enabled?(resource)
             session[:current_authentication_resource_id] = resource.id
+            session[:current_authentication_remember_me] = remember_me?
             request.flash[:notice] = two_factor_required_message
             request.commit_flash
             redirect!(two_factor_authentication_path, {}, message: two_factor_required_message)

data/lib/devise/strategies/webauthn_two_factor_authenticatable.rb

@@ -4,26 +4,32 @@ module Devise
   module Strategies
     class WebauthnTwoFactorAuthenticatable < Devise::Strategies::Base
       def valid?
-        credential_param.present? && session[:two_factor_authentication_challenge].present?
+        credential_param.present? &&
+          session[:current_authentication_resource_id].present? &&
+          session[:two_factor_authentication_challenge].present?
       end
 
+      # rubocop:disable Metrics/AbcSize
       def authenticate!
         credential_from_params = WebAuthn::Credential.from_get(JSON.parse(credential_param))
-        stored_credential = WebauthnCredential.find_by(external_id: credential_from_params.id)
+        resource = resource_class.find_by(id: session[:current_authentication_resource_id])
+        stored_credential = resource&.webauthn_credentials&.find_by(external_id: credential_from_params.id)
 
         return fail!(:webauthn_credential_not_found) if stored_credential.blank?
 
         verify_credential(credential_from_params, stored_credential)
 
-        resource = stored_credential.public_send(resource_name)
+        resource.remember_me = session[:current_authentication_remember_me] if resource.respond_to?(:remember_me=)
         success!(resource)
 
         session.delete(:current_authentication_resource_id)
+        session.delete(:current_authentication_remember_me)
       rescue WebAuthn::Error
         fail!(:webauthn_credential_verification_failed)
       ensure
         session.delete(:two_factor_authentication_challenge)
       end
+      # rubocop:enable Metrics/AbcSize
 
       private
 
@@ -41,8 +47,8 @@ module Devise
         stored_credential.update!(sign_count: credential_from_params.sign_count)
       end
 
-      def resource_name
-        mapping.to.name.underscore
+      def resource_class
+        mapping.to
       end
     end
   end

data/lib/devise/webauthn/engine.rb

@@ -34,6 +34,12 @@ module Devise
       initializer "devise.webauthn.url_helpers" do
         Devise.include_helpers(Devise::Webauthn)
       end
+
+      initializer "devise.webauthn.assets" do
+        if ::Rails.application.config.respond_to?(:assets)
+          ::Rails.application.config.assets.precompile += %w[devise/webauthn.js]
+        end
+      end
     end
   end
 end

data/lib/devise/webauthn/helpers/credentials_helper.rb

@@ -8,16 +8,12 @@ module Devise
         form_with(
           url: passkeys_path(resource),
           method: :post,
-          class: form_classes,
-          data: {
-            action: "webauthn-credentials#create:prevent",
-            controller: "webauthn-credentials",
-            webauthn_credentials_options_param: create_passkey_options(resource)
-          }
+          class: form_classes
         ) do |f|
-          concat f.hidden_field(:public_key_credential,
-                                data: { "webauthn-credentials-target": "credentialHiddenInput" })
-          concat capture(f, &block)
+          tag.webauthn_create(data: { options_json: create_passkey_options(resource) }) do
+            concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
+            concat capture(f, &block)
+          end
         end
       end
 
@@ -25,16 +21,13 @@ module Devise
         form_with(
           url: session_path,
           method: :post,
-          data: {
-            action: "webauthn-credentials#get:prevent",
-            controller: "webauthn-credentials",
-            webauthn_credentials_options_param: passkey_authentication_options
-          },
           class: form_classes
         ) do |f|
-          concat f.hidden_field(:public_key_credential,
-                                data: { "webauthn-credentials-target": "credentialHiddenInput" })
-          concat f.button(text, type: "submit", class: button_classes, &block)
+          tag.webauthn_get(data: { options_json: passkey_authentication_options }) do
+            concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
+
+            concat f.button(text, type: "submit", class: button_classes, &block)
+          end
         end
       end
 
@@ -42,16 +35,12 @@ module Devise
         form_with(
           url: second_factor_webauthn_credentials_path(resource),
           method: :post,
-          class: form_classes,
-          data: {
-            action: "webauthn-credentials#create:prevent",
-            controller: "webauthn-credentials",
-            webauthn_credentials_options_param: create_security_key_options(resource)
-          }
+          class: form_classes
         ) do |f|
-          concat f.hidden_field(:public_key_credential,
-                                data: { "webauthn-credentials-target": "credentialHiddenInput" })
-          concat capture(f, &block)
+          tag.webauthn_create(data: { options_json: create_security_key_options(resource) }) do
+            concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
+            concat capture(f, &block)
+          end
         end
       end
 
@@ -59,21 +48,15 @@ module Devise
         form_with(
           url: two_factor_authentication_path(resource),
           method: :post,
-          data: {
-            action: "webauthn-credentials#get:prevent",
-            controller: "webauthn-credentials",
-            webauthn_credentials_options_param: security_key_authentication_options(resource)
-          },
           class: form_classes
         ) do |f|
-          concat f.hidden_field(:public_key_credential,
-                                data: { "webauthn-credentials-target": "credentialHiddenInput" })
-          concat f.button(text, type: "submit", class: button_classes, &block)
+          tag.webauthn_get(data: { options_json: security_key_authentication_options(resource) }) do
+            concat f.hidden_field(:public_key_credential, data: { webauthn_target: "response" })
+            concat f.button(text, type: "submit", class: button_classes, &block)
+          end
         end
       end
 
-      private
-
       def create_passkey_options(resource)
         @create_passkey_options ||= begin
           options = WebAuthn::Credential.options_for_create(
@@ -143,6 +126,8 @@ module Devise
         end
       end
 
+      private
+
       def resource_human_palatable_identifier
         authentication_keys = resource.class.authentication_keys
         authentication_keys = authentication_keys.keys if authentication_keys.is_a?(Hash)

data/lib/devise/webauthn/routes.rb

@@ -15,7 +15,7 @@ module ActionDispatch
                  controller: controllers[:two_factor_authentications]
 
         resources :second_factor_webauthn_credentials,
-                  only: %i[new create destroy],
+                  only: %i[new create update destroy],
                   controller: controllers[:second_factor_webauthn_credentials]
       end
     end

data/lib/devise/webauthn/test/authenticator_helpers.rb

@@ -12,17 +12,17 @@ module Devise
           page.driver.browser.add_virtual_authenticator(options)
         end
 
-        def add_passkey_to_authenticator(authenticator, resource)
-          add_credential_to_authenticator(authenticator, resource, passkey: true)
+        def add_passkey_to_authenticator(authenticator, resource, name: "My Passkey")
+          add_credential_to_authenticator(authenticator, resource, passkey: true, name: name)
         end
 
-        def add_security_key_to_authenticator(authenticator, resource)
-          add_credential_to_authenticator(authenticator, resource, passkey: false)
+        def add_security_key_to_authenticator(authenticator, resource, name: "My Security Key")
+          add_credential_to_authenticator(authenticator, resource, passkey: false, name: name)
         end
 
         # rubocop:disable Metrics/AbcSize
         # rubocop:disable Metrics/MethodLength
-        def add_credential_to_authenticator(authenticator, resource, passkey:)
+        def add_credential_to_authenticator(authenticator, resource, passkey:, name: "My Credential")
           credential_id = SecureRandom.random_bytes(16)
           encoded_credential_id = Base64.urlsafe_encode64(credential_id)
           key = OpenSSL::PKey.generate_key("ED25519")
@@ -44,7 +44,7 @@ module Devise
           authenticator.add_credential(credential_json)
 
           resource.webauthn_credentials.create!(
-            name: "My Credential",
+            name: name,
             external_id: Base64.urlsafe_encode64(credential_id, padding: false),
             public_key: encoded_cose_public_key,
             sign_count: 0,

data/lib/devise/webauthn/version.rb

@@ -2,6 +2,6 @@
 
 module Devise
   module Webauthn
-    VERSION = "0.2.2"
+    VERSION = "0.3.0"
   end
 end

data/lib/generators/devise/webauthn/install/install_generator.rb

@@ -26,8 +26,8 @@ module Devise
         invoke "devise:webauthn:webauthn_id", [], resource_name: options[:resource_name]
       end
 
-      def generate_stimulus_controller
-        invoke "devise:webauthn:stimulus"
+      def generate_javascript_configuration
+        invoke "devise:webauthn:javascript"
       end
 
       def final_message

data/lib/generators/devise/webauthn/javascript/javascript_configuration_generator.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module Devise
+  module Webauthn
+    class JavascriptConfigurationGenerator < Rails::Generators::Base
+      hide!
+      namespace "devise:webauthn:javascript"
+
+      desc "Configure JavaScript loading for devise-webauthn"
+
+      def configure_javascript
+        if importmap?
+          setup_importmap
+        elsif using_node?
+          setup_node
+        else
+          say "Could not detect JavaScript setup. Please manually configure `devise/webauthn.js` loading.", :red
+        end
+      end
+
+      private
+
+      def importmap?
+        File.exist?(File.join(destination_root, "config/importmap.rb"))
+      end
+
+      def using_node?
+        File.exist?(File.join(destination_root, "package.json"))
+      end
+
+      def setup_importmap
+        say "Detected importmap-rails setup", :green
+
+        append_to_file "config/importmap.rb", %(pin "devise/webauthn", to: "devise/webauthn.js"\n)
+        say "Added pin to config/importmap.rb", :green
+
+        if File.exist?(File.join(destination_root, "app/javascript/application.js"))
+          append_to_file "app/javascript/application.js", %(import "devise/webauthn"\n)
+          say "Added import to app/javascript/application.js", :green
+        else
+          say "Could not find app/javascript/application.js!", :red
+          say "   Please add `import \"devise/webauthn\"` to your application.js file manually."
+        end
+      end
+
+      def setup_node
+        say "Detected JavaScript bundler setup (Bun/Node)", :green
+
+        if File.exist?(File.join(destination_root, "app/views/layouts/application.html.erb"))
+          inject_into_file "app/views/layouts/application.html.erb",
+                           %(\n    <%= javascript_include_tag "devise/webauthn" %>),
+                           before: "</head>"
+          say "Added javascript_include_tag to app/views/layouts/application.html.erb", :green
+        else
+          say "Could not find app/views/layouts/application.html.erb.", :red
+          say "   Please add `<%= javascript_include_tag \"devise/webauthn\" %>` " \
+              "within the <head> tag in your custom layout."
+        end
+      end
+    end
+  end
+end

data/lib/generators/devise/webauthn/templates/controllers/second_factor_webauthn_credentials_controller.rb.tt

@@ -11,6 +11,11 @@ class <%= @scope_prefix %>SecondFactorWebauthnCredentialsController < Devise::Se
   #   super
   # end
 
+  # PUT   /resource/second_factor_webauthn_credentials/:id
+  # def update
+  #   super
+  # end
+
   # DELETE /resource/second_factor_webauthn_credentials/:id
   # def destroy
   #  super
@@ -23,9 +28,21 @@ class <%= @scope_prefix %>SecondFactorWebauthnCredentialsController < Devise::Se
   #   super
   # end
 
+  # The default url to be used after creating a second factor key. You can overwrite
+  # this method in your own SecondFactorWebauthnCredentialsController.
+  # def after_create_path
+  #   super
+  # end
+
   # The default url to be used after creating a second factor key. You can overwrite
   # this method in your own SecondFactorWebauthnCredentialsController.
   # def after_update_path
   #   super
   # end
+
+  # The default url to be used after deleting a second factor key. You can overwrite
+  # this method in your own SecondFactorWebauthnCredentialsController.
+  # def after_destroy_path
+  #   super
+  # end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: devise-webauthn
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Cedarcode
@@ -13,14 +13,14 @@ dependencies:
   name: devise
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '4.9'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '4.9'
 - !ruby/object:Gem::Dependency
@@ -58,6 +58,7 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/javascript/devise/webauthn.js
 - app/controllers/devise/passkeys_controller.rb
 - app/controllers/devise/second_factor_webauthn_credentials_controller.rb
 - app/controllers/devise/two_factor_authentications_controller.rb
@@ -71,6 +72,7 @@ files:
 - config.ru
 - config/locales/en.yml
 - devise-webauthn.gemspec
+- gemfiles/devise_5_0.gemfile
 - gemfiles/rails_7_1.gemfile
 - gemfiles/rails_7_2.gemfile
 - gemfiles/rails_8_0.gemfile
@@ -92,8 +94,7 @@ files:
 - lib/generators/devise/webauthn/controllers_generator.rb
 - lib/generators/devise/webauthn/install/install_generator.rb
 - lib/generators/devise/webauthn/install/templates/webauthn.rb
-- lib/generators/devise/webauthn/stimulus/stimulus_generator.rb
-- lib/generators/devise/webauthn/stimulus/templates/webauthn_credentials_controller.js
+- lib/generators/devise/webauthn/javascript/javascript_configuration_generator.rb
 - lib/generators/devise/webauthn/templates/controllers/README
 - lib/generators/devise/webauthn/templates/controllers/passkeys_controller.rb.tt
 - lib/generators/devise/webauthn/templates/controllers/second_factor_webauthn_credentials_controller.rb.tt

data/lib/generators/devise/webauthn/stimulus/stimulus_generator.rb

@@ -1,24 +0,0 @@
-# frozen_string_literal: true
-
-require "rails/generators"
-
-module Devise
-  module Webauthn
-    class StimulusGenerator < Rails::Generators::Base
-      hide!
-      source_root File.expand_path("templates", __dir__)
-
-      desc "Copy DeviseWebauthn Stimulus controller to your application"
-
-      def copy_stimulus_controller
-        copy_file "webauthn_credentials_controller.js",
-                  "app/javascript/controllers/webauthn_credentials_controller.js"
-      end
-
-      def show_instructions
-        say "✓ Stimulus controller setup complete!", :green
-        say "The webauthn_credentials controller has been installed and will be automatically registered by Stimulus."
-      end
-    end
-  end
-end

data/lib/generators/devise/webauthn/stimulus/templates/webauthn_credentials_controller.js

@@ -1,31 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["credentialHiddenInput"]
-
-  async create({ params: { options } }) {
-    try {
-      const credentialOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);
-      const credential = await navigator.credentials.create({ publicKey: credentialOptions });
-
-      this.credentialHiddenInputTarget.value = JSON.stringify(credential);
-
-      this.element.submit();
-    } catch (error) {
-      alert(error.message || error);
-    }
-  }
-
-  async get({ params: { options } }) {
-    try {
-      const credentialOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);
-      const credential = await navigator.credentials.get({ publicKey: credentialOptions });
-
-      this.credentialHiddenInputTarget.value = JSON.stringify(credential);
-
-      this.element.submit();
-    } catch (error) {
-      alert(error.message || error);
-    }
-  }
-}