@ory/elements-react 1.0.0-next.30 → 1.0.0-next.31

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 1.0.0-next.31 (2025-03-06)
+
+### 🚀 Features
+
+- support captchas natively in new and old elements ([#372](https://github.com/ory/elements/pull/372))
+
+### 🩹 Fixes
+
+- center text on OIDC buttons and debounce state update ([#366](https://github.com/ory/elements/pull/366))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-next.30 (2025-03-05)
 
 ### 🩹 Fixes

package/DEVELOPMENT.md

@@ -51,13 +51,13 @@ Each flow has its own story in the `packages/elements-react-stories` package. To
 run the storybook development environment, execute:
 
 ```bash
-npx nx storybook elements-react-stories
+npx nx storybook @ory/elements-react
 ```
 
 You can also build the Storybook using:
 
 ```bash
-npx nx build elements-react-stories
+npx nx build @ory/elements-react
 ```
 
 The stories use stub responses
@@ -66,14 +66,31 @@ The stories use stub responses
 
 @ory/elements-react and @ory/nextjs is released using nx releases.
 
-There is a helper script located in "./scripts/release.sh".
+There is a helper script located in `./scripts/release.sh`.
 
 Usage:
 
 ```bash
-./scripts/release.sh @ory/elements-react # or @ory/nextjs
+./scripts/release.sh <project> <tag>
+
+./scripts/release.sh @ory/elements-react next
 ```
 
 The script asks the user before executing each steps. Please double check
 CHANGELOG.md and dry run outputs. nx also creates git tags and commits, that
 should be commited. The script will do that automatically.
+
+### Pre-releasing unmerged changes
+
+You can release a PR's changes to npm to test them in a different repository,
+etc. These versions are released on the `pr` npm tag, and will have the version
+`0.0.0-pr.<git hash>`. These releases wont be pushed to master, but you might
+have to revert the `package.json` and `package-lock.json` files.
+
+Usage:
+
+```bash
+./scripts/release.sh <project> <tag>
+
+./scripts/release.sh @ory/elements-react pr
+```

package/babel.config.js

@@ -0,0 +1,10 @@
+// Copyright © 2025 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+}

package/dist/index.d.mts

@@ -28,6 +28,9 @@ type OryNodeTextProps = {
     node: UiNode;
 };
 type OryCardLogoProps = Record<string, never>;
+type OryNodeCaptchaProps = {
+    node: UiNode;
+};
 /**
  * Props for the AuthMethodListItem component. This component is used
  * to render a single auth method in the AuthMethodList component.
@@ -237,6 +240,10 @@ type OryFlowComponents = {
          * The Text component is rendered whenever a "text" node is encountered.
          */
         Text: ComponentType<OryNodeTextProps>;
+        /**
+         * The Captcha component is rendered whenever a "captcha" group is encountered.
+         */
+        Captcha: ComponentType<OryNodeCaptchaProps>;
     };
     Card: {
         /**
@@ -582,4 +589,4 @@ type OryProviderProps = {
 } & OryFlowContainer & PropsWithChildren;
 declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };

package/dist/index.d.ts

@@ -28,6 +28,9 @@ type OryNodeTextProps = {
     node: UiNode;
 };
 type OryCardLogoProps = Record<string, never>;
+type OryNodeCaptchaProps = {
+    node: UiNode;
+};
 /**
  * Props for the AuthMethodListItem component. This component is used
  * to render a single auth method in the AuthMethodList component.
@@ -237,6 +240,10 @@ type OryFlowComponents = {
          * The Text component is rendered whenever a "text" node is encountered.
          */
         Text: ComponentType<OryNodeTextProps>;
+        /**
+         * The Captcha component is rendered whenever a "captcha" group is encountered.
+         */
+        Captcha: ComponentType<OryNodeCaptchaProps>;
     };
     Card: {
         /**
@@ -582,4 +589,4 @@ type OryProviderProps = {
 } & OryFlowContainer & PropsWithChildren;
 declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };

package/dist/index.js

@@ -40,6 +40,9 @@ var defaultNodeOrder = [
   "default",
   "profile",
   "password",
+  // CAPTCHA is below password because otherwise the password input field
+  // would be above the captcha. Somehow, we sort the password sign up button somewhere else to be always at the bottom.
+  "captcha",
   "passkey",
   "code",
   "webauthn"
@@ -48,6 +51,11 @@ function defaultNodeSorter(a, b) {
   var _a, _b;
   const aGroupWeight = (_a = defaultNodeOrder.indexOf(a.group)) != null ? _a : 999;
   const bGroupWeight = (_b = defaultNodeOrder.indexOf(b.group)) != null ? _b : 999;
+  if (b.group === "captcha" && clientFetch.isUiNodeInputAttributes(a.attributes) && a.attributes.type === "submit") {
+    return aGroupWeight - (bGroupWeight - 2);
+  } else if (a.group === "captcha" && clientFetch.isUiNodeInputAttributes(b.attributes) && b.attributes.type === "submit") {
+    return aGroupWeight - 2 - bGroupWeight;
+  }
   return aGroupWeight - bGroupWeight;
 }
 var defaultGroupOrder = [
@@ -96,11 +104,12 @@ function filterOidcOut(nodes) {
   return nodes.filter((node) => node.group !== clientFetch.UiNodeGroupEnum.Oidc);
 }
 function getFinalNodes(uniqueGroups, selectedGroup) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const selectedNodes = selectedGroup ? (_a = uniqueGroups[selectedGroup]) != null ? _a : [] : [];
   return [
     ...(_b = uniqueGroups == null ? void 0 : uniqueGroups.identifier_first) != null ? _b : [],
-    ...(_c = uniqueGroups == null ? void 0 : uniqueGroups.default) != null ? _c : []
+    ...(_c = uniqueGroups == null ? void 0 : uniqueGroups.default) != null ? _c : [],
+    ...(_d = uniqueGroups == null ? void 0 : uniqueGroups.captcha) != null ? _d : []
   ].flat().filter(
     (node) => "type" in node.attributes && node.attributes.type === "hidden"
   ).concat(selectedNodes);
@@ -172,6 +181,7 @@ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
       clientFetch.UiNodeGroupEnum.Default,
       clientFetch.UiNodeGroupEnum.IdentifierFirst,
       clientFetch.UiNodeGroupEnum.Profile,
+      clientFetch.UiNodeGroupEnum.Captcha,
       ...excludeAuthMethods
     ].includes(group)
   );
@@ -952,6 +962,9 @@ var NodeInput = ({
 };
 var Node = ({ node, onClick }) => {
   const { Node: Node2 } = useComponents();
+  if (node.group === clientFetch.UiNodeGroupEnum.Captcha) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Node2.Captcha, { node });
+  }
   if (clientFetch.isUiNodeImageAttributes(node.attributes)) {
     return /* @__PURE__ */ jsxRuntime.jsx(Node2.Image, { node, attributes: node.attributes });
   } else if (clientFetch.isUiNodeTextAttributes(node.attributes)) {
@@ -1037,7 +1050,8 @@ function OryTwoStepCard() {
       clientFetch.UiNodeGroupEnum.Oidc,
       clientFetch.UiNodeGroupEnum.Default,
       clientFetch.UiNodeGroupEnum.IdentifierFirst,
-      clientFetch.UiNodeGroupEnum.Profile
+      clientFetch.UiNodeGroupEnum.Profile,
+      clientFetch.UiNodeGroupEnum.Captcha
     ].includes(group)
   );
   const nonOidcNodes = filterOidcOut(ui.nodes);
@@ -1077,7 +1091,8 @@ function OryTwoStepCard() {
                   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)),