Incorrect UI nodes for using OIDC and password flow together

[winston0410]

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] This issue affects my Ory Cloud project.
• [ ] I have joined the Ory Community Slack.
• [ ] I am signed up to the Ory Security Patch Newsletter.

Describe the bug

I am getting the following ui nodes, when I have password and OIDC flow enabled:

{
  "action": "http://localhost:4000/self-service/login?flow=754deb4b-b919-4bf2-b01a-6360b0328c00",
  "method": "POST",
  "nodes": [
    {
      "type": "input",
      "group": "oidc",
      "attributes": {
        "name": "provider",
        "type": "submit",
        "value": "github",
        "disabled": false,
        "node_type": "input"
      },
      "messages": [],
      "meta": {
        "label": {
          "id": 1010002,
          "text": "Sign in with GitHub",
          "type": "info",
          "context": {
            "provider": "GitHub"
          }
        }
      }
    },
    {
      "type": "input",
      "group": "default",
      "attributes": {
        "name": "csrf_token",
        "type": "hidden",
        "value": "stNmydV+YIRCgqsJOrglqg6azWtHG6J4HrAj8lEhokhQn9esU+IZiAhZU7GlGEMMZXSPddR07wYJ32iTNHsHeA==",
        "required": true,
        "disabled": false,
        "node_type": "input"
      },
      "messages": [],
      "meta": {}
    },
    {
      "type": "input",
      "group": "default",
      "attributes": {
        "name": "identifier",
        "type": "text",
        "value": "",
        "required": true,
        "disabled": false,
        "node_type": "input"
      },
      "messages": [],
      "meta": {
        "label": {
          "id": 1070004,
          "text": "ID",
          "type": "info"
        }
      }
    },
    {
      "type": "input",
      "group": "password",
      "attributes": {
        "name": "password",
        "type": "password",
        "required": true,
        "autocomplete": "current-password",
        "disabled": false,
        "node_type": "input"
      },
      "messages": [],
      "meta": {
        "label": {
          "id": 1070001,
          "text": "Password",
          "type": "info"
        }
      }
    },
    {
      "type": "input",
      "group": "password",
      "attributes": {
        "name": "method",
        "type": "submit",
        "value": "password",
        "disabled": false,
        "node_type": "input"
      },
      "messages": [],
      "meta": {
        "label": {
          "id": 1010001,
          "text": "Sign in",
          "type": "info",
          "context": {}
        }
      }
    }
  ]
}

I expect a node with value of method="oidc" to be shipped here, just like method="password, so that it can meet the expected request schema. I guess we can use a type="hidden" node to send provider="github" there

Reproducing the bug

• Use the default schema
• Integrate with github for OIDC authentication
• Call the https://www.ory.sh/docs/reference/api#operation/initializeSelfServiceLoginFlowForBrowsers to get the login flow

Relevant log output

No response

Relevant configuration

No response

Version

Using Ory Cloud right now(10/08/2022), not sure where to find the version

On which operating system are you observing this issue?

Ory Cloud

In which environment are you deploying?

Ory Cloud

Additional Context

No response

[aeneasr]

Hi, thank you for the report. The current behavior is correct. It is required because you can more than one social sign in button where for password you only have one button.

[winston0410]

Ah I see that make sense. But does that mean that we have to mutate the ui.nodes ourselves to add the method="oidc" in? What is the expected usage?

Also I believe that oidc and password is not dependent. With the ui.nodes here, if we iterate the array for generating the form, oidc would not work because when the user click on it, it will require the user to fill the field of group="password", which doesn't make sense.

Can it return an array of array so that end user does not need to implement their own function to group the ui nodes themselves?

[aeneasr]

To group the nodes check the group key in the node payload

[winston0410]

To group the nodes check the group key in the node payload

Yes that is doable, but with backend as the state machine, I think it should be handled by the server. It doesn't make sense for every customer to implement that logic themselves, in order to make oidc to work.

[aeneasr]

I don't think I understand what you mean :/ If you want to see a reference implementation, check this: https://github.com/ory/kratos-selfservice-ui-node/blob/master/views/settings.hbs#L18

This code is doing what you want (I guess) as it is grouping the nodes.

Hope this helps!