@ory/elements-react 1.0.0-next.14 → 1.0.0-next.15

package/dist/index.js

@@ -85,6 +85,71 @@ function OryComponentProvider({
     }
   );
 }
+function isChoosingMethod(uiNodes) {
+  return uiNodes.some(
+    (node) => "name" in node.attributes && node.attributes.name === "screen" && "value" in node.attributes && node.attributes.value === "previous"
+  ) || uiNodes.some(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
+  );
+}
+function filterZeroStepGroups(nodes) {
+  return nodes.filter((node) => node.group !== clientFetch.UiNodeGroupEnum.Oidc);
+}
+function getFinalNodes(uniqueGroups, selectedGroup) {
+  var _a, _b, _c;
+  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 : []
+  ].flat().filter(
+    (node) => "type" in node.attributes && node.attributes.type === "hidden"
+  ).concat(selectedNodes);
+}
+
+// src/context/form-state.ts
+function parseStateFromFlow(flow) {
+  switch (flow.flowType) {
+    case clientFetch.FlowType.Registration:
+    case clientFetch.FlowType.Login:
+      if (flow.flow.active == "link_recovery") {
+        return { current: "method_active", method: "link" };
+      } else if (flow.flow.active == "code_recovery") {
+        return { current: "method_active", method: "code" };
+      } else if (isChoosingMethod(flow.flow.ui.nodes)) {
+        return { current: "select_method" };
+      } else if (flow.flow.active) {
+        return { current: "method_active", method: flow.flow.active };
+      }
+      return { current: "provide_identifier" };
+    case clientFetch.FlowType.Recovery:
+    case clientFetch.FlowType.Verification:
+      if (flow.flow.active === "code" || flow.flow.active === "link") {
+        if (flow.flow.state === "choose_method") {
+          return { current: "provide_identifier" };
+        }
+        return { current: "method_active", method: flow.flow.active };
+      }
+      break;
+    case clientFetch.FlowType.Settings:
+      return { current: "settings" };
+  }
+  console.warn(
+    `[Ory/Elements React] Encountered an unknown form state on ${flow.flowType} flow with ID ${flow.flow.id}`
+  );
+  throw new Error("Unknown form state");
+}
+function formStateReducer(state, action) {
+  switch (action.type) {
+    case "action_flow_update":
+      return parseStateFromFlow(action.flow);
+    case "action_select_method":
+      return { current: "method_active", method: action.method };
+  }
+  return state;
+}
+function useFormStateReducer(flow) {
+  return react.useReducer(formStateReducer, parseStateFromFlow(flow));
+}
 function useOryFlow() {
   const ctx = react.useContext(OryFlowContext);
   if (!ctx) {
@@ -98,19 +163,21 @@ function OryFlowProvider({
   ...container
 }) {
   const [flowContainer, setFlowContainer] = react.useState(container);
+  const [formState, dispatchFormState] = useFormStateReducer(container);
   return /* @__PURE__ */ jsxRuntime.jsx(
     OryFlowContext.Provider,
     {
       value: {
         ...flowContainer,
-        setFlowContainer: (updatedContainer) => {
-          setFlowContainer(
-            (container2) => ({
-              ...container2,
-              ...updatedContainer
-            })
-          );
-        }
+        setFlowContainer: (flowContainer2) => {
+          setFlowContainer(flowContainer2);
+          dispatchFormState({
+            type: "action_flow_update",
+            flow: flowContainer2
+          });
+        },
+        formState,
+        dispatchFormState
       },
       children
     }
@@ -359,7 +426,8 @@ var en_default = {
   "settings.webauthn.info": "Hardware Tokens are used for second-factor authentication or as first-factor with Passkeys",
   "settings.passkey.title": "Manage Passkeys",
   "settings.passkey.description": "Manage your passkey settings",
-  "settings.passkey.info": "Manage your passkey settings"
+  "settings.passkey.info": "Manage your passkey settings",
+  "card.footer.select-another-method": "Select another method"
 };
 
 // src/locales/de.json
@@ -604,7 +672,8 @@ var de_default = {
   "settings.title-profile": "Profileinstellungen",
   "settings.title-totp": "Verwalten Sie die 2FA TOTP Authenticator-App",
   "settings.title-webauthn": "Hardware-Token verwalten",
-  "settings.webauthn.info": "Hardware-Tokens werden f\xFCr die Zweitfaktor-Authentifizierung oder als Erstfaktor-Authentifizierung mit Passkeys verwendet"
+  "settings.webauthn.info": "Hardware-Tokens werden f\xFCr die Zweitfaktor-Authentifizierung oder als Erstfaktor-Authentifizierung mit Passkeys verwendet",
+  "card.footer.select-another-method": "Eine andere Methode verwenden"
 };
 
 // src/locales/es.json
@@ -849,7 +918,8 @@ var es_default = {
   "settings.title-profile": "",
   "settings.title-totp": "",
   "settings.title-webauthn": "",
-  "settings.webauthn.info": ""
+  "settings.webauthn.info": "",
+  "card.footer.select-another-method": ""
 };
 
 // src/locales/fr.json
@@ -1094,7 +1164,8 @@ var fr_default = {
   "settings.title-webauthn": "",
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
-  "settings.webauthn.title": ""
+  "settings.webauthn.title": "",
+  "card.footer.select-another-method": ""
 };
 
 // src/locales/nl.json
@@ -1339,7 +1410,8 @@ var nl_default = {
   "settings.title-webauthn": "",
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
-  "settings.webauthn.title": ""
+  "settings.webauthn.title": "",
+  "card.footer.select-another-method": ""
 };
 
 // src/locales/pl.json
@@ -1584,7 +1656,8 @@ var pl_default = {
   "settings.title-webauthn": "",
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
-  "settings.webauthn.title": ""
+  "settings.webauthn.title": "",
+  "card.footer.select-another-method": ""
 };
 
 // src/locales/pt.json
@@ -1829,7 +1902,8 @@ var pt_default = {
   "settings.title-webauthn": "",
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
-  "settings.webauthn.title": ""
+  "settings.webauthn.title": "",
+  "card.footer.select-another-method": ""
 };
 
 // src/locales/sv.json
@@ -2074,7 +2148,8 @@ var sv_default = {
   "settings.title-webauthn": "Hantera maskinvarutokens",
   "settings.webauthn.description": "Hantera inst\xE4llningarna f\xF6r din maskinvarutoken",
   "settings.webauthn.info": "H\xE5rdvarutokens anv\xE4nds f\xF6r andrafaktorsautentisering eller som f\xF6rstafaktor med l\xF6senordsnycklar",
-  "settings.webauthn.title": "Hantera maskinvarutokens"
+  "settings.webauthn.title": "Hantera maskinvarutokens",
+  "card.footer.select-another-method": "V\xE4lj en annan metod"
 };
 
 // src/locales/index.ts
@@ -2133,131 +2208,374 @@ function OryCardHeader() {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsxRuntime.jsx(Card.Header, {});
 }
-function triggerToWindowCall(trigger) {
-  if (!trigger) {
-    return;
-  }
-  const fn = triggerToFunction(trigger);
-  if (fn) {
-    fn();
-    return;
-  }
-  let i = 0;
-  const ms = 250;
-  const interval = setInterval(() => {
-    i++;
-    if (i > 20) {
-      clearInterval(interval);
-      throw new Error(
-        "Unable to load Ory's WebAuthn script. Is it being blocked or otherwise failing to load? If you are running an old version of Ory Elements, please upgrade. For more information, please check your browser's developer console."
-      );
-    }
-    const fn2 = triggerToFunction(trigger);
-    if (fn2) {
-      clearInterval(interval);
-      return fn2();
+function frontendClient(sdkUrl, opts = {}) {
+  const config = new clientFetch.Configuration({
+    ...opts,
+    basePath: sdkUrl,
+    headers: {
+      Accept: "application/json",
+      ...opts.headers
     }
-  }, ms);
-  return;
+  });
+  return new clientFetch.FrontendApi(config);
 }
-function triggerToFunction(trigger) {
-  if (typeof window === "undefined") {
-    console.error(
-      "The Ory SDK is missing a required function: window is undefined."
+
+// src/util/onSubmitLogin.ts
+async function onSubmitLogin({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
     );
-    return void 0;
-  }
-  const typedWindow = window;
-  if (!(trigger in typedWindow) || !typedWindow[trigger]) {
-    console.error(`The Ory SDK is missing a required function: ${trigger}.`);
-    return void 0;
   }
-  const triggerFn = typedWindow[trigger];
-  if (typeof triggerFn !== "function") {
-    console.error(
-      `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
+  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateLoginFlowRaw({
+    flow: flow.id,
+    updateLoginFlowBody: body
+  }).then(() => {
+    var _a2;
+    window.location.href = (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
+  }).catch(
+    clientFetch.handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(clientFetch.loginUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          config,
+          flow: body2,
+          flowType: clientFetch.FlowType.Login
+        });
+      },
+      onRedirect
+    })
+  );
+}
+async function onSubmitRecovery({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
     );
-    return void 0;
   }
-  return triggerFn;
-}
-function useNodesGroups(nodes) {
-  const groupSorter = useGroupSorter();
-  const groups = react.useMemo(() => {
-    var _a;
-    const groups2 = {};
-    for (const node of nodes) {
-      const groupNodes = (_a = groups2[node.group]) != null ? _a : [];
-      groupNodes.push(node);
-      groups2[node.group] = groupNodes;
+  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateRecoveryFlowRaw({
+    flow: flow.id,
+    updateRecoveryFlowBody: body
+  }).then(async (res) => {
+    const flow2 = await res.value();
+    const didContinueWith = clientFetch.handleContinueWith(flow2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
     }
-    return groups2;
-  }, [nodes]);
-  const entries = react.useMemo(
-    () => Object.entries(groups).sort(([a], [b]) => groupSorter(a, b)),
-    [groups, groupSorter]
+    setFlowContainer({
+      flow: flow2,
+      flowType: clientFetch.FlowType.Recovery,
+      config
+    });
+  }).catch(
+    clientFetch.handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(clientFetch.recoveryUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: clientFetch.FlowType.Recovery,
+          config
+        });
+      },
+      onRedirect
+    })
   );
-  return {
-    groups,
-    entries
-  };
 }
-var NodeInput = ({
-  node,
-  attributes
-}) => {
+async function onSubmitRegistration({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
   var _a;
-  const { Node: Node2 } = useComponents();
-  const { setValue } = reactHookForm.useFormContext();
-  const nodeType = attributes.type;
-  const {
-    onloadTrigger,
-    onclickTrigger,
-    // These properties do not exist on input fields so we remove them (as we already have handled them).
-    onclick: _ignoredOnclick,
-    onload: _ignoredOnload,
-    //
-    ...attrs
-  } = attributes;
-  const setFormValue = () => {
-    if (attrs.value) {
-      setValue(attrs.name, attrs.value);
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
+    );
+  }
+  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
+  await client.updateRegistrationFlowRaw({
+    flow: flow.id,
+    updateRegistrationFlowBody: body
+  }).then(async (res) => {
+    const body2 = await res.value();
+    const didContinueWith = clientFetch.handleContinueWith(body2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
     }
-  };
-  const hasRun = react.useRef(false);
-  react.useEffect(
-    () => {
-      setFormValue();
-      if (!hasRun.current && onloadTrigger) {
-        hasRun.current = true;
-        triggerToWindowCall(onloadTrigger);
-      }
-    },
-    // TODO(jonas): make sure onloadTrigger is stable
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
-    []
+    onRedirect(clientFetch.registrationUrl(config), true);
+  }).catch(
+    clientFetch.handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(clientFetch.registrationUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: clientFetch.FlowType.Registration,
+          config
+        });
+      },
+      onRedirect
+    })
   );
-  const handleClick = () => {
-    setFormValue();
-    if (onclickTrigger) {
-      triggerToWindowCall(onclickTrigger);
-    }
-  };
-  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
-  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
-  const isResend = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
-  switch (nodeType) {
-    case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
-    case clientFetch.UiNodeInputAttributesTypeEnum.Button:
-      if (isSocial) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Node2.OidcButton, { attributes: attrs, node });
-      }
-      if (isResend) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(Node2.Button, { attributes: attrs, node, onClick: handleClick });
-    case clientFetch.UiNodeInputAttributesTypeEnum.DatetimeLocal:
-      throw new Error("Not implemented");
+}
+async function onSubmitSettings({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
+    );
+  }
+  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
+  await client.updateSettingsFlowRaw({
+    flow: flow.id,
+    updateSettingsFlowBody: body
+  }).then(async (res) => {
+    const body2 = await res.value();
+    const didContinueWith = clientFetch.handleContinueWith(body2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
+    }
+    onRedirect(clientFetch.settingsUrl(config), true);
+  }).catch(
+    clientFetch.handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(clientFetch.settingsUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: clientFetch.FlowType.Settings,
+          config
+        });
+      },
+      onRedirect
+    })
+  ).catch((err) => {
+    if (clientFetch.isResponseError(err)) {
+      if (err.response.status === 401) {
+        return onRedirect(
+          clientFetch.loginUrl(config) + "?return_to=" + clientFetch.settingsUrl(config),
+          true
+        );
+      }
+      throw err;
+    }
+  });
+}
+async function onSubmitVerification({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK URL to the Ory Elements configuration.`
+    );
+  }
+  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateVerificationFlowRaw({
+    flow: flow.id,
+    updateVerificationFlowBody: body
+  }).then(
+    async (res) => setFlowContainer({
+      flow: await res.value(),
+      flowType: clientFetch.FlowType.Verification,
+      config
+    })
+  ).catch(
+    clientFetch.handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(clientFetch.verificationUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: clientFetch.FlowType.Verification,
+          config
+        });
+      },
+      onRedirect
+    })
+  );
+}
+function computeDefaultValues(nodes) {
+  return nodes.reduce((acc, node) => {
+    const attrs = node.attributes;
+    if (clientFetch.isUiNodeInputAttributes(attrs)) {
+      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined")
+        return acc;
+      const unrolled = unrollTrait({
+        name: attrs.name,
+        value: attrs.value
+      });
+      Object.assign(acc, unrolled != null ? unrolled : { [attrs.name]: attrs.value });
+    }
+    return acc;
+  }, {});
+}
+function unrollTrait(input, output = {}) {
+  const keys = input.name.split(".");
+  if (!keys.length) return void 0;
+  let current = output;
+  keys.forEach((key, index) => {
+    if (!key) return;
+    current = current[key] = index === keys.length - 1 ? input.value : current[key] || {};
+  });
+  return output;
+}
+function triggerToWindowCall(trigger) {
+  if (!trigger) {
+    return;
+  }
+  const fn = triggerToFunction(trigger);
+  if (fn) {
+    fn();
+    return;
+  }
+  let i = 0;
+  const ms = 100;
+  const interval = setInterval(() => {
+    i++;
+    if (i > 100) {
+      clearInterval(interval);
+      throw new Error(
+        "Unable to load Ory's WebAuthn script. Is it being blocked or otherwise failing to load? If you are running an old version of Ory Elements, please upgrade. For more information, please check your browser's developer console."
+      );
+    }
+    const fn2 = triggerToFunction(trigger);
+    if (fn2) {
+      clearInterval(interval);
+      return fn2();
+    }
+  }, ms);
+  return;
+}
+function triggerToFunction(trigger) {
+  if (typeof window === "undefined") {
+    console.error(
+      "The Ory SDK is missing a required function: window is undefined."
+    );
+    return void 0;
+  }
+  const typedWindow = window;
+  if (!(trigger in typedWindow) || !typedWindow[trigger]) {
+    console.error(`The Ory SDK is missing a required function: ${trigger}.`);
+    return void 0;
+  }
+  const triggerFn = typedWindow[trigger];
+  if (typeof triggerFn !== "function") {
+    console.error(
+      `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
+    );
+    return void 0;
+  }
+  return triggerFn;
+}
+function useNodesGroups(nodes) {
+  const groupSorter = useGroupSorter();
+  const groups = react.useMemo(() => {
+    var _a;
+    const groups2 = {};
+    for (const node of nodes) {
+      if (node.type === "script") {
+        continue;
+      }
+      const groupNodes = (_a = groups2[node.group]) != null ? _a : [];
+      groupNodes.push(node);
+      groups2[node.group] = groupNodes;
+    }
+    return groups2;
+  }, [nodes]);
+  const entries = react.useMemo(
+    () => Object.entries(groups).sort(([a], [b]) => groupSorter(a, b)),
+    [groups, groupSorter]
+  );
+  return {
+    groups,
+    entries
+  };
+}
+var NodeInput = ({
+  node,
+  attributes
+}) => {
+  var _a;
+  const { Node: Node2 } = useComponents();
+  const { setValue } = reactHookForm.useFormContext();
+  const {
+    onloadTrigger,
+    onclickTrigger,
+    // These properties do not exist on input fields so we remove them (as we already have handled them).
+    onclick: _ignoredOnclick,
+    onload: _ignoredOnload,
+    //
+    ...attrs
+  } = attributes;
+  const setFormValue = () => {
+    if (attrs.value) {
+      setValue(attrs.name, attrs.value);
+    }
+  };
+  const hasRun = react.useRef(false);
+  react.useEffect(
+    () => {
+      setFormValue();
+      if (!hasRun.current && onloadTrigger) {
+        hasRun.current = true;
+        triggerToWindowCall(onloadTrigger);
+      }
+    },
+    // TODO(jonas): make sure onloadTrigger is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
+    []
+  );
+  const handleClick = () => {
+    setFormValue();
+    if (onclickTrigger) {
+      triggerToWindowCall(onclickTrigger);
+    }
+  };
+  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
+  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
+  switch (attributes.type) {
+    case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
+    case clientFetch.UiNodeInputAttributesTypeEnum.Button:
+      if (isSocial) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Node2.OidcButton, { attributes: attrs, node });
+      }
+      if (isResendNode || isScreenSelectionNode) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(Node2.Button, { attributes: attrs, node, onClick: handleClick });
+    case clientFetch.UiNodeInputAttributesTypeEnum.DatetimeLocal:
+      throw new Error("Not implemented");
     case clientFetch.UiNodeInputAttributesTypeEnum.Checkbox:
       return /* @__PURE__ */ jsxRuntime.jsx(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick });
     case clientFetch.UiNodeInputAttributesTypeEnum.Hidden:
@@ -2364,245 +2682,11 @@ function OryFormSocialButtonsForm() {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) });
 }
-function computeDefaultValues(nodes) {
-  return nodes.reduce((acc, node) => {
-    var _a;
-    if (clientFetch.isUiNodeInputAttributes(node.attributes)) {
-      if (node.attributes.name === "method") {
-        return acc;
-      }
-      if (node.attributes.type === "submit") {
-        return acc;
-      }
-      acc[node.attributes.name] = (_a = node.attributes.value) != null ? _a : "";
-    }
-    return acc;
-  }, {});
-}
-function frontendClient(sdkUrl, opts = {}) {
-  const config = new clientFetch.Configuration({
-    ...opts,
-    basePath: sdkUrl,
-    headers: {
-      Accept: "application/json",
-      ...opts.headers
-    }
-  });
-  return new clientFetch.FrontendApi(config);
-}
-
-// src/util/onSubmitLogin.ts
-async function onSubmitLogin({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateLoginFlowRaw({
-    flow: flow.id,
-    updateLoginFlowBody: body
-  }).then(() => {
-    var _a2;
-    window.location.href = (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
-  }).catch(
-    clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.loginUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          config,
-          flow: body2,
-          flowType: clientFetch.FlowType.Login
-        });
-      },
-      onRedirect
-    })
-  );
-}
-async function onSubmitRegistration({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
-  await client.updateRegistrationFlowRaw({
-    flow: flow.id,
-    updateRegistrationFlowBody: body
-  }).then(async (res) => {
-    const body2 = await res.value();
-    const didContinueWith = clientFetch.handleContinueWith(body2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    onRedirect(clientFetch.registrationUrl(config), true);
-  }).catch(
-    clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.registrationUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: clientFetch.FlowType.Registration,
-          config
-        });
-      },
-      onRedirect
-    })
-  );
-}
-async function onSubmitVerification({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK URL to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateVerificationFlowRaw({
-    flow: flow.id,
-    updateVerificationFlowBody: body
-  }).then(
-    async (res) => setFlowContainer({
-      flow: await res.value(),
-      flowType: clientFetch.FlowType.Verification,
-      config
-    })
-  ).catch(
-    clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.verificationUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: clientFetch.FlowType.Verification,
-          config
-        });
-      },
-      onRedirect
-    })
-  );
-}
-async function onSubmitRecovery({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateRecoveryFlowRaw({
-    flow: flow.id,
-    updateRecoveryFlowBody: body
-  }).then(async (res) => {
-    const flow2 = await res.value();
-    const didContinueWith = clientFetch.handleContinueWith(flow2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    setFlowContainer({
-      flow: flow2,
-      flowType: clientFetch.FlowType.Recovery,
-      config
-    });
-  }).catch(
-    clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.recoveryUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: clientFetch.FlowType.Recovery,
-          config
-        });
-      },
-      onRedirect
-    })
-  );
-}
-async function onSubmitSettings({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
-  await client.updateSettingsFlowRaw({
-    flow: flow.id,
-    updateSettingsFlowBody: body
-  }).then(async (res) => {
-    const body2 = await res.value();
-    const didContinueWith = clientFetch.handleContinueWith(body2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    onRedirect(clientFetch.settingsUrl(config), true);
-  }).catch(
-    clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.settingsUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: clientFetch.FlowType.Settings,
-          config
-        });
-      },
-      onRedirect
-    })
-  ).catch((err) => {
-    if (clientFetch.isResponseError(err)) {
-      if (err.response.status === 401) {
-        return onRedirect(
-          clientFetch.loginUrl(config) + "?return_to=" + clientFetch.settingsUrl(config),
-          true
-        );
-      }
-      throw err;
-    }
-  });
-}
-function OryForm({ children, onAfterSubmit, nodes }) {
+function OryForm({ children, onAfterSubmit }) {
   var _a;
   const { Form } = useComponents();
   const flowContainer = useOryFlow();
-  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === clientFetch.UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
-  const methods = reactHookForm.useForm({
-    // TODO: Generify this, so we have typesafety in the submit handler.
-    defaultValues: computeDefaultValues(defaultNodes)
-  });
+  const methods = reactHookForm.useFormContext();
   const intl = reactIntl.useIntl();
   const onRedirect = (url, external) => {
     if (external) {
@@ -2715,7 +2799,7 @@ function OryForm({ children, onAfterSubmit, nodes }) {
       defaultMessage: "No authentication methods are available for this request. Please contact the site or app owner."
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Form.Root,
     {
       action: flowContainer.flow.ui.action,
@@ -2738,9 +2822,9 @@ function OryForm({ children, onAfterSubmit, nodes }) {
         )
       ] })
     }
-  ) });
+  );
 }
-var messageIdsToHide = [1040009];
+var messageIdsToHide = [1040009, 1060003, 1080003, 1010014, 1040005];
 function OryCardValidationMessages({ ...props }) {
   var _a;
   const { flow } = useOryFlow();
@@ -2753,9 +2837,21 @@ function OryCardValidationMessages({ ...props }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { ...props, children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { message }, message.id)) });
 }
+function OryFormProvider({
+  children,
+  nodes
+}) {
+  const flowContainer = useOryFlow();
+  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === clientFetch.UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
+  const methods = reactHookForm.useForm({
+    // TODO: Generify this, so we have typesafety in the submit handler.
+    defaultValues: computeDefaultValues(defaultNodes)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children });
+}
 function OryFormSection({ children, nodes }) {
   const { Card } = useComponents();
-  return /* @__PURE__ */ jsxRuntime.jsx(OryForm, { nodes, children: /* @__PURE__ */ jsxRuntime.jsx(Card.SettingsSection, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(Card.SettingsSection, { children }) }) });
 }
 function OryCardContent({ children }) {
   const { Card } = useComponents();
@@ -2787,38 +2883,18 @@ function OryCardContent({ children }) {
 function OryCard({ children }) {
   const { Card } = useComponents();
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card.Root, { children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Card.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card.Root, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Card.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(OryFormProvider, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsx(OryCardContent, {}),
     /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-  ] });
+  ] }) });
 }
 function OryCardFooter() {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsxRuntime.jsx(Card.Footer, {});
 }
-function isChoosingMethod(uiNodes) {
-  return uiNodes.some(
-    (node) => "name" in node.attributes && node.attributes.name === "screen" && "value" in node.attributes && node.attributes.value === "previous"
-  ) || uiNodes.some(
-    (node) => node.group === clientFetch.UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
-  );
-}
-function filterZeroStepGroups(nodes) {
-  return nodes.filter((node) => node.group !== clientFetch.UiNodeGroupEnum.Oidc);
-}
-function getFinalNodes(uniqueGroups, selectedGroup) {
-  var _a, _b, _c;
-  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 : []
-  ].flat().filter(
-    (node) => "type" in node.attributes && node.attributes.type === "hidden"
-  ).concat(selectedNodes);
-}
 
 // src/theme/default/utils/form.ts
 function isGroupImmediateSubmit(group) {
@@ -2827,13 +2903,10 @@ function isGroupImmediateSubmit(group) {
 function OryTwoStepCard() {
   var _a;
   const {
-    flow: { ui },
-    config
+    flow: { ui }
   } = useOryFlow();
-  const choosingMethod = isChoosingMethod(ui.nodes);
-  const [selectedGroup, setSelectedGroup] = react.useState();
   const { Form } = useComponents();
-  const { flowType } = useOryFlow();
+  const { flowType, formState, dispatchFormState } = useOryFlow();
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
   const uniqueGroups = useNodesGroups(ui.nodes);
@@ -2850,38 +2923,42 @@ function OryTwoStepCard() {
   );
   const hasOidc = Boolean((_a = uniqueGroups.groups[clientFetch.UiNodeGroupEnum.Oidc]) == null ? void 0 : _a.length);
   const zeroStepGroups = filterZeroStepGroups(ui.nodes);
-  const finalNodes = getFinalNodes(uniqueGroups.groups, selectedGroup);
-  const step = selectedGroup ? 2 /* ExecuteAuthMethod */ : choosingMethod ? 1 /* ChooseAuthMethod */ : 0 /* ProvideIdentifier */;
+  const finalNodes = formState.current === "method_active" ? getFinalNodes(uniqueGroups.groups, formState.method) : [];
   return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-      step === 0 /* ProvideIdentifier */ && hasOidc && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      formState.current === "provide_identifier" && hasOidc && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
         OryForm,
         {
-          onAfterSubmit: (method) => isGroupImmediateSubmit(method + "") ? setSelectedGroup(method) : void 0,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-            step === 0 /* ProvideIdentifier */ && zeroStepGroups.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
-            step === 1 /* ChooseAuthMethod */ && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              flowType === clientFetch.FlowType.Login && /* @__PURE__ */ jsxRuntime.jsx(BackButton, { href: config.project.login_ui_url }),
-              /* @__PURE__ */ jsxRuntime.jsx(
+          onAfterSubmit: (method) => isGroupImmediateSubmit(method + "") ? dispatchFormState({
+            type: "action_select_method",
+            method
+          }) : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+              formState.current === "provide_identifier" && zeroStepGroups.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+              formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
                 AuthMethodList,
                 {
                   options,
-                  setSelectedGroup
+                  setSelectedGroup: (group) => dispatchFormState({
+                    type: "action_select_method",
+                    method: group
+                  })
                 }
-              )
+              ) }),
+              formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+                finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+              ] })
             ] }),
-            step === 2 /* ExecuteAuthMethod */ && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setSelectedGroup(void 0) }),
-              finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-            ] })
-          ] })
+            /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+          ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+    ] })
   ] });
 }
 function AuthMethodList({ options, setSelectedGroup }) {
@@ -2903,32 +2980,6 @@ function AuthMethodList({ options, setSelectedGroup }) {
     option
   ));
 }
-var BackButton = ({ onClick, href }) => {
-  const {
-    flow: { ui }
-  } = useOryFlow();
-  const { Node: Node2 } = useComponents();
-  const nodeBackButton = ui.nodes.find(
-    (node) => (
-      // ("value" in node.attributes &&
-      //   node.attributes.value === "profile:back") ||
-      "name" in node.attributes && node.attributes.name === "identifier" && node.group === "identifier_first"
-    )
-  );
-  if (!nodeBackButton) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Node2.CurrentIdentifierButton,
-    {
-      node: nodeBackButton,
-      attributes: nodeBackButton.attributes,
-      onClick,
-      type: onClick ? "button" : void 0,
-      href
-    }
-  );
-};
 function OryFormGroupDivider() {
   const { Card } = useComponents();
   const {