Multiple social login buttons create duplicate key 'provider' error in NextJS

[Kakadus]

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

Maybe this is an issue in https://github.com/ory/sdk that only manifests here.

When using multiple providers, all SSO button elements have key='provider', leading to this NextJS error:

Encountered two children with the same key, provider. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

The code

elements/packages/elements-react/src/components/form/social.tsx

Line 42 in 46362c6

<Node node={node} key={getNodeId(node)} />

uses getNodeId to generate a key. However, this functions returns provider for all sso buttons:

The nodes are

{
  "attributes": {
    "disabled": false,
    "name": "provider",
    "node_type": "input",
    "type": "submit",
    "value": "discord"
  },
  "group": "oidc",
  "messages": [],
  "meta": {
    "label": {
      "context": {
        "provider": "discord",
        "provider_id": "discord"
      },
      "id": 1040002,
      "text": "Sign up with discord",
      "type": "info"
    }
  },
  "type": "input"
},
{
  "attributes": {
    "disabled": false,
    "name": "provider",
    "node_type": "input",
    "type": "submit",
    "value": "google"
  },
  "group": "oidc",
  "messages": [],
  "meta": {
    "label": {
      "context": {
        "provider": "google",
        "provider_id": "google"
      },
      "id": 1040002,
      "text": "Sign up with google",
      "type": "info"
    }
  },
  "type": "input"
}

but getNodeId on these objects returns provider for both. Note that I'm using @ory/client-fetch v1.21.5, but also overriding to v1.22.27 shows the same behavior.

Reproducing the bug

1. Configure kratos to have 2 social logins configured, e.g. google and discord.
2. Open the login or register page of the example projects in dev mode.
3. See the error highlighted by the nextjs dev tools, or in the browser console.

Relevant log output

SERVER:
GET /registration?flow=2654dc6e-e4df-4582-af05-85e2e92df9de 200 in 407ms (compile: 99ms, proxy.ts: 4ms, render: 303ms)
│ GET http://localhost:4433/self-service/registration/flows?id=2654dc6e-e4df-4582-af05-85e2e92df9de 200 in 7ms (cache skip)
│ │ Cache skipped reason: (cache: no-cache)

BOWSER CONSOLE:
[HMR] connected
Encountered two children with the same key, `provider`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Relevant configuration

selfservice:
  methods:
    oidc:
      config:
        providers:
          - id: discord
            provider: discord
            client_id: ....
            client_secret: ....
            mapper_url: ....
            scope:
              - identify
              - email
          - id: google
            provider: google
            client_secret: ....
            client_id: ....
            mapper_url: ....

Version

@ory/client-fetch 1.21.5, @ory/elements-react 1.2.0-rc.1, @ory/nextjs 1.0.0-rc.1

On which operating system are you observing this issue?

Linux

In which environment are you deploying?

Docker Compose

Additional Context

Maybe getNodeId should return a better id for sso buttons, or a different version should be used to generate unique ids for them.