@ory/elements-react 1.0.0-rc.0 → 1.0.0-rc.2

package/dist/index.js

@@ -50,13 +50,18 @@ var defaultNodeOrder = [
 ];
 function defaultNodeSorter(a, b) {
   var _a, _b;
+  const aIsCaptcha = a.group === "captcha";
+  const bIsCaptcha = b.group === "captcha";
+  const aIsSubmit = clientFetch.isUiNodeInputAttributes(a.attributes) && a.attributes.type === "submit";
+  const bIsSubmit = clientFetch.isUiNodeInputAttributes(b.attributes) && b.attributes.type === "submit";
+  if (aIsCaptcha && bIsSubmit) {
+    return -1;
+  }
+  if (bIsCaptcha && aIsSubmit) {
+    return 1;
+  }
   const aGroupWeight = (_a = defaultNodeOrder.indexOf(a.group)) != null ? _a : 999;
   const bGroupWeight = (_b = defaultNodeOrder.indexOf(b.group)) != null ? _b : 999;
-  if (b.group === "captcha" && clientFetch.isUiNodeInputAttributes(a.attributes) && a.attributes.type === "submit") {
-    return aGroupWeight - (bGroupWeight - 2);
-  } else if (a.group === "captcha" && clientFetch.isUiNodeInputAttributes(b.attributes) && b.attributes.type === "submit") {
-    return aGroupWeight - 2 - bGroupWeight;
-  }
   return aGroupWeight - bGroupWeight;
 }
 var defaultGroupOrder = [
@@ -94,28 +99,10 @@ function OryComponentProvider({
     }
   );
 }
