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

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, handleFlowError, loginUrl, handleContinueWith, registrationUrl, verificationUrl, recoveryUrl, settingsUrl, Configuration, FrontendApi } from '@ory/client-fetch';
-import { createContext, useContext, useState, useMemo, useRef, useEffect } from 'react';
+import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, FlowType, Configuration, FrontendApi, handleContinueWith, settingsUrl, handleFlowError, isResponseError, loginUrl, recoveryUrl, verificationUrl, registrationUrl } from '@ory/client-fetch';
+import { createContext, useContext, useRef, useEffect, useState, useReducer, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlProvider as IntlProvider$1 } from 'react-intl';
-import { useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { useForm, FormProvider, useFormContext } from 'react-hook-form';
 
 // src/context/component.tsx
 var ComponentContext = createContext({
@@ -83,6 +83,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 === UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
+  );
+}
+function filterZeroStepGroups(nodes) {
+  return nodes.filter((node) => node.group !== 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 FlowType.Registration:
+    case 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 FlowType.Recovery:
+    case 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 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 useReducer(formStateReducer, parseStateFromFlow(flow));
+}
 function useOryFlow() {
   const ctx = useContext(OryFlowContext);
   if (!ctx) {
@@ -96,19 +161,21 @@ function OryFlowProvider({
   ...container
 }) {
   const [flowContainer, setFlowContainer] = useState(container);
+  const [formState, dispatchFormState] = useFormStateReducer(container);
   return /* @__PURE__ */ 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
     }
@@ -357,7 +424,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
@@ -602,7 +670,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
@@ -847,7 +916,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
@@ -1092,7 +1162,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
@@ -1337,7 +1408,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
@@ -1582,7 +1654,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
@@ -1827,7 +1900,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
@@ -2072,7 +2146,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
@@ -2131,6 +2206,246 @@ function OryCardHeader() {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsx(Card.Header, {});
 }
+function frontendClient(sdkUrl, opts = {}) {
+  const config = new Configuration({
+    ...opts,
+    basePath: sdkUrl,
+    headers: {
+      Accept: "application/json",
+      ...opts.headers
+    }
+  });
+  return new 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(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(loginUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          config,
+          flow: body2,
+          flowType: 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.`
+    );
+  }
+  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 = handleContinueWith(flow2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
+    }
+    setFlowContainer({
+      flow: flow2,
+      flowType: FlowType.Recovery,
+      config
+    });
+  }).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(recoveryUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: FlowType.Recovery,
+          config
+        });
+      },
+      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 = handleContinueWith(body2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
+    }
+    onRedirect(registrationUrl(config), true);
+  }).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(registrationUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: FlowType.Registration,
+          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 = handleContinueWith(body2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
+    }
+    onRedirect(settingsUrl(config), true);
+  }).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(settingsUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: FlowType.Settings,
+          config
+        });
+      },
+      onRedirect
+    })
+  ).catch((err) => {
+    if (isResponseError(err)) {
+      if (err.response.status === 401) {
+        return onRedirect(
+          loginUrl(config) + "?return_to=" + 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: FlowType.Verification,
+      config
+    })
+  ).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(verificationUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: FlowType.Verification,
+          config
+        });
+      },
+      onRedirect
+    })
+  );
+}
+function computeDefaultValues(nodes) {
+  return nodes.reduce((acc, node) => {
+    const attrs = node.attributes;
+    if (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;
@@ -2141,10 +2456,10 @@ function triggerToWindowCall(trigger) {
     return;
   }
   let i = 0;
-  const ms = 250;
+  const ms = 100;
   const interval = setInterval(() => {
     i++;
-    if (i > 20) {
+    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."
@@ -2185,6 +2500,9 @@ function useNodesGroups(nodes) {
     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;
@@ -2207,7 +2525,6 @@ var NodeInput = ({
   var _a;
   const { Node: Node2 } = useComponents();
   const { setValue } = useFormContext();
-  const nodeType = attributes.type;
   const {
     onloadTrigger,
     onclickTrigger,
@@ -2243,14 +2560,15 @@ var NodeInput = ({
   };
   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) {
+  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 UiNodeInputAttributesTypeEnum.Submit:
     case UiNodeInputAttributesTypeEnum.Button:
       if (isSocial) {
         return /* @__PURE__ */ jsx(Node2.OidcButton, { attributes: attrs, node });
       }
-      if (isResend) {
+      if (isResendNode || isScreenSelectionNode) {
         return null;
       }
       return /* @__PURE__ */ jsx(Node2.Button, { attributes: attrs, node, onClick: handleClick });
@@ -2362,235 +2680,11 @@ function OryFormSocialButtonsForm() {
   }
   return /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) });
 }
-function computeDefaultValues(nodes) {
-  return nodes.reduce((acc, node) => {
-    var _a;
-    if (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 Configuration({
-    ...opts,
-    basePath: sdkUrl,
-    headers: {
-      Accept: "application/json",
-      ...opts.headers
-    }
-  });
-  return new 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(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(loginUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          config,
-          flow: body2,
-          flowType: 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 = handleContinueWith(body2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    onRedirect(registrationUrl(config), true);
-  }).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(registrationUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: 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: FlowType.Verification,
-      config
-    })
-  ).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(verificationUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: 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 = handleContinueWith(flow2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    setFlowContainer({
-      flow: flow2,
-      flowType: FlowType.Recovery,
-      config
-    });
-  }).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(recoveryUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: 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 = handleContinueWith(body2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    onRedirect(settingsUrl(config), true);
-  }).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(settingsUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: FlowType.Settings,
-          config
-        });
-      },
-      onRedirect
-    })
-  );
-}
-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 === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
-  const methods = useForm({
-    // TODO: Generify this, so we have typesafety in the submit handler.
-    defaultValues: computeDefaultValues(defaultNodes)
-  });
+  const methods = useFormContext();
   const intl = useIntl();
   const onRedirect = (url, external) => {
     if (external) {
@@ -2664,8 +2758,10 @@ function OryForm({ children, onAfterSubmit, nodes }) {
         if ("lookup_secret_confirm" in submitData || "lookup_secret_reveal" in submitData || "lookup_secret_regenerate" in submitData) {
           submitData.method = "lookup_secret";
         }
-        if ("link" in submitData || "unlink" in submitData) {
-          submitData.method = "oidc";
+        if (submitData.method === "oidc") {
+          submitData.upstream_parameters = {
+            prompt: "select_account"
+          };
         }
         if ("webauthn_remove" in submitData) {
           submitData.method = "webauthn";
@@ -2701,7 +2797,7 @@ function OryForm({ children, onAfterSubmit, nodes }) {
       defaultMessage: "No authentication methods are available for this request. Please contact the site or app owner."
     });
   }
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     Form.Root,
     {
       action: flowContainer.flow.ui.action,
@@ -2724,9 +2820,9 @@ function OryForm({ children, onAfterSubmit, nodes }) {
         )
       ] })
     }
-  ) });
+  );
 }
-var messageIdsToHide = [1040009];
+var messageIdsToHide = [1040009, 1060003, 1080003, 1010014, 1040005];
 function OryCardValidationMessages({ ...props }) {
   var _a;
   const { flow } = useOryFlow();
@@ -2739,9 +2835,21 @@ function OryCardValidationMessages({ ...props }) {
   }
   return /* @__PURE__ */ jsx(Message.Root, { ...props, children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsx(Message.Content, { message }, message.id)) });
 }
+function OryFormProvider({
+  children,
+  nodes
+}) {
+  const flowContainer = useOryFlow();
+  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
+  const methods = useForm({
+    // TODO: Generify this, so we have typesafety in the submit handler.
+    defaultValues: computeDefaultValues(defaultNodes)
+  });
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children });
+}
 function OryFormSection({ children, nodes }) {
   const { Card } = useComponents();
-  return /* @__PURE__ */ jsx(OryForm, { nodes, children: /* @__PURE__ */ jsx(Card.SettingsSection, { children }) });
+  return /* @__PURE__ */ jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(Card.SettingsSection, { children }) }) });
 }
 function OryCardContent({ children }) {
   const { Card } = useComponents();
@@ -2773,38 +2881,18 @@ function OryCardContent({ children }) {
 function OryCard({ children }) {
   const { Card } = useComponents();
   if (children) {
-    return /* @__PURE__ */ jsx(Card.Root, { children });
+    return /* @__PURE__ */ jsx(Card.Root, { children: /* @__PURE__ */ jsx(OryFormProvider, { children }) });
   }
-  return /* @__PURE__ */ jsxs(Card.Root, { children: [
+  return /* @__PURE__ */ jsx(Card.Root, { children: /* @__PURE__ */ jsxs(OryFormProvider, { children: [
     /* @__PURE__ */ jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsx(OryCardContent, {}),
     /* @__PURE__ */ jsx(OryCardFooter, {})
-  ] });
+  ] }) });
 }
 function OryCardFooter() {
   const { Card } = useComponents();
   return /* @__PURE__ */ 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 === UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
-  );
-}
-function filterZeroStepGroups(nodes) {
-  return nodes.filter((node) => node.group !== 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) {
@@ -2813,13 +2901,10 @@ function isGroupImmediateSubmit(group) {
 function OryTwoStepCard() {
   var _a;
   const {
-    flow: { ui },
-    config
+    flow: { ui }
   } = useOryFlow();
-  const choosingMethod = isChoosingMethod(ui.nodes);
-  const [selectedGroup, setSelectedGroup] = 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);
@@ -2836,38 +2921,42 @@ function OryTwoStepCard() {
   );
   const hasOidc = Boolean((_a = uniqueGroups.groups[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__ */ jsxs(OryCard, { children: [
     /* @__PURE__ */ jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
-      step === 0 /* ProvideIdentifier */ && hasOidc && /* @__PURE__ */ jsx(OryFormSocialButtonsForm, {}),
-      /* @__PURE__ */ jsx(
+      formState.current === "provide_identifier" && hasOidc && /* @__PURE__ */ jsx(OryFormSocialButtonsForm, {}),
+      /* @__PURE__ */ jsxs(
         OryForm,
         {
-          onAfterSubmit: (method) => isGroupImmediateSubmit(method + "") ? setSelectedGroup(method) : void 0,
-          children: /* @__PURE__ */ jsxs(Form.Group, { children: [
-            step === 0 /* ProvideIdentifier */ && zeroStepGroups.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
-            step === 1 /* ChooseAuthMethod */ && /* @__PURE__ */ jsxs(Fragment, { children: [
-              flowType === FlowType.Login && /* @__PURE__ */ jsx(BackButton, { href: config.project.login_ui_url }),
-              /* @__PURE__ */ jsx(
+          onAfterSubmit: (method) => isGroupImmediateSubmit(method + "") ? dispatchFormState({
+            type: "action_select_method",
+            method
+          }) : void 0,
+          children: [
+            /* @__PURE__ */ jsxs(Form.Group, { children: [
+              formState.current === "provide_identifier" && zeroStepGroups.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
+              formState.current === "select_method" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
                 AuthMethodList,
                 {
                   options,
-                  setSelectedGroup
+                  setSelectedGroup: (group) => dispatchFormState({
+                    type: "action_select_method",
+                    method: group
+                  })
                 }
-              )
+              ) }),
+              formState.current === "method_active" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
+                finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+              ] })
             ] }),
-            step === 2 /* ExecuteAuthMethod */ && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(BackButton, { onClick: () => setSelectedGroup(void 0) }),
-              finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
-            ] })
-          ] })
+            /* @__PURE__ */ jsx(OryCardFooter, {})
+          ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(OryCardFooter, {})
+    ] })
   ] });
 }
 function AuthMethodList({ options, setSelectedGroup }) {
@@ -2889,32 +2978,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__ */ jsx(
-    Node2.CurrentIdentifierButton,
-    {
-      node: nodeBackButton,
-      attributes: nodeBackButton.attributes,
-      onClick,
-      type: onClick ? "button" : void 0,
-      href
-    }
-  );
-};
 function OryFormGroupDivider() {
   const { Card } = useComponents();
   const {