feat: add support for captchas (#200)

Author: jonas-jonas

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} />
+  })
+}

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,

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,

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,

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,