-function isChoosingMethod(flow) {
-  return flow.flow.ui.nodes.some(
-    (node) => "name" in node.attributes && node.attributes.name === "screen" && "value" in node.attributes && node.attributes.value === "previous"
-  ) || flow.flow.ui.nodes.some(
-    (node) => node.group === clientFetch.UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
-  ) || flow.flowType === clientFetch.FlowType.Login && flow.flow.requested_aal === "aal2";
-}
-function removeSsoNodes(nodes) {
-  return nodes.filter(
-    (node) => !(node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml)
-  );
-}
-function getFinalNodes(uniqueGroups, selectedGroup) {
-  var _a, _b, _c, _d;
-  const selectedNodes = selectedGroup ? (_a = uniqueGroups[selectedGroup]) != null ? _a : [] : [];
-  return [
-    ...(_b = uniqueGroups == null ? void 0 : uniqueGroups.identifier_first) != null ? _b : [],
-    ...(_c = uniqueGroups == null ? void 0 : uniqueGroups.default) != null ? _c : [],
-    ...(_d = uniqueGroups == null ? void 0 : uniqueGroups.captcha) != null ? _d : []
-  ].flat().filter(
-    (node) => "type" in node.attributes && node.attributes.type === "hidden"
-  ).concat(selectedNodes);
+
+// src/theme/default/utils/form.ts
+function isGroupImmediateSubmit(group) {
+  return group === "code";
 }
 function triggerToWindowCall(trigger) {
   if (!trigger) {
@@ -227,6 +214,93 @@ function useNodesGroups(nodes, { omit } = {}) {
 var findNode = (nodes, opt) => nodes.find((n) => {
   return n.attributes.node_type === opt.node_type && (opt.group instanceof RegExp ? n.group.match(opt.group) : n.group === opt.group) && (opt.name && n.attributes.node_type === "input" ? opt.name instanceof RegExp ? n.attributes.name.match(opt.name) : n.attributes.name === opt.name : !opt.name);
 });
+function useFunctionalNodes(nodes) {
+  return nodes.filter(
+    ({ group }) => [
+      clientFetch.UiNodeGroupEnum.Default,
+      clientFetch.UiNodeGroupEnum.IdentifierFirst,
+      clientFetch.UiNodeGroupEnum.Profile,
+      clientFetch.UiNodeGroupEnum.Captcha
+    ].includes(group)
+  );
+}
+function isUiNodeGroupEnum(method) {
+  return Object.values(clientFetch.UiNodeGroupEnum).includes(method);
+}
+function isSingleSignOnNode(node) {
+  return node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml;
+}
+function hasSingleSignOnNodes(nodes) {
+  return nodes.some(isSingleSignOnNode);
+}
+function withoutSingleSignOnNodes(nodes) {
+  return nodes.filter((node) => !isSingleSignOnNode(node));
+}
+function isNodeVisible(node) {
+  if (clientFetch.isUiNodeScriptAttributes(node.attributes)) {
+    return false;
+  } else if (clientFetch.isUiNodeInputAttributes(node.attributes)) {
+    if (node.attributes.type === "hidden") {
+      return false;
+    }
+  }
+  return true;
+}
+function useNodeGroupsWithVisibleNodes(nodes) {
+  return react.useMemo(() => {
+    var _a, _b;
+    const groups = {};
+    const groupRetained = {};
+    for (const node of nodes) {
+      const groupNodes = (_a = groups[node.group]) != null ? _a : [];
+      const groupCount = (_b = groupRetained[node.group]) != null ? _b : 0;
+      groupNodes.push(node);
+      groups[node.group] = groupNodes;
+      if (!isNodeVisible(node)) {
+        continue;
+      }
+      groupRetained[node.group] = groupCount + 1;
+    }
+    const finalGroups = {};
+    for (const [group, count] of Object.entries(groupRetained)) {
+      if (count > 0) {
+        finalGroups[group] = groups[group];
+      }
+    }
+    return finalGroups;
+  }, [nodes]);
+}
+
+// src/components/card/two-step/utils.ts
+function isChoosingMethod(flow) {
+  return flow.flow.ui.nodes.some(
+    (node) => "name" in node.attributes && node.attributes.name === "screen" && "value" in node.attributes && node.attributes.value === "previous"
+  ) || flow.flow.ui.nodes.some(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
+  ) || flow.flowType === clientFetch.FlowType.Login && flow.flow.requested_aal === "aal2";
+}
+function getFinalNodes(uniqueGroups, selectedGroup) {
+  var _a, _b, _c, _d;
+  const selectedNodes = selectedGroup ? (_a = uniqueGroups[selectedGroup]) != null ? _a : [] : [];
+  return [
+    ...(_b = uniqueGroups == null ? void 0 : uniqueGroups.identifier_first) != null ? _b : [],
+    ...(_c = uniqueGroups == null ? void 0 : uniqueGroups.default) != null ? _c : [],
+    ...(_d = uniqueGroups == null ? void 0 : uniqueGroups.captcha) != null ? _d : []
+  ].flat().filter(
+    (node) => "type" in node.attributes && node.attributes.type === "hidden"
+  ).concat(selectedNodes);
+}
+var handleAfterFormSubmit = (dispatchFormState) => (method) => {
+  if (typeof method !== "string" || !isUiNodeGroupEnum(method)) {
+    return;
+  }
+  if (isGroupImmediateSubmit(method)) {
+    dispatchFormState({
+      type: "action_select_method",
+      method
+    });
+  }
+};
 
 // src/context/form-state.ts
 function findMethodWithMessage(nodes) {
@@ -492,15 +566,11 @@ function OryCardContent({ children }) {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsxRuntime.jsx(Card.Content, { children });
 }
-
-// src/theme/default/utils/form.ts
-function isGroupImmediateSubmit(group) {
-  return group === "code";
-}
 function frontendClient(sdkUrl, opts = {}) {
   const config = new clientFetch.Configuration({
     ...opts,
     basePath: sdkUrl,
+    credentials: "include",
     headers: {
       Accept: "application/json",
       ...opts.headers
@@ -894,6 +964,9 @@ function OryForm({
   const onSubmit = useOryFormSubmit(onAfterSubmit);
   const hasMethods = flowContainer.flow.ui.nodes.some((node) => {
     if (clientFetch.isUiNodeInputAttributes(node.attributes)) {
+      if (node.attributes.type === "hidden") {
+        return false;
+      }
       return node.attributes.name !== "csrf_token";
     } else if (clientFetch.isUiNodeAnchorAttributes(node.attributes)) {
       return true;
@@ -915,7 +988,7 @@ function OryForm({
     };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": dataTestId, children: /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { message: m }, m.id) }) });
   }
-  if (flowContainer.flowType === clientFetch.FlowType.Login && flowContainer.formState.current === "method_active" && flowContainer.formState.method === "code") {
+  if ((flowContainer.flowType === clientFetch.FlowType.Login || flowContainer.flowType === clientFetch.FlowType.Registration) && flowContainer.formState.current === "method_active" && flowContainer.formState.method === "code") {
     methods.setValue("method", "code");
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1113,7 +1186,7 @@ function OryFormOidcButtons() {
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Form.OidcRoot, { nodes: filteredNodes, children: filteredNodes.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Form.OidcRoot, { nodes: filteredNodes, children: filteredNodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
     Node2.OidcButton,
     {
       node,
@@ -1126,7 +1199,7 @@ function OryFormOidcButtons() {
         setValue("method", node.group);
       }
     },
-    k
+    clientFetch.getNodeId(node)
   )) });
 }
 function OryFormSocialButtonsForm() {
@@ -1141,24 +1214,104 @@ function OryFormSocialButtonsForm() {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { "data-testid": `ory/form/methods/oidc-saml`, children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
 }
-function isUINodeGroupEnum(method) {
-  return Object.values(clientFetch.UiNodeGroupEnum).includes(method);
+function OryTwoStepCardStateMethodActive({
+  formState
+}) {
+  const { Form } = useComponents();
+  const { flow, flowType, dispatchFormState } = useOryFlow();
+  const { ui } = flow;
+  const nodeSorter = useNodeSorter();
+  const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
+  const groupsToShow = useNodeGroupsWithVisibleNodes(ui.nodes);
+  const finalNodes = getFinalNodes(groupsToShow, formState.method);
+  const selectedMethodIsSocial = formState.method === clientFetch.UiNodeGroupEnum.Oidc || formState.method === clientFetch.UiNodeGroupEnum.Saml;
+  return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
+      selectedMethodIsSocial && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OryForm,
+        {
+          "data-testid": `ory/form/methods/local`,
+          onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+            ui.nodes.filter(
+              (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Captcha || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
+            ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+            finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+  ] });
 }
-function OryTwoStepCard() {
-  var _a, _b, _c, _d;
+function OryTwoStepCardStateProvideIdentifier() {
   const { Form, Card } = useComponents();
-  const { flow, flowType, formState, dispatchFormState } = useOryFlow();
-  const { ui } = flow;
+  const { flowType, flow, dispatchFormState } = useOryFlow();
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
-  const groupsToShow = useNodesGroups(ui.nodes, {
-    // We only want to render groups that have visible elements.
-    omit: ["script", "input_hidden"]
-  });
-  const authMethodBlocks = Object.fromEntries(
+  const nonSsoNodes = withoutSingleSignOnNodes(flow.ui.nodes).sort(sortNodes);
+  const hasSso = flow.ui.nodes.filter(isNodeVisible).some(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
+  );
+  const showSsoDivider = hasSso && nonSsoNodes.some(isNodeVisible);
+  return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OryForm,
+        {
+          "data-testid": `ory/form/methods/local`,
+          onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+            showSsoDivider && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+            nonSsoNodes.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+  ] });
+}
+function AuthMethodList({
+  options,
+  setSelectedGroup
+}) {
+  const { Card } = useComponents();
+  const { setValue, getValues } = reactHookForm.useFormContext();
+  if (Object.entries(options).length === 0) {
+    return null;
+  }
+  const handleClick = (group, options2) => {
+    var _a, _b, _c, _d;
+    if (isGroupImmediateSubmit(group)) {
+      if (group === "code" && !getValues("identifier") && ((_b = (_a = options2 == null ? void 0 : options2.title) == null ? void 0 : _a.values) == null ? void 0 : _b.address)) {
+        setValue("identifier", (_d = (_c = options2 == null ? void 0 : options2.title) == null ? void 0 : _c.values) == null ? void 0 : _d.address);
+      }
+      setValue("method", group);
+    } else {
+      setSelectedGroup(group);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Card.AuthMethodListContainer, { children: Object.entries(options).map(([group, options2]) => /* @__PURE__ */ jsxRuntime.jsx(
+    Card.AuthMethodListItem,
+    {
+      group,
+      title: options2.title,
+      onClick: () => handleClick(group, options2)
+    },
+    group
+  )) });
+}
+function toAuthMethodPickerOptions(visibleGroups) {
+  return Object.fromEntries(
     Object.values(clientFetch.UiNodeGroupEnum).filter((group) => {
-      var _a2;
-      return (_a2 = groupsToShow.groups[group]) == null ? void 0 : _a2.length;
+      var _a;
+      return (_a = visibleGroups[group]) == null ? void 0 : _a.length;
     }).filter(
       (group) => ![
         clientFetch.UiNodeGroupEnum.Oidc,
@@ -1170,16 +1323,18 @@ function OryTwoStepCard() {
       ].includes(group)
     ).map((g) => [g, {}])
   );
-  const authMethodAdditionalNodes = ui.nodes.filter(
-    ({ group }) => [
-      clientFetch.UiNodeGroupEnum.Oidc,
-      clientFetch.UiNodeGroupEnum.Saml,
-      clientFetch.UiNodeGroupEnum.Default,
-      clientFetch.UiNodeGroupEnum.IdentifierFirst,
-      clientFetch.UiNodeGroupEnum.Profile,
-      clientFetch.UiNodeGroupEnum.Captcha
-    ].includes(group)
-  );
+}
+function OryTwoStepCardStateSelectMethod() {
+  var _a, _b, _c, _d;
+  const { Form, Card, Message } = useComponents();
+  const { flow, flowType, dispatchFormState } = useOryFlow();
+  const { ui } = flow;
+  const intl = reactIntl.useIntl();
+  const nodeSorter = useNodeSorter();
+  const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
+  const visibleGroups = useNodeGroupsWithVisibleNodes(ui.nodes);
+  const authMethodBlocks = toAuthMethodPickerOptions(visibleGroups);
+  const authMethodAdditionalNodes = useFunctionalNodes(ui.nodes);
   if (clientFetch.UiNodeGroupEnum.Code in authMethodBlocks) {
     let identifier = (_b = (_a = findNode(ui.nodes, {
       group: "identifier_first",
@@ -1200,137 +1355,59 @@ function OryTwoStepCard() {
       };
     }
   }
-  const nonSsoNodes = removeSsoNodes(ui.nodes);
-  const finalNodes = formState.current === "method_active" ? getFinalNodes(groupsToShow.groups, formState.method) : [];
-  const handleAfterFormSubmit = (method) => {
-    if (typeof method !== "string" || !isUINodeGroupEnum(method)) {
-      return;
-    }
-    if (isGroupImmediateSubmit(method)) {
-      dispatchFormState({
-        type: "action_select_method",
-        method
-      });
-    }
+  const noMethods = {
+    id: 5000002,
+    text: intl.formatMessage({
+      id: `identities.messages.5000002`,
+      defaultMessage: "No authentication methods are available for this request. Please contact the site or app owner."
+    }),
+    type: "error"
   };
-  const hasSso = ui.nodes.some(
-    (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
-  );
-  const showSso = !(formState.current === "method_active" && !(formState.method === clientFetch.UiNodeGroupEnum.Oidc || formState.method === clientFetch.UiNodeGroupEnum.Saml));
-  const showSsoDivider = hasSso && nonSsoNodes.some((n) => {
-    if (clientFetch.isUiNodeInputAttributes(n.attributes)) {
-      return n.attributes.type !== clientFetch.UiNodeInputAttributesTypeEnum.Hidden;
-    } else if (clientFetch.isUiNodeScriptAttributes(n.attributes)) {
-      return false;
-    }
-    return true;
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
+      Object.entries(authMethodBlocks).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        OryForm,
+        {
+          "data-testid": `ory/form/methods/local`,
+          onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AuthMethodList,
+              {
+                options: authMethodBlocks,
+                setSelectedGroup: (group) => dispatchFormState({
+                  type: "action_select_method",
+                  method: group
+                })
+              }
+            ),
+            authMethodAdditionalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          ] })
+        }
+      ) : !hasSingleSignOnNodes(ui.nodes) && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": `ory/form/methods/local`, children: /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { message: noMethods }, noMethods.id) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+  ] });
+}
+function OryTwoStepCard() {
+  const { formState } = useOryFlow();
   switch (formState.current) {
     case "provide_identifier":
-      return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-          showSso && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            OryForm,
-            {
-              "data-testid": `ory/form/methods/local`,
-              onAfterSubmit: handleAfterFormSubmit,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-                showSsoDivider && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-                nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-              ] })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(OryTwoStepCardStateProvideIdentifier, {});
     case "select_method":
-      return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-          showSso && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-          Object.entries(authMethodBlocks).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            OryForm,
-            {
-              "data-testid": `ory/form/methods/local`,
-              onAfterSubmit: handleAfterFormSubmit,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  AuthMethodList,
-                  {
-                    options: authMethodBlocks,
-                    setSelectedGroup: (group) => dispatchFormState({
-                      type: "action_select_method",
-                      method: group
-                    })
-                  }
-                ),
-                authMethodAdditionalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-              ] })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(OryTwoStepCardStateSelectMethod, {});
     case "method_active":
-      return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-          showSso && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            OryForm,
-            {
-              "data-testid": `ory/form/methods/local`,
-              onAfterSubmit: handleAfterFormSubmit,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-                ui.nodes.filter(
-                  (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Captcha || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
-                ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
-                finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-              ] })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(OryTwoStepCardStateMethodActive, { formState });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     "unknown form state: ",
     formState.current
   ] });
 }
-function AuthMethodList({ options, setSelectedGroup }) {
-  const { Card } = useComponents();
-  const { setValue, getValues } = reactHookForm.useFormContext();
-  if (Object.entries(options).length === 0) {
-    return null;
-  }
-  const handleClick = (group, options2) => {
-    var _a, _b, _c, _d;
-    if (isGroupImmediateSubmit(group)) {
-      if (group === "code" && !getValues("identifier") && ((_b = (_a = options2 == null ? void 0 : options2.title) == null ? void 0 : _a.values) == null ? void 0 : _b.address)) {
-        setValue("identifier", (_d = (_c = options2 == null ? void 0 : options2.title) == null ? void 0 : _c.values) == null ? void 0 : _d.address);
-      }
-      setValue("method", group);
-    } else {
-      setSelectedGroup(group);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(Card.AuthMethodListContainer, { children: Object.entries(options).map(([group, options2]) => /* @__PURE__ */ jsxRuntime.jsx(
-    Card.AuthMethodListItem,
-    {
-      group,
-      title: options2.title,
-      onClick: () => handleClick(group, options2)
-    },
-    group
-  )) });
-}
 function OryFormGroups({ groups }) {
   const {
     flow: { ui }
@@ -1339,8 +1416,8 @@ function OryFormGroups({ groups }) {
   const { flowType } = useOryFlow();
   const { Form } = useComponents();
   const nodes = ui.nodes.filter((node) => groups.indexOf(node.group) > -1).sort((a, b) => nodeSorter(a, b, { flowType }));
-  return /* @__PURE__ */ jsxRuntime.jsx(Form.Group, { children: nodes.map((node, k) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k);
+  return /* @__PURE__ */ jsxRuntime.jsx(Form.Group, { children: nodes.map((node) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node));
   }) });
 }
 function OryFormSection({
@@ -1376,7 +1453,7 @@ function OryConsentCard() {
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsx(OryCardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(OryForm, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(Form.Group, { children: flow.flow.ui.nodes.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Form.Group, { children: flow.flow.ui.nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node))) }),
       /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
       /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
     ] }) })
@@ -1747,7 +1824,7 @@ function SettingsSectionContent({ group, nodes }) {
         "data-testid": "ory/screen/settings/group/totp",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(OrySettingsTotp, { nodes: (_a = groupedNodes.groups.totp) != null ? _a : [] }),
-          (_b = groupedNodes.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          (_b = groupedNodes.groups.default) == null ? void 0 : _b.map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node)))
         ]
       }
     );
@@ -1765,7 +1842,7 @@ function SettingsSectionContent({ group, nodes }) {
               nodes: (_c = groupedNodes.groups.lookup_secret) != null ? _c : []
             }
           ),
-          (_d = groupedNodes.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          (_d = groupedNodes.groups.default) == null ? void 0 : _d.map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node)))
         ]
       }
     );
@@ -1778,7 +1855,7 @@ function SettingsSectionContent({ group, nodes }) {
         "data-testid": "ory/screen/settings/group/oidc",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(OrySettingsOidc, { nodes: (_e = groupedNodes.groups.oidc) != null ? _e : [] }),
-          (_f = groupedNodes.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          (_f = groupedNodes.groups.default) == null ? void 0 : _f.map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node)))
         ]
       }
     );
@@ -1791,7 +1868,7 @@ function SettingsSectionContent({ group, nodes }) {
         "data-testid": "ory/screen/settings/group/webauthn",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(OrySettingsWebauthn, { nodes: (_g = groupedNodes.groups.webauthn) != null ? _g : [] }),
-          (_h = groupedNodes.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          (_h = groupedNodes.groups.default) == null ? void 0 : _h.map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node)))
         ]
       }
     );
