Incorrect UI Node Grouping For Recovery Flow

[elielamora]

Preflight checklist

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

Ory Network Project

No response

Describe the bug

When creating a dynamic UI example with Go templates the UX is suboptimal since simply rendering the nodes in a single html form does not work as intended. The group field in each node doesn't work like it does in other flows (e.g. verification) where the group can be used to create multiple forms that work as expected. Looking through https://www.ory.sh/docs/kratos/self-service/flows/account-recovery-password-reset there doesn't seem to be a setting to set that would fix this.

{
  "id": "298969e7-a22d-44bb-ab36-ee12dc75ff66",
  "type": "browser",
  "expires_at": "2024-06-30T22:01:37.848522Z",
  "issued_at": "2024-06-30T21:01:37.848522Z",
  "request_url": "http://127.0.0.1/self-service/recovery/browser",
  "active": "code",
  "ui": {
    "action": "http://127.0.0.1:80/self-service/recovery?flow=298969e7-a22d-44bb-ab36-ee12dc75ff66",
    "method": "POST",
    "nodes": [
      {
        "type": "input",
        "group": "default",
        "attributes": {
          "name": "csrf_token",
          "type": "hidden",
          "value": "40Sq4ldykcds1i2tEEMcFkZ64TzkA83tZHXZ3rPNEMqUJGFOWLwGYQlHrtHjKWaHq9mcgUZR9viSWSCZQ/GghQ==",
          "required": true,
          "disabled": false,
          "node_type": "input"
        },
        "messages": [],
        "meta": {}
      },
      {
        "type": "input",
        "group": "code",
        "attributes": {
          "name": "code",
          "type": "text",
          "required": true,
          "pattern": "[0-9]+",
          "disabled": false,
          "node_type": "input"
        },
        "messages": [],
        "meta": {
          "label": {
            "id": 1070010,
            "text": "Recovery code",
            "type": "info"
          }
        }
      },
      {
        "type": "input",
        "group": "code",
        "attributes": {
          "name": "method",
          "type": "hidden",
          "value": "code",
          "disabled": false,
          "node_type": "input"
        },
        "messages": [],
        "meta": {}
      },
      {
        "type": "input",
        "group": "code",
        "attributes": {
          "name": "method",
          "type": "submit",
          "value": "code",
          "disabled": false,
          "node_type": "input"
        },
        "messages": [],
        "meta": {
          "label": {
            "id": 1070005,
            "text": "Submit",
            "type": "info"
          }
        }
      },
      {
        "type": "input",
        "group": "code",
        "attributes": {
          "name": "email",
          "type": "submit",
          "value": "test@example.com",
          "disabled": false,
          "node_type": "input"
        },
        "messages": [],
        "meta": {
          "label": {
            "id": 1070008,
            "text": "Resend code",
            "type": "info"
          }
        }
      }
    ],
    "messages": [
      {
        "id": 1060003,
        "text": "An email containing a recovery code has been sent to the email address you provided. If you have not received an email, check the spelling of the address and make sure to use the address you registered with.",
        "type": "info"
      }
    ]
  },
  "state": "sent_email"
}

Reproducing the bug

1. Run https://github.com/elielamora/kratos-selfservice-ui-go/blob/main/docker-compose.yml
2. Start Recovery Flow
3. Try to resend code fails since code is required (poor UX)
4. Enter the code from email (mailhog/mailslurper)
5. Resends email

Relevant log output

No response

Relevant configuration

flows:
    recovery:
      enabled: true
      ui_url: http://127.0.0.1:80/auth/recovery
      use: code
      notify_unknown_recipients: false

Version

1.2.0

On which operating system are you observing this issue?

macOS

In which environment are you deploying?

Docker Compose

Additional Context

Note: using code recovery flow and kratos-client-go

[elielamora]

Just checked out this form wrapper. Which means that this could be expected behavior. However this does complicate implementing this in a SSR without needing JS. I think setting the group field to something else still makes sense. Keeps the current behavior as is and then helps other ways of rendering the recovery flow UI.