From 8b901ec7e6a8f9d1632a15256c72cda76fa27f40 Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Wed, 4 Sep 2024 13:25:03 +0000
Subject: [PATCH] feat: add support for captchas (#200)

---
 src/react-components/ory/helpers/captcha.tsx  | 22 +++++++++++++++++++
 .../ory/helpers/node-script.tsx               |  2 +-
 .../ory/sections/link-section.tsx             |  2 ++
 .../ory/sections/login-section.tsx            |  2 ++
 .../ory/sections/registration-section.tsx     |  3 +++
 5 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/react-components/ory/helpers/captcha.tsx

diff --git a/src/react-components/ory/helpers/captcha.tsx b/src/react-components/ory/helpers/captcha.tsx
new file mode 100644
index 000000000..4d0af3029
--- /dev/null
+++ b/src/react-components/ory/helpers/captcha.tsx
@@ -0,0 +1,22 @@
+import { UiNode } from "@ory/client"
+import { isUiNodeTextAttributes } from "../../../ui"
+import { Node } from "./node"
+
+interface CaptchaSectionProps {
+  nodes: UiNode[]
+}
+
+export function CaptchaSection({ nodes }: CaptchaSectionProps) {
+  const filteredNodes = nodes.filter(
+    (node) => (node.group as string) === "captcha",
+  )
+  return filteredNodes.map((node, k) => {
+    if (
+      isUiNodeTextAttributes(node.attributes) &&
+      node.attributes.id === "captcha"
+    ) {
+      return <div id={node.attributes.id} key={node.attributes.id}></div>
+    }
+    return <Node node={node} key={k} />
+  })
+}
diff --git a/src/react-components/ory/helpers/node-script.tsx b/src/react-components/ory/helpers/node-script.tsx
index fd77c4314..6911d6f0a 100644
--- a/src/react-components/ory/helpers/node-script.tsx
+++ b/src/react-components/ory/helpers/node-script.tsx
@@ -6,7 +6,7 @@ export const useScriptNodes = ({ nodes }: { nodes: UiNode[] }) => {
   useEffect(() => {
     const scriptNodes = filterNodesByGroups({
       nodes: nodes,
-      groups: "webauthn",
+      groups: ["webauthn", "captcha"],
       attributes: "text/javascript",
       withoutDefaultGroup: true,
       withoutDefaultAttributes: true,
diff --git a/src/react-components/ory/sections/link-section.tsx b/src/react-components/ory/sections/link-section.tsx
index 86b77f4cc..93b7f1299 100644
--- a/src/react-components/ory/sections/link-section.tsx
+++ b/src/react-components/ory/sections/link-section.tsx
@@ -3,6 +3,7 @@ import { JSX } from "react"
 
 import { gridStyle } from "../../../theme"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
+import { CaptchaSection } from "../helpers/captcha"
 
 export interface LinkSectionProps {
   nodes: UiNode[]
@@ -33,6 +34,7 @@ export const LinkSection = ({ nodes }: LinkSectionProps): JSX.Element => (
           }}
         />
       </div>
+      <CaptchaSection nodes={nodes} />
       <FilterFlowNodes
         filter={{
           nodes: nodes,
diff --git a/src/react-components/ory/sections/login-section.tsx b/src/react-components/ory/sections/login-section.tsx
index f7f73de3e..5f91f4231 100644
--- a/src/react-components/ory/sections/login-section.tsx
+++ b/src/react-components/ory/sections/login-section.tsx
@@ -7,6 +7,7 @@ import { ButtonLink, CustomHref } from "../../button-link"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
 import { hasPassword, hasIdentifierFirst } from "../helpers/utils"
 import { SelfServiceFlow } from "../helpers/types"
+import { CaptchaSection } from "../helpers/captcha"
 
 export interface LoginSectionProps {
   nodes: UiNode[]
@@ -71,6 +72,7 @@ export const LoginSection = ({
             </ButtonLink>
           )}
         </div>
+        <CaptchaSection nodes={nodes} />
         <FilterFlowNodes
           filter={{
             nodes: nodes,
diff --git a/src/react-components/ory/sections/registration-section.tsx b/src/react-components/ory/sections/registration-section.tsx
index 0d6ad7b34..81a8a9926 100644
--- a/src/react-components/ory/sections/registration-section.tsx
+++ b/src/react-components/ory/sections/registration-section.tsx
@@ -4,6 +4,7 @@ import { JSX } from "react"
 import { gridStyle } from "../../../theme"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
 import { hasPassword } from "../helpers/utils"
+import { CaptchaSection } from "../helpers/captcha"
 
 export interface RegistrationSectionProps {
   nodes: UiNode[]
@@ -23,6 +24,8 @@ export const RegistrationSection = ({
           }}
         />
       </div>
+
+      <CaptchaSection nodes={nodes} />
       <FilterFlowNodes
         filter={{
           nodes: nodes,