@@ -1804,7 +1881,7 @@ function SettingsSectionContent({ group, nodes }) {
         "data-testid": "ory/screen/settings/group/passkey",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(OrySettingsPasskey, { nodes: (_i = groupedNodes.groups.passkey) != null ? _i : [] }),
-          (_j = groupedNodes.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          (_j = groupedNodes.groups.default) == null ? void 0 : _j.map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node)))
         ]
       }
     );
@@ -1825,16 +1902,16 @@ function SettingsSectionContent({ group, nodes }) {
               id: `settings.${group}.description`
             }),
             children: [
-              (_k = groupedNodes.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+              (_k = groupedNodes.groups.default) == null ? void 0 : _k.map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node))),
               nodes.filter(
                 (node) => "type" in node.attributes && node.attributes.type !== "submit"
-              ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+              ).map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node)))
             ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(Card.SettingsSectionFooter, { children: nodes.filter(
           (node) => "type" in node.attributes && node.attributes.type === "submit"
-        ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)) })
+        ).map((node) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, clientFetch.getNodeId(node))) })
       ]
     }
   );
@@ -1848,7 +1925,7 @@ function OrySettingsCard() {
   const scriptNodes = onlyScriptNodes(flow.ui.nodes);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-    scriptNodes.map((n) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node: n })),
