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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.0.0-rc.1 (2025-04-21)
+
+### 🩹 Fixes
+
+- re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
+- resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
+- add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
+- resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
+
+### ❤️ Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-rc.0 (2025-04-17)
 
 ### 🚀 Features

package/dist/index.d.mts

@@ -565,14 +565,17 @@ declare function messageTestId(message: UiText): {
     "data-testid": string;
 };
 
-type FormState = {
-    current: "provide_identifier";
-} | {
+type FormStateSelectMethod = {
     current: "select_method";
-} | {
+};
+type FormStateProvideIdentifier = {
+    current: "provide_identifier";
+};
+type FormStateMethodActive = {
     current: "method_active";
     method: UiNodeGroupEnum;
-} | {
+};
+type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
     current: "success_screen";
 } | {
     current: "settings";
@@ -619,4 +622,4 @@ type OryProviderProps = {
 } & OryFlowContainer & PropsWithChildren;
 declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };

package/dist/index.d.ts

@@ -565,14 +565,17 @@ declare function messageTestId(message: UiText): {
     "data-testid": string;
 };
 
-type FormState = {
-    current: "provide_identifier";
-} | {
+type FormStateSelectMethod = {
     current: "select_method";
-} | {
+};
+type FormStateProvideIdentifier = {
+    current: "provide_identifier";
+};
+type FormStateMethodActive = {
     current: "method_active";
     method: UiNodeGroupEnum;
-} | {
+};
+type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
     current: "success_screen";
 } | {
     current: "settings";
@@ -619,4 +622,4 @@ type OryProviderProps = {
 } & OryFlowContainer & PropsWithChildren;
 declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };

package/dist/index.js

@@ -94,28 +94,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 +209,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,11 +561,6 @@ 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,
@@ -894,6 +958,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 +982,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(
@@ -1141,24 +1208,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 +1317,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 +1349,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 }