@ory/elements-react 0.0.0-pr.3a98de9 → 0.0.0-pr.6b3fe62

package/dist/index.js

@@ -36,6 +36,7 @@ function useGroupSorter() {
 }
 var defaultNodeOrder = [
   "oidc",
+  "saml",
   "identifier_first",
   "default",
   "profile",
@@ -100,8 +101,10 @@ function isChoosingMethod(flow) {
     (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 filterOidcOut(nodes) {
-  return nodes.filter((node) => node.group !== clientFetch.UiNodeGroupEnum.Oidc);
+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;
@@ -186,13 +189,16 @@ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
     ].includes(group)
   );
 }
-function useNodesGroups(nodes) {
+function useNodesGroups(nodes, { omit } = {}) {
   const groupSorter = useGroupSorter();
   const groups = react.useMemo(() => {
     var _a;
     const groups2 = {};
     for (const node of nodes) {
-      if (node.type === "script") {
+      if ((omit == null ? void 0 : omit.includes("script")) && clientFetch.isUiNodeScriptAttributes(node.attributes)) {
+        continue;
+      }
+      if ((omit == null ? void 0 : omit.includes("input_hidden")) && clientFetch.isUiNodeInputAttributes(node.attributes) && node.attributes.type === "hidden") {
         continue;
       }
       const groupNodes = (_a = groups2[node.group]) != null ? _a : [];
@@ -234,7 +240,9 @@ function parseStateFromFlow(flow) {
         return { current: "method_active", method: "code" };
       } else if (methodWithMessage) {
         return { current: "method_active", method: methodWithMessage.group };
-      } else if (flow.flow.active && !["default", "identifier_first", "oidc"].includes(flow.flow.active)) {
+      } else if (flow.flow.active && !["default", "identifier_first", "oidc", "saml"].includes(
+        flow.flow.active
+      )) {
         return { current: "method_active", method: flow.flow.active };
       } else if (isChoosingMethod(flow)) {
         const authMethods = nodesToAuthMethodGroups(flow.flow.ui.nodes);
@@ -258,23 +266,32 @@ function parseStateFromFlow(flow) {
       break;
     case clientFetch.FlowType.Settings:
       return { current: "settings" };
+    case clientFetch.FlowType.OAuth2Consent:
+      return { current: "method_active", method: "oauth2_consent" };
   }
   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));
+  const action = parseStateFromFlow(flow);
+  const [selectedMethod, setSelectedMethod] = react.useState();
+  const formStateReducer = (state, action2) => {
+    switch (action2.type) {
+      case "action_flow_update": {
+        if (selectedMethod)
+          return { current: "method_active", method: selectedMethod };
+        return parseStateFromFlow(action2.flow);
+      }
+      case "action_select_method": {
+        setSelectedMethod(action2.method);
+        return { current: "method_active", method: action2.method };
+      }
+    }
+    return state;
+  };
+  return react.useReducer(formStateReducer, action);
 }
 function useOryFlow() {
   const ctx = react.useContext(OryFlowContext);
@@ -364,6 +381,22 @@ function computeDefaultValues(nodes) {
       if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined") {
         return acc;
       }
+      if (attrs.name.startsWith("grant_scope")) {
+        const scope = attrs.value;
+        if (Array.isArray(acc.grant_scope)) {
+          return {
+            ...acc,
+            // We want to have all scopes accepted by default, so that the user has to actively uncheck them.
+            grant_scope: [...acc.grant_scope, scope]
+          };
+        } else if (!acc.grant_scope) {
+          return {
+            ...acc,
+            grant_scope: [scope]
+          };
+        }
+        return acc;
+      }
       return unrollTrait(
         {
           name: attrs.name,
@@ -795,7 +828,7 @@ function useOryFormSubmit(onAfterSubmit) {
         if ("lookup_secret_confirm" in submitData || "lookup_secret_reveal" in submitData || "lookup_secret_regenerate" in submitData || "lookup_secret_disable" in submitData) {
           submitData.method = "lookup_secret";
         }
-        if (submitData.method === "oidc" && submitData.link && supportsSelectAccountPrompt.includes(submitData.link)) {
+        if (submitData.method === clientFetch.UiNodeGroupEnum.Oidc && submitData.link && supportsSelectAccountPrompt.includes(submitData.link)) {
           submitData.upstream_parameters = {
             prompt: "select_account"
           };
@@ -813,6 +846,19 @@ function useOryFormSubmit(onAfterSubmit) {
         });
         break;
       }
+      case clientFetch.FlowType.OAuth2Consent: {
+        const response = await fetch(flowContainer.flow.ui.action, {
+          method: "POST",
+          body: JSON.stringify(data),
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        const oauth2Success = await response.json();
+        if (oauth2Success.redirect_to && typeof oauth2Success.redirect_to === "string") {
+          onRedirect(oauth2Success.redirect_to);
+        }
+      }
     }
     if ("password" in data) {
       methods.setValue("password", "");
@@ -827,7 +873,11 @@ function useOryFormSubmit(onAfterSubmit) {
   };
   return onSubmit;
 }
-function OryForm({ children, onAfterSubmit }) {
+function OryForm({
+  children,
+  onAfterSubmit,
+  "data-testid": dataTestId
+}) {
   const { Form } = useComponents();
   const flowContainer = useOryFlow();
   const methods = reactHookForm.useFormContext();
@@ -855,7 +905,7 @@ function OryForm({ children, onAfterSubmit }) {
       }),
       type: "error"
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": dataTestId, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { message: m }, m.id) }),
       /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
     ] });
@@ -866,6 +916,7 @@ function OryForm({ children, onAfterSubmit }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Form.Root,
     {
+      "data-testid": dataTestId,
       action: flowContainer.flow.ui.action,
       method: flowContainer.flow.ui.method,
       onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
@@ -900,7 +951,7 @@ var NodeInput = ({
 }) => {
   var _a;
   const { Node: Node2 } = useComponents();
-  const { setValue } = reactHookForm.useFormContext();
+  const { setValue, watch } = reactHookForm.useFormContext();
   const {
     onloadTrigger,
     onclickTrigger,
@@ -913,7 +964,10 @@ var NodeInput = ({
   const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
   const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
   const setFormValue = () => {
-    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
+    if (isResendNode || isScreenSelectionNode || node.group === clientFetch.UiNodeGroupEnum.Oauth2Consent) {
+      return;
+    }
+    if (attrs.value !== void 0) {
       setValue(attrs.name, attrs.value);
     }
   };
@@ -936,8 +990,21 @@ var NodeInput = ({
       triggerToWindowCall(onclickTrigger);
     }
   };
-  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
+  const isSocial = (attrs.name === "provider" || attrs.name === "link") && (node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml);
   const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
+  const handleScopeChange = (checked) => {
+    const scopes = watch("grant_scope");
+    if (Array.isArray(scopes)) {
+      if (checked) {
+        setValue("grant_scope", Array.from(/* @__PURE__ */ new Set([...scopes, attrs.value])));
+      } else {
+        setValue(
+          "grant_scope",
+          scopes.filter((scope) => scope !== attrs.value)
+        );
+      }
+    }
+  };
   switch (attributes.type) {
     case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
     case clientFetch.UiNodeInputAttributesTypeEnum.Button:
@@ -947,6 +1014,9 @@ var NodeInput = ({
       if (isResendNode || isScreenSelectionNode) {
         return null;
       }
+      if (node.group === "oauth2_consent") {
+        return null;
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(
         Node2.Label,
         {
@@ -958,6 +1028,21 @@ var NodeInput = ({
     case clientFetch.UiNodeInputAttributesTypeEnum.DatetimeLocal:
       throw new Error("Not implemented");
     case clientFetch.UiNodeInputAttributesTypeEnum.Checkbox:
+      if (node.group === "oauth2_consent" && node.attributes.node_type === "input") {
+        switch (node.attributes.name) {
+          case "grant_scope":
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Node2.ConsentScopeCheckbox,
+              {
+                attributes: attrs,
+                node,
+                onCheckedChange: handleScopeChange
+              }
+            );
+          default:
+            return null;
+        }
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(
         Node2.Label,
         {
@@ -1019,7 +1104,9 @@ function OryFormOidcButtons() {
     flow: { ui }
   } = useOryFlow();
   const { setValue } = reactHookForm.useFormContext();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
+  );
   const { Form, Node: Node2 } = useComponents();
   if (filteredNodes.length === 0) {
     return null;
@@ -1034,7 +1121,7 @@ function OryFormOidcButtons() {
           "provider",
           node.attributes.value
         );
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     },
     k
@@ -1044,11 +1131,13 @@ function OryFormSocialButtonsForm() {
   const {
     flow: { ui }
   } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.Saml || node.group === clientFetch.UiNodeGroupEnum.Oidc
+  );
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
+  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);
@@ -1060,14 +1149,18 @@ function OryTwoStepCard() {
   const { ui } = flow;
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
-  const uniqueGroups = useNodesGroups(ui.nodes);
-  const options = Object.fromEntries(
+  const groupsToShow = useNodesGroups(ui.nodes, {
+    // We only want to render groups that have visible elements.
+    omit: ["script", "input_hidden"]
+  });
+  const authMethodBlocks = Object.fromEntries(
     Object.values(clientFetch.UiNodeGroupEnum).filter((group) => {
       var _a2;
-      return (_a2 = uniqueGroups.groups[group]) == null ? void 0 : _a2.length;
+      return (_a2 = groupsToShow.groups[group]) == null ? void 0 : _a2.length;
     }).filter(
       (group) => ![
         clientFetch.UiNodeGroupEnum.Oidc,
+        clientFetch.UiNodeGroupEnum.Saml,
         clientFetch.UiNodeGroupEnum.Default,
         clientFetch.UiNodeGroupEnum.IdentifierFirst,
         clientFetch.UiNodeGroupEnum.Profile,
@@ -1075,7 +1168,17 @@ function OryTwoStepCard() {
       ].includes(group)
     ).map((g) => [g, {}])
   );
-  if (clientFetch.UiNodeGroupEnum.Code in options) {
+  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)
+  );
+  if (clientFetch.UiNodeGroupEnum.Code in authMethodBlocks) {
     let identifier = (_b = (_a = findNode(ui.nodes, {
       group: "identifier_first",
       node_type: "input",
@@ -1087,7 +1190,7 @@ function OryTwoStepCard() {
       name: "address"
     })) == null ? void 0 : _c.attributes) == null ? void 0 : _d.value);
     if (identifier) {
-      options[clientFetch.UiNodeGroupEnum.Code] = {
+      authMethodBlocks[clientFetch.UiNodeGroupEnum.Code] = {
         title: {
           id: "identities.messages.1010023",
           values: { address: identifier }
@@ -1095,8 +1198,8 @@ function OryTwoStepCard() {
       };
     }
   }
-  const nonOidcNodes = filterOidcOut(ui.nodes);
-  const finalNodes = formState.current === "method_active" ? getFinalNodes(uniqueGroups.groups, formState.method) : [];
+  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;
@@ -1108,46 +1211,66 @@ function OryTwoStepCard() {
       });
     }
   };
-  const hasOidc = ui.nodes.some((node) => node.group === clientFetch.UiNodeGroupEnum.Oidc);
-  const showOidc = !(formState.current === "method_active" && formState.method !== "oidc");
+  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.filter((n) => {
+    if (clientFetch.isUiNodeInputAttributes(n.attributes)) {
+      return n.attributes.type !== clientFetch.UiNodeInputAttributesTypeEnum.Hidden;
+    } else if (clientFetch.isUiNodeScriptAttributes(n.attributes)) {
+      return false;
+    }
+    return true;
+  }).length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-      showOidc && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(OryForm, { onAfterSubmit: handleAfterFormSubmit, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-          formState.current === "provide_identifier" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            hasOidc && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-            nonOidcNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-          ] }),
-          formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AuthMethodList,
-              {
-                options,
-                setSelectedGroup: (group) => dispatchFormState({
-                  type: "action_select_method",
-                  method: group
-                })
-              }
-            ),
-            ui.nodes.filter((n) => n.group === clientFetch.UiNodeGroupEnum.Captcha).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-          ] }),
-          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))
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-      ] })
+      showSso && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        OryForm,
+        {
+          "data-testid": `ory/form/methods/local`,
+          onAfterSubmit: handleAfterFormSubmit,
+          children: [
+            formState.current === "provide_identifier" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+              showSsoDivider && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+              nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+            ] }),
+            formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+              Object.entries(authMethodBlocks).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+              Object.entries(authMethodBlocks).length > 0 && /* @__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))
+            ] }),
+            formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+              ui.nodes.filter(
+                (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Captcha
+              ).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 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)) {
@@ -1207,14 +1330,29 @@ function OryFormSectionInner({
     }
   );
 }
+function OryConsentCard() {
+  const { Form, Card } = useComponents();
+  const flow = useOryFlow();
+  return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(OryForm, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Form.Group, { children: flow.flow.ui.nodes.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+    ] }) })
+  ] });
+}
 function OryFormGroupDivider() {
   const { Card } = useComponents();
   const {
     flow: { ui }
   } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
+  );
   const otherNodes = ui.nodes.filter(
-    (node) => node.group !== "oidc" && node.group !== "default"
+    (node) => !(node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml) && node.group !== "default"
   );
   if (filteredNodes.length > 0 && otherNodes.length > 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {});
@@ -1240,7 +1378,7 @@ function OrySettingsOidc({ nodes }) {
     onClick: () => {
       if (node.attributes.node_type === "input") {
         setValue("link", node.attributes.value);
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     }
   }));
@@ -1249,7 +1387,7 @@ function OrySettingsOidc({ nodes }) {
     onClick: () => {
       if (node.attributes.node_type === "input") {
         setValue("unlink", node.attributes.value);
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     }
   }));
@@ -1558,16 +1696,19 @@ function SettingsSectionContent({ group, nodes }) {
   const { Card } = useComponents();
   const intl = reactIntl.useIntl();
   const { flow } = useOryFlow();
-  const uniqueGroups = useNodesGroups(flow.ui.nodes);
+  const groupedNodes = useNodesGroups(flow.ui.nodes, {
+    // Script nodes are already handled by the parent component.
+    omit: ["script"]
+  });
   if (group === clientFetch.UiNodeGroupEnum.Totp) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.totp,
+        nodes: groupedNodes.groups.totp,
         "data-testid": "ory/screen/settings/group/totp",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsTotp, { nodes: (_a = uniqueGroups.groups.totp) != null ? _a : [] }),
-          (_b = uniqueGroups.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsTotp, { nodes: (_a = groupedNodes.groups.totp) != null ? _a : [] }),
+          (_b = groupedNodes.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1576,16 +1717,16 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.lookup_secret,
+        nodes: groupedNodes.groups.lookup_secret,
         "data-testid": "ory/screen/settings/group/lookup_secret",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             OrySettingsRecoveryCodes,
             {
-              nodes: (_c = uniqueGroups.groups.lookup_secret) != null ? _c : []
+              nodes: (_c = groupedNodes.groups.lookup_secret) != null ? _c : []
             }
           ),
-          (_d = uniqueGroups.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          (_d = groupedNodes.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1594,11 +1735,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.oidc,
+        nodes: groupedNodes.groups.oidc,
         "data-testid": "ory/screen/settings/group/oidc",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsOidc, { nodes: (_e = uniqueGroups.groups.oidc) != null ? _e : [] }),
-          (_f = uniqueGroups.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsOidc, { nodes: (_e = groupedNodes.groups.oidc) != null ? _e : [] }),
+          (_f = groupedNodes.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1607,11 +1748,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.webauthn,
+        nodes: groupedNodes.groups.webauthn,
         "data-testid": "ory/screen/settings/group/webauthn",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsWebauthn, { nodes: (_g = uniqueGroups.groups.webauthn) != null ? _g : [] }),
-          (_h = uniqueGroups.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsWebauthn, { nodes: (_g = groupedNodes.groups.webauthn) != null ? _g : [] }),
+          (_h = groupedNodes.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1620,11 +1761,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.passkey,
+        nodes: groupedNodes.groups.passkey,
         "data-testid": "ory/screen/settings/group/passkey",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsPasskey, { nodes: (_i = uniqueGroups.groups.passkey) != null ? _i : [] }),
-          (_j = uniqueGroups.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsPasskey, { nodes: (_i = groupedNodes.groups.passkey) != null ? _i : [] }),
+          (_j = groupedNodes.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1645,7 +1786,7 @@ function SettingsSectionContent({ group, nodes }) {
               id: `settings.${group}.description`
             }),
             children: [
-              (_k = uniqueGroups.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+              (_k = groupedNodes.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
               nodes.filter(
                 (node) => "type" in node.attributes && node.attributes.type !== "submit"
               ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
@@ -1659,16 +1800,16 @@ function SettingsSectionContent({ group, nodes }) {
     }
   );
 }
-var getScriptNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
+var onlyScriptNodes = (nodes) => nodes.filter(
+  (node) => clientFetch.isUiNodeScriptAttributes(node.attributes) && node.attributes.id === "webauthn_script"
 );
 function OrySettingsCard() {
   const { flow } = useOryFlow();
-  const uniqueGroups = useNodesGroups(flow.ui.nodes);
-  const scriptNode = getScriptNode(flow.ui.nodes);
+  const uniqueGroups = useNodesGroups(flow.ui.nodes, { omit: ["script"] });
+  const scriptNodes = onlyScriptNodes(flow.ui.nodes);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-    scriptNode && /* @__PURE__ */ jsxRuntime.jsx(Node, { node: scriptNode }),
+    scriptNodes.map((n) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node: n })),
     uniqueGroups.entries.map(([group, nodes]) => {
       if (group === clientFetch.UiNodeGroupEnum.Default) {
         return null;
@@ -2003,7 +2144,27 @@ var en_default = {
   "property.phone": "phone",
   "property.username": "username",
   "property.identifier": "identifier",
-  "property.code": "code"
+  "property.code": "code",
+  "consent.title": "Authorize {party}",
+  "consent.subtitle": "A third party application wants to access information associated with your account {identifier}.",
+  "consent.scope.openid.title": "Identity",
+  "consent.scope.openid.description": "Allows the application to verify your identity. This is required for authentication and a trusted login experience.",
+  "consent.scope.offline_access.title": "Offline Access",
+  "consent.scope.offline_access.description": "Allows this application to keep you signed in even when you're not actively using it.",
+  "consent.scope.profile.title": "Profile Information",
+  "consent.scope.profile.description": "Allows access to your basic profile details, including your username, first name, and last name.",
+  "consent.scope.email.title": "Email Address",
+  "consent.scope.email.description": "Retrieve your email address and its verification status.",
+  "consent.scope.address.title": "Physical Address",
+  "consent.scope.address.description": "Access your postal address.",
+  "consent.scope.phone.title": "Phone Number",
+  "consent.scope.phone.description": "Retrieve your phone number and its verification status.",
+  "error.title.what-happened": "What happened?",
+  "error.title.what-can-i-do": "What can I do?",
+  "error.instructions": "Please try again in a few minutes or contact the website operator.",
+  "error.footer.text": "When reporting this error, please include the following information:",
+  "error.footer.copy": "Copy",
+  "error.action.go-back": "Go back"
 };
 
 // src/locales/de.json
@@ -2174,7 +2335,7 @@ var de_default = {
   "two-step.code.description": "Ein Best\xE4tigungscode wird an Ihre E-Mail gesendet.",
   "two-step.code.title": "E-Mail-Code",
   "two-step.passkey.description": "Verwenden Sie die Fingerabdruck- oder Gesichtserkennung Ihres Ger\xE4ts",
-  "two-step.passkey.title": "Passwort (empfohlen)",
+  "two-step.passkey.title": "Passkey (empfohlen)",
   "two-step.password.description": "Geben Sie Ihr Passwort ein, das mit Ihrem Konto verkn\xFCpft ist",
   "two-step.password.title": "Passwort",
   "two-step.webauthn.title": "Sicherheitsschl\xFCssel",
@@ -2268,7 +2429,27 @@ var de_default = {
   "property.password": "Passwort",
   "property.phone": "Telefon",
   "property.code": "Code",
-  "property.username": "Benutzername"
+  "property.username": "Benutzername",
+  "consent.title": "Autorisieren {party}",
+  "consent.subtitle": "Eine Drittanbieteranwendung m\xF6chte auf Informationen zugreifen, die mit Ihrem Konto {identifier} verkn\xFCpft sind.",
+  "consent.scope.openid.title": "Identit\xE4t",
+  "consent.scope.openid.description": "Erm\xF6glicht der Anwendung, Ihre Identit\xE4t zu \xFCberpr\xFCfen. Dies ist f\xFCr die Authentifizierung und eine vertrauensw\xFCrdige Login-Erfahrung erforderlich.",
+  "consent.scope.offline_access.title": "Offline-Zugriff",
+  "consent.scope.offline_access.description": "Erm\xF6glicht dieser Anwendung, Sie angemeldet zu lassen, auch wenn Sie sie nicht aktiv nutzen.",
+  "consent.scope.profile.title": "Profilinformationen",
+  "consent.scope.profile.description": "Erm\xF6glicht den Zugriff auf Ihre grundlegenden Profildetails, einschlie\xDFlich Ihres Benutzernamens, Vornamens und Nachnamens.",
+  "consent.scope.email.title": "E-Mail-Adresse",
+  "consent.scope.email.description": "Erm\xF6glicht den Abruf Ihrer E-Mail-Adresse und deren \xDCberpr\xFCfungsstatus.",
+  "consent.scope.address.title": "Physische Adresse",
+  "consent.scope.address.description": "Erm\xF6glicht den Zugriff auf Ihre Postanschrift.",
+  "consent.scope.phone.title": "Telefonnummer",
+  "consent.scope.phone.description": "Erm\xF6glicht den Abruf Ihrer Telefonnummer und deren \xDCberpr\xFCfungsstatus.",
+  "error.title.what-happened": "Was ist passiert?",
+  "error.footer.copy": "Kopieren",
+  "error.footer.text": "Bitte f\xFCgen Sie bei der Meldung dieses Fehlers die folgenden Informationen hinzu:",
+  "error.instructions": "Bitte versuchen Sie es in wenigen Minuten erneut oder wenden Sie sich an den Website-Betreiber.",
+  "error.title.what-can-i-do": "Was kann ich tun?",
+  "error.action.go-back": "Zur\xFCck"
 };
 
 // src/locales/es.json
@@ -2284,7 +2465,7 @@ var es_default = {
   "error.back-button": "Regresar",
   "error.description": "Ocurri\xF3 un error con el siguiente mensaje:",
   "error.support-email-link": "Si el problema persiste, por favor contacte a <a>{contactSupportEmail}</a>",
-  "error.title": "Ocurri\xF3 un error",
+  "error.title": "",
   "error.title-internal-server-error": "Error Interno del Servidor",
   "error.title-not-found": "404 - P\xE1gina no encontrada",
   "identities.messages.1010001": "Iniciar sesi\xF3n",
@@ -2533,7 +2714,27 @@ var es_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "consent.title": "Autorizar {party}",
+  "consent.subtitle": "Una aplicaci\xF3n de terceros quiere acceder a la informaci\xF3n asociada a su cuenta {identifier}.",
+  "consent.scope.openid.title": "Identidad",
+  "consent.scope.openid.description": "Permite que la aplicaci\xF3n verifique su identidad. Esto es necesario para la autenticaci\xF3n y una experiencia de inicio de sesi\xF3n confiable.",
+  "consent.scope.offline_access.title": "Acceso sin conexi\xF3n",
+  "consent.scope.offline_access.description": "Permite que esta aplicaci\xF3n le mantenga conectado incluso cuando no la est\xE9 utilizando activamente.",
+  "consent.scope.profile.title": "Informaci\xF3n del perfil",
+  "consent.scope.profile.description": "Permite el acceso a los detalles b\xE1sicos de su perfil, incluyendo su nombre de usuario, nombre y apellido.",
+  "consent.scope.email.title": "Direcci\xF3n de correo electr\xF3nico",
+  "consent.scope.email.description": "Recupere su direcci\xF3n de correo electr\xF3nico y su estado de verificaci\xF3n.",
+  "consent.scope.address.title": "Direcci\xF3n f\xEDsica",
+  "consent.scope.address.description": "Acceda a su direcci\xF3n postal.",
+  "consent.scope.phone.title": "N\xFAmero de tel\xE9fono",
+  "consent.scope.phone.description": "Recupere su n\xFAmero de tel\xE9fono y su estado de verificaci\xF3n.",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.instructions": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": ""
 };
 
 // src/locales/fr.json
@@ -2798,7 +2999,27 @@ var fr_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "consent.title": "Autoriser {party}",
+  "consent.subtitle": "Une application tierce souhaite acc\xE9der aux informations associ\xE9es \xE0 votre compte {identifier}.",
+  "consent.scope.openid.title": "Identit\xE9",
+  "consent.scope.openid.description": "Permet \xE0 l'application de v\xE9rifier votre identit\xE9. Cela est n\xE9cessaire pour l'authentification et une exp\xE9rience de connexion fiable.",
+  "consent.scope.offline_access.title": "Acc\xE8s hors ligne",
+  "consent.scope.offline_access.description": "Permet \xE0 cette application de vous maintenir connect\xE9 m\xEAme lorsque vous ne l'utilisez pas activement.",
+  "consent.scope.profile.title": "Informations de profil",
+  "consent.scope.profile.description": "Permet l'acc\xE8s aux d\xE9tails de base de votre profil, y compris votre nom d'utilisateur, pr\xE9nom et nom.",
+  "consent.scope.email.title": "Adresse e-mail",
+  "consent.scope.email.description": "R\xE9cup\xE8re votre adresse e-mail et son statut de v\xE9rification.",
+  "consent.scope.address.title": "Adresse physique",
+  "consent.scope.address.description": "Acc\xE8de \xE0 votre adresse postale.",
+  "consent.scope.phone.title": "Num\xE9ro de t\xE9l\xE9phone",
+  "consent.scope.phone.description": "R\xE9cup\xE8re votre num\xE9ro de t\xE9l\xE9phone et son statut de v\xE9rification.",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/nl.json
@@ -3063,7 +3284,27 @@ var nl_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "consent.title": "Autoriseren {party}",
+  "consent.subtitle": "Een derde partij applicatie wil toegang tot informatie die aan uw account {identifier} is gekoppeld.",
+  "consent.scope.openid.title": "Identiteit",
+  "consent.scope.openid.description": "Stelt de applicatie in staat uw identiteit te verifi\xEBren. Dit is vereist voor authenticatie en een betrouwbare inlogervaring.",
+  "consent.scope.offline_access.title": "Offline toegang",
+  "consent.scope.offline_access.description": "Stelt deze applicatie in staat u ingelogd te houden, zelfs wanneer u deze niet actief gebruikt.",
+  "consent.scope.profile.title": "Profielinformatie",
+  "consent.scope.profile.description": "Geeft toegang tot uw basisprofielgegevens, inclusief uw gebruikersnaam, voornaam en achternaam.",
+  "consent.scope.email.title": "E-mailadres",
+  "consent.scope.email.description": "Haal uw e-mailadres en de verificatiestatus ervan op.",
+  "consent.scope.address.title": "Fysiek adres",
+  "consent.scope.address.description": "Toegang tot uw postadres.",
+  "consent.scope.phone.title": "Telefoonnummer",
+  "consent.scope.phone.description": "Haal uw telefoonnummer en de verificatiestatus ervan op.",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/pl.json
@@ -3328,7 +3569,27 @@ var pl_default = {
   "property.password": "",
   "property.phone": "",
   "property.username": "",
-  "property.identifier": ""
+  "property.identifier": "",
+  "consent.title": "Autoryzuj {party}",
+  "consent.subtitle": "Aplikacja trzeciej strony chce uzyska\u0107 dost\u0119p do informacji powi\u0105zanych z Twoim kontem {identifier}.",
+  "consent.scope.openid.title": "To\u017Csamo\u015B\u0107",
+  "consent.scope.openid.description": "Pozwala aplikacji zweryfikowa\u0107 Twoj\u0105 to\u017Csamo\u015B\u0107. Jest to wymagane do uwierzytelniania i zapewnienia zaufanej sesji logowania.",
+  "consent.scope.offline_access.title": "Dost\u0119p offline",
+  "consent.scope.offline_access.description": "Pozwala aplikacji utrzyma\u0107 Twoje logowanie, nawet gdy nie korzystasz z niej aktywnie.",
+  "consent.scope.profile.title": "Informacje profilowe",
+  "consent.scope.profile.description": "Pozwala na dost\u0119p do podstawowych danych profilowych, w tym nazwy u\u017Cytkownika, imienia i nazwiska.",
+  "consent.scope.email.title": "Adres e-mail",
+  "consent.scope.email.description": "Pobierz sw\xF3j adres e-mail oraz status jego weryfikacji.",
+  "consent.scope.address.title": "Adres fizyczny",
+  "consent.scope.address.description": "Dost\u0119p do Twojego adresu pocztowego.",
+  "consent.scope.phone.title": "Numer telefonu",
+  "consent.scope.phone.description": "Pobierz sw\xF3j numer telefonu oraz status jego weryfikacji.",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/pt.json
@@ -3593,7 +3854,27 @@ var pt_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "consent.title": "Autorizar {party}",
+  "consent.subtitle": "Um aplicativo de terceiros deseja acessar as informa\xE7\xF5es associadas \xE0 sua conta {identifier}.",
+  "consent.scope.openid.title": "Identidade",
+  "consent.scope.openid.description": "Permite que a aplica\xE7\xE3o verifique sua identidade. Isso \xE9 necess\xE1rio para a autentica\xE7\xE3o e uma experi\xEAncia de login confi\xE1vel.",
+  "consent.scope.offline_access.title": "Acesso Offline",
+  "consent.scope.offline_access.description": "Permite que este aplicativo mantenha voc\xEA conectado mesmo quando n\xE3o estiver usando-o ativamente.",
+  "consent.scope.profile.title": "Informa\xE7\xF5es do Perfil",
+  "consent.scope.profile.description": "Permite o acesso aos detalhes b\xE1sicos do seu perfil, incluindo seu nome de usu\xE1rio, primeiro nome e sobrenome.",
+  "consent.scope.email.title": "Endere\xE7o de E-mail",
+  "consent.scope.email.description": "Recupere seu endere\xE7o de e-mail e seu status de verifica\xE7\xE3o.",
+  "consent.scope.address.title": "Endere\xE7o F\xEDsico",
+  "consent.scope.address.description": "Acesse seu endere\xE7o postal.",
+  "consent.scope.phone.title": "N\xFAmero de Telefone",
+  "consent.scope.phone.description": "Recupere seu n\xFAmero de telefone e seu status de verifica\xE7\xE3o.",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/sv.json
@@ -3858,7 +4139,27 @@ var sv_default = {
   "property.phone": "telefon",
   "property.username": "anv\xE4ndarnamn",
   "property.identifier": "identifier",
-  "property.code": "kod"
+  "property.code": "kod",
+  "consent.title": "Auktorisera {party}",
+  "consent.subtitle": "En tredjepartsapplikation vill f\xE5 tillg\xE5ng till information kopplad till ditt konto {identifier}.",
+  "consent.scope.openid.title": "Identitet",
+  "consent.scope.openid.description": "G\xF6r det m\xF6jligt f\xF6r applikationen att verifiera din identitet. Detta kr\xE4vs f\xF6r autentisering och en p\xE5litlig inloggningsupplevelse.",
+  "consent.scope.offline_access.title": "Offline-\xE5tkomst",
+  "consent.scope.offline_access.description": "G\xF6r det m\xF6jligt f\xF6r denna applikation att h\xE5lla dig inloggad \xE4ven n\xE4r du inte aktivt anv\xE4nder den.",
+  "consent.scope.profile.title": "Profilinformation",
+  "consent.scope.profile.description": "Ger tillg\xE5ng till dina grundl\xE4ggande profiluppgifter, inklusive ditt anv\xE4ndarnamn, f\xF6rnamn och efternamn.",
+  "consent.scope.email.title": "E-postadress",
+  "consent.scope.email.description": "H\xE4mta din e-postadress och dess verifieringsstatus.",
+  "consent.scope.address.title": "Fysisk adress",
+  "consent.scope.address.description": "F\xE5 \xE5tkomst till din postadress.",
+  "consent.scope.phone.title": "Telefonnummer",
+  "consent.scope.phone.description": "H\xE4mta ditt telefonnummer och dess verifieringsstatus.",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/index.ts
@@ -3879,6 +4180,7 @@ exports.OryCardContent = OryCardContent;
 exports.OryCardFooter = OryCardFooter;
 exports.OryCardHeader = OryCardHeader;
 exports.OryCardValidationMessages = OryCardValidationMessages;
+exports.OryConsentCard = OryConsentCard;
 exports.OryForm = OryForm;
 exports.OryFormGroupDivider = OryFormGroupDivider;
 exports.OryFormGroups = OryFormGroups;