+    scriptNodes.map((n) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node: n }, clientFetch.getNodeId(n))),
     uniqueGroups.entries.map(([group, nodes]) => {
       if (group === clientFetch.UiNodeGroupEnum.Default) {
         return null;
@@ -2155,9 +2232,11 @@ var en_default = {
   "card.header.parts.oidc": "a social provider",
   "card.header.parts.password.registration": "your {identifierLabel} and a password",
   "card.header.parts.password.login": "your {identifierLabel} and password",
-  "card.header.parts.code": "a code sent to your email",
+  "card.header.parts.code": "a code sent to you",
   "card.header.parts.passkey": "a Passkey",
   "card.header.parts.webauthn": "a security key",
+  "card.header.parts.totp": "your authenticator app",
+  "card.header.parts.lookup_secret": "a backup recovery code",
   "card.header.parts.identifier-first": "your {identifierLabel}",
   "card.header.description.login": "Sign in with {identifierLabel}",
   "card.header.description.registration": "Sign up with {identifierLabel}",
@@ -2405,13 +2484,15 @@ var de_default = {
   "identities.messages.4010009": "Die Authentifizierungsmethode stimmt nicht mit der vorherigen Authentifizierungsmethode \xFCberein. Bitte versuchen Sie es erneut.",
   "identities.messages.4010010": "Die eingegebene Adresse stimmt nicht mit der Adresse \xFCberein, die Sie bei der Registrierung angegeben haben. Bitte versuchen Sie es erneut.",
   "input.placeholder": "{placeholder} eingeben",
-  "card.header.parts.code": "einem Code per E-Mail",
+  "card.header.parts.code": "ein an Sie gesendeter Code",
   "card.header.parts.identifier-first": "Ihr {identifierLabel}",
   "card.header.parts.oidc": "ein sozialer Anbieter",
   "card.header.parts.passkey": "ein Passkey",
   "card.header.parts.password.login": "Ihrer {identifierLabel} und Ihrem Passwort",
   "card.header.parts.password.registration": "Ihrer {identifierLabel} und einem Passwort",
   "card.header.parts.webauthn": "ein Sicherheitsschl\xFCssel",
+  "card.header.parts.totp": "deine Authentifikator-App",
+  "card.header.parts.lookup_secret": "ein Backup-Wiederherstellungscode",
   "recovery.subtitle": "Geben Sie die mit Ihrem Konto verkn\xFCpfte E-Mail-Adresse ein, um einen einmaligen Zugangscode zu erhalten",
   "verification.subtitle": "Geben Sie die mit Ihrem Konto verkn\xFCpfte E-Mail-Adresse ein, um es zu best\xE4tigen",
   "card.header.description.login": "Melden Sie sich mit {identifierLabel} an",
@@ -2750,6 +2831,8 @@ var es_default = {
   "card.header.parts.code": "un c\xF3digo enviado a tu correo electr\xF3nico",
   "card.header.parts.passkey": "una clave de acceso",
   "card.header.parts.webauthn": "una clave de seguridad",
+  "card.header.parts.totp": "su aplicaci\xF3n de autenticaci\xF3n",
+  "card.header.parts.lookup_secret": "un c\xF3digo de recuperaci\xF3n de copia de seguridad",
   "card.header.parts.identifier-first": "tu {identifierLabel}",
   "card.header.description.login": "Iniciar sesi\xF3n con {identifierLabel}",
   "card.header.description.registration": "Registrarse con {identifierLabel}",
@@ -3027,10 +3110,12 @@ var fr_default = {
   "card.header.parts.oidc": "un fournisseur de r\xE9seaux sociaux",
   "card.header.parts.password.registration": "votre {identifierLabel} et un mot de passe",
   "card.header.parts.password.login": "votre {identifierLabel} et votre mot de passe",
-  "card.header.parts.code": "un code envoy\xE9 \xE0 votre adresse e-mail",
   "card.header.parts.passkey": "une cl\xE9 d'acc\xE8s",
   "card.header.parts.webauthn": "une cl\xE9 de s\xE9curit\xE9",
   "card.header.parts.identifier-first": "votre {identifierLabel}",
+  "card.header.parts.code": "un code qui vous a \xE9t\xE9 envoy\xE9",
+  "card.header.parts.totp": "votre application d'authentification",
+  "card.header.parts.lookup_secret": "un code de r\xE9cup\xE9ration de secours",
   "card.header.description.login": "Se connecter avec {identifierLabel}",
   "card.header.description.registration": "S'inscrire avec {identifierLabel}",
   "misc.or": "ou",
@@ -3273,7 +3358,9 @@ var nl_default = {
   "input.placeholder": "",
   "card.header.description.login": "",
   "card.header.description.registration": "",
-  "card.header.parts.code": "",
+  "card.header.parts.code": "een code die naar je is verzonden",
+  "card.header.parts.totp": "je authenticator-app",
+  "card.header.parts.lookup_secret": "een backup herstelcode",
   "card.header.parts.identifier-first": "",
   "card.header.parts.oidc": "",
   "card.header.parts.passkey": "",
@@ -3558,13 +3645,15 @@ var pl_default = {
   "input.placeholder": "",
   "card.header.description.login": "",
   "card.header.description.registration": "",
-  "card.header.parts.code": "",
   "card.header.parts.identifier-first": "",
   "card.header.parts.oidc": "",
   "card.header.parts.passkey": "",
   "card.header.parts.password.login": "",
   "card.header.parts.password.registration": "",
   "card.header.parts.webauthn": "",
+  "card.header.parts.code": "kod wys\u0142any do Ciebie",
+  "card.header.parts.totp": "Twoja aplikacja uwierzytelniaj\u0105ca",
+  "card.header.parts.lookup_secret": "kod odzyskiwania kopii zapasowej",
   "forms.label.forgot-password": "",
   "login.subtitle": "",
   "login.subtitle-refresh": "",
@@ -3843,7 +3932,9 @@ var pt_default = {
   "input.placeholder": "",
   "card.header.description.login": "",
   "card.header.description.registration": "",
-  "card.header.parts.code": "",
+  "card.header.parts.code": "um c\xF3digo enviado para voc\xEA",
+  "card.header.parts.totp": "seu aplicativo autenticador",
+  "card.header.parts.lookup_secret": "um c\xF3digo de recupera\xE7\xE3o de backup",
   "card.header.parts.identifier-first": "",
   "card.header.parts.oidc": "",
   "card.header.parts.passkey": "",
@@ -4128,7 +4219,9 @@ var sv_default = {
   "input.placeholder": "Ange din {placeholder}",
   "card.header.description.login": "Logga in med {identifierLabel}",
   "card.header.description.registration": "Registrera dig med {identifierLabel}",
-  "card.header.parts.code": "en kod skickad till din e-post",
+  "card.header.parts.code": "en kod skickad till dig",
+  "card.header.parts.totp": "din autentiseringsapp",
+  "card.header.parts.lookup_secret": "en s\xE4kerhetskopieringskod",
   "card.header.parts.identifier-first": "din {identifierLabel}",
   "card.header.parts.oidc": "en social leverant\xF6r",
   "card.header.parts.passkey": "en Passkey",