@ory/elements-react 1.0.0-next.19 → 1.0.0-next.20

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.0.0-next.20 (2025-01-16)
+
+### 🚀 Features
+
+- handle state transition edge cases ([f2e4023](https://github.com/ory/elements/commit/f2e4023))
+- user experience improvements and e2e test coverage ([f68744c](https://github.com/ory/elements/commit/f68744c))
+- do not show two-step selector if only one method exists ([6453673](https://github.com/ory/elements/commit/6453673))
+
+### 🩹 Fixes
+
+- better validation for code method ([b0d8e2c](https://github.com/ory/elements/commit/b0d8e2c))
+
+### ❤️  Thank You
+
+- aeneasr @aeneasr
+
 ## 1.0.0-next.19 (2024-12-31)
 
 ### 🩹 Fixes

package/dist/index.js

@@ -105,6 +105,101 @@ function getFinalNodes(uniqueGroups, selectedGroup) {
     (node) => "type" in node.attributes && node.attributes.type === "hidden"
   ).concat(selectedNodes);
 }
+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.debug(
+      "The Ory SDK is missing a required function: window is undefined."
+    );
+    return void 0;
+  }
+  const typedWindow = window;
+  if (!(trigger in typedWindow) || !typedWindow[trigger]) {
+    console.debug(`The Ory SDK is missing a required function: ${trigger}.`);
+    return void 0;
+  }
+  const triggerFn = typedWindow[trigger];
+  if (typeof triggerFn !== "function") {
+    console.debug(
+      `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
+    );
+    return void 0;
+  }
+  return triggerFn;
+}
+function nodesToAuthMethodGroups(nodes, excludeAuthMethods = [clientFetch.UiNodeGroupEnum.Oidc]) {
+  var _a;
+  const groups = {};
+  for (const node of nodes) {
+    if (node.type === "script") {
+      continue;
+    }
+    const groupNodes = (_a = groups[node.group]) != null ? _a : [];
+    groupNodes.push(node);
+    groups[node.group] = groupNodes;
+  }
+  return Object.values(clientFetch.UiNodeGroupEnum).filter((group) => {
+    var _a2;
+    return (_a2 = groups[group]) == null ? void 0 : _a2.length;
+  }).filter(
+    (group) => ![
+      clientFetch.UiNodeGroupEnum.Default,
+      clientFetch.UiNodeGroupEnum.IdentifierFirst,
+      clientFetch.UiNodeGroupEnum.Profile,
+      ...excludeAuthMethods
+    ].includes(group)
+  );
+}
+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
+  };
+}
 
 // src/context/form-state.ts
 function findMethodWithMessage(nodes) {
@@ -129,6 +224,10 @@ function parseStateFromFlow(flow) {
       } else if (flow.flow.active && !["default", "identifier_first", "oidc"].includes(flow.flow.active)) {
         return { current: "method_active", method: flow.flow.active };
       } else if (isChoosingMethod(flow.flow.ui.nodes)) {
+        const authMethods = nodesToAuthMethodGroups(flow.flow.ui.nodes);
+        if (authMethods.length === 1) {
+          return { current: "method_active", method: authMethods[0] };
+        }
         return { current: "select_method" };
       } else if ((_a = flow.flow.ui.messages) == null ? void 0 : _a.some((m) => m.id === 1010016)) {
         return { current: "select_method" };
@@ -2230,78 +2329,6 @@ 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 = 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.debug(
-      "The Ory SDK is missing a required function: window is undefined."
-    );
-    return void 0;
-  }
-  const typedWindow = window;
-  if (!(trigger in typedWindow) || !typedWindow[trigger]) {
-    console.debug(`The Ory SDK is missing a required function: ${trigger}.`);
-    return void 0;
-  }
-  const triggerFn = typedWindow[trigger];
-  if (typeof triggerFn !== "function") {
-    console.debug(
-      `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
@@ -2355,11 +2382,25 @@ var NodeInput = ({
       if (isResendNode || isScreenSelectionNode) {
         return null;
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(Node2.Button, { attributes: attrs, node, onClick: handleClick });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Node2.Label,
+        {
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__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 });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Node2.Label,
+        {
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
+        }
+      );
     case clientFetch.UiNodeInputAttributesTypeEnum.Hidden:
       return /* @__PURE__ */ jsxRuntime.jsx(Node2.Input, { attributes: attrs, node, onClick: handleClick });
     default:
@@ -2447,8 +2488,6 @@ function unrollTrait(input, output = {}) {
   });
   return output;
 }
-
-// src/components/form/form-resolver.ts
 function isCodeResendRequest(data) {
   var _a;
   return (_a = data.email) != null ? _a : data.resend;
@@ -2457,10 +2496,22 @@ function useOryFormResolver() {
   const flowContainer = useOryFlow();
   return (data) => {
     if (flowContainer.formState.current === "method_active") {
-      if (data.method === "code" && !data.code && !isCodeResendRequest(data)) {
+      if (
+        // When we submit a code
+        data.method === "code" && // And the code is not present
+        !data.code && // And the flow is not a code resend request
+        !isCodeResendRequest(data) && // And the flow has a code input node
+        flowContainer.flow.ui.nodes.find(({ attributes, group }) => {
+          if (!clientFetch.isUiNodeInputAttributes(attributes)) {
+            return false;
+          }
+          return group === "code" && attributes.name === "code" && attributes.type !== "hidden";
+        })
+      ) {
         return {
           values: data,
           errors: {
+            // We know the code node exists, so we can safely hardcode the ID.
             code: {
               id: 4000002,
               context: {
@@ -2551,6 +2602,13 @@ function frontendClient(sdkUrl, opts = {}) {
   return new clientFetch.FrontendApi(config);
 }
 
+// src/util/internal.ts
+function replaceWindowFlowId(flow) {
+  const url = new URL(window.location.href);
+  url.searchParams.set("flow", flow);
+  window.location.href = url.toString();
+}
+
 // src/util/onSubmitLogin.ts
 async function onSubmitLogin({ config, flow }, {
   setFlowContainer,
@@ -2572,8 +2630,12 @@ async function onSubmitLogin({ config, flow }, {
     (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
   }).catch(
     clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.loginUrl(config), true);
+      onRestartFlow: (useFlowId) => {
+        if (useFlowId) {
+          replaceWindowFlowId(useFlowId);
+        } else {
+          onRedirect(clientFetch.loginUrl(config), true);
+        }
       },
       onValidationError: (body2) => {
         setFlowContainer({
@@ -2615,8 +2677,12 @@ async function onSubmitRecovery({ config, flow }, {
     });
   }).catch(
     clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.recoveryUrl(config), true);
+      onRestartFlow: (useFlowId) => {
+        if (useFlowId) {
+          replaceWindowFlowId(useFlowId);
+        } else {
+          onRedirect(clientFetch.recoveryUrl(config), true);
+        }
       },
       onValidationError: (body2) => {
         if ("error" in body2) {
@@ -2673,8 +2739,12 @@ async function onSubmitRegistration({ config, flow }, {
     onRedirect(clientFetch.registrationUrl(config), true);
   }).catch(
     clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.registrationUrl(config), true);
+      onRestartFlow: (useFlowId) => {
+        if (useFlowId) {
+          replaceWindowFlowId(useFlowId);
+        } else {
+          onRedirect(clientFetch.registrationUrl(config), true);
+        }
       },
       onValidationError: (body2) => {
         setFlowContainer({
@@ -2717,8 +2787,12 @@ async function onSubmitSettings({ config, flow }, {
     });
   }).catch(
     clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.settingsUrl(config), true);
+      onRestartFlow: (useFlowId) => {
+        if (useFlowId) {
+          replaceWindowFlowId(useFlowId);
+        } else {
+          onRedirect(clientFetch.settingsUrl(config), true);
+        }
       },
       onValidationError: (body2) => {
         setFlowContainer({
@@ -2763,8 +2837,12 @@ async function onSubmitVerification({ config, flow }, {
     })
   ).catch(
     clientFetch.handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(clientFetch.verificationUrl(config), true);
+      onRestartFlow: (useFlowId) => {
+        if (useFlowId) {
+          replaceWindowFlowId(useFlowId);
+        } else {
+          onRedirect(clientFetch.verificationUrl(config), true);
+        }
       },
       onValidationError: (body2) => {
         setFlowContainer({
@@ -3589,16 +3667,16 @@ var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => {
               new Date(value),
               /* @__PURE__ */ new Date()
             ),
-            [key + "_since_minutes"]: Math.abs(
+            [key + "_since_minutes"]: Math.ceil(
               (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60
-            ).toFixed(2),
+            ).toFixed(0),
             [key + "_until"]: intl.formatDateTimeRange(
               /* @__PURE__ */ new Date(),
               new Date(value)
             ),
-            [key + "_until_minutes"]: Math.abs(
+            [key + "_until_minutes"]: Math.ceil(
               ((/* @__PURE__ */ new Date()).getTime() / 1e3 - value) / 60
-            ).toFixed(2)
+            ).toFixed(0)
           };
         }
       }
@@ -3621,7 +3699,7 @@ var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => {
 // src/util/test-id.ts
 function messageTestId(message) {
   return {
-    "data-testid": `ory-message-${message.id}`
+    "data-testid": `ory/ui/message/${message.id}`
   };
 }