OnSubmit not fired for Passkey on Registration

[johnmarksilly]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe the bug

When using the AuthUserCard component and passing a callback to the onSubmit prop, it will not fire in many circumstances during registration. I noticed there are many identifier sections that don't forward this onSubmit prop to the Form, but the real bug seems to be in the PasskeySection component (well the webauthn.js script).

in this function -> window.oryPasskeyRegistration() the triggerEl.closest("form").submit() bypasses the callback.

The webauthn.js script will call form.submit after the webauthn/passkey data is generated by the browser, but calling submit this way bypasses the form onSubmit callback.

To workaround the issue, I had to override the HTMLFormElement.prototype.submit function to dispatch the event manually. I would change this stuff myself, but I don't know the codebase very well and am not entirely sure if these other auth section types should support the onSubmit event.

const _submit = HTMLFormElement.prototype.submit
HTMLFormElement.prototype.submit = function () {
  if (this.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }))) {
    _submit.call(this)
  }
  return
}

It's a problem particularly because I'm trying to use the transient_payload and need to keep the UI in the SPA, instead of navigating away to keep my params available.

Reproducing the bug

Have an identity that uses passkey as the credential.

My identity has a username, an optional name, and a passkey as the credential on the username.

Using self service react example, try hooking into the onSubmit of the AuthUserCard and during the passkey step, you will see that the callback will not fire

Relevant log output

No response

Relevant configuration

identity.default.schema.json: |
      {
        "$id": "ae01be8c-f52f-40ea-aef8-3215d9e660c9",
        "$schema": "http://json-schema.org/draft-07/schema#",
        "title": "Person",
        "type": "object",
        "properties": {
          "traits": {
            "type": "object",
            "properties": {
              "username": {
                "type": "string",
                "title": "Username",
                "minLength": 6,
                "ory.sh/kratos": {
                  "credentials": {
                    "passkey": {
                      "display_name": true
                    }
                  }
                }
              },
              "name": {
                "type": "string",
                "title": "Name"
              }
            },
            "required": [
              "username"
            ],
            "additionalProperties": false
          }
        }
      }

--- config
kratos:
  config:
    selfservice:
      methods:
        password:
          enabled: false
        passkey:
          enabled: true

Version

1.3.0

On which operating system are you observing this issue?

Linux

In which environment are you deploying?

Kubernetes with Helm

Additional Context

No response