From 09963c0bb15c894e2887d593c17d7fe2393b1c5b Mon Sep 17 00:00:00 2001
From: Patrik <zepatrik@users.noreply.github.com>
Date: Tue, 10 Oct 2023 18:37:18 +0200
Subject: [PATCH] fix: use unique keys for flow nodes

---
 examples/nextjs-spa/src/pages/recovery.tsx    |  5 +--
 .../nextjs-spa/src/pages/verification.tsx     |  4 +--
 examples/preact-spa/src/recovery.tsx          |  3 +-
 examples/preact-spa/src/verification.tsx      |  3 +-
 examples/react-spa/src/Recovery.tsx           |  3 +-
 examples/react-spa/src/Verification.tsx       |  3 +-
 .../ory/helpers/filter-flow-nodes.tsx         | 34 ++++++++++++-------
 7 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/examples/nextjs-spa/src/pages/recovery.tsx b/examples/nextjs-spa/src/pages/recovery.tsx
index 4628b1e4b..32cf5cfba 100644
--- a/examples/nextjs-spa/src/pages/recovery.tsx
+++ b/examples/nextjs-spa/src/pages/recovery.tsx
@@ -84,10 +84,7 @@ const Recovery: NextPageWithLayout = () => {
         updateRecoveryFlowBody: values,
       })
       .then(({ data }) => {
-        // reset the form data completely
-        setFlow(null)
-        // Form submission was successful, show the message to the user!
-        getFlow(data.id)
+        setFlow(data)
       })
       .catch(handleError)
 
diff --git a/examples/nextjs-spa/src/pages/verification.tsx b/examples/nextjs-spa/src/pages/verification.tsx
index 25e5f7dfd..5269ab11a 100644
--- a/examples/nextjs-spa/src/pages/verification.tsx
+++ b/examples/nextjs-spa/src/pages/verification.tsx
@@ -81,10 +81,8 @@ const Verification: NextPageWithLayout = () => {
         updateVerificationFlowBody: values,
       })
       .then(({ data }) => {
-        // reset the input fields
-        setFlow(null)
         // Form submission was successful, show the message to the user!
-        getFlow(data.id)
+        setFlow(data)
       })
       .catch(handleError)
 
diff --git a/examples/preact-spa/src/recovery.tsx b/examples/preact-spa/src/recovery.tsx
index 06dc1cda3..c77af5d73 100644
--- a/examples/preact-spa/src/recovery.tsx
+++ b/examples/preact-spa/src/recovery.tsx
@@ -42,8 +42,7 @@ export const Recovery = () => {
       })
       .then(({ data: flow }) => {
         // Form submission was successful, show the message to the user!
-        setFlow(null)
-        getFlow(flow.id)
+        setFlow(flow)
       })
       .catch(sdkErrorHandler)
   }
diff --git a/examples/preact-spa/src/verification.tsx b/examples/preact-spa/src/verification.tsx
index a7958c548..98a2122a8 100644
--- a/examples/preact-spa/src/verification.tsx
+++ b/examples/preact-spa/src/verification.tsx
@@ -42,8 +42,7 @@ export const Verification = () => {
         updateVerificationFlowBody: body,
       })
       .then(({ data: flow }) => {
-        setFlow(null)
-        getFlow(flow.id)
+        setFlow(flow)
       })
       .catch(sdkErrorHandler)
   }
diff --git a/examples/react-spa/src/Recovery.tsx b/examples/react-spa/src/Recovery.tsx
index 9640b8c18..389e3a5d7 100644
--- a/examples/react-spa/src/Recovery.tsx
+++ b/examples/react-spa/src/Recovery.tsx
@@ -44,8 +44,7 @@ export const Recovery = () => {
       .updateRecoveryFlow({ flow: flow.id, updateRecoveryFlowBody: body })
       .then(({ data: flow }) => {
         // Form submission was successful, show the message to the user!
-        setFlow(null)
-        getFlow(flow.id)
+        setFlow(flow)
       })
       .catch(sdkErrorHandler)
   }
diff --git a/examples/react-spa/src/Verification.tsx b/examples/react-spa/src/Verification.tsx
index f6a915a8d..f67366772 100644
--- a/examples/react-spa/src/Verification.tsx
+++ b/examples/react-spa/src/Verification.tsx
@@ -49,8 +49,7 @@ export const Verification = (): JSX.Element => {
         updateVerificationFlowBody: body,
       })
       .then(({ data: flow }) => {
-        setFlow(null)
-        getFlow(flow.id)
+        setFlow(flow)
       })
       .catch(sdkErrorHandler)
   }
diff --git a/src/react-components/ory/helpers/filter-flow-nodes.tsx b/src/react-components/ory/helpers/filter-flow-nodes.tsx
index d6ea4fcd1..421806540 100644
--- a/src/react-components/ory/helpers/filter-flow-nodes.tsx
+++ b/src/react-components/ory/helpers/filter-flow-nodes.tsx
@@ -25,20 +25,28 @@ export const FilterFlowNodes = ({
 
   const nodes = filterNodesByGroups(filter)
     // we don't want to map the csrf token every time, only on the form level
-    .filter((node) =>
-      getInputName(node) === "csrf_token" && !includeCSRF ? false : true,
-    )
-    .map((node, k) =>
-      ["hidden"].includes(getNodeInputType(node.attributes))
-        ? {
-            node: <Node node={node} key={k} {...overrides} />,
-            hidden: true,
+    .filter((node) => includeCSRF || !(getInputName(node) === "csrf_token"))
+    .map((node, k) => ({
+      node: (
+        <Node
+          node={node}
+          key={
+            // input node
+            "name" in node.attributes
+              ? node.attributes.name
+              : // image node
+              "src" in node.attributes
+              ? node.attributes.src
+              : // anchor, text & script node
+              "id" in node.attributes
+              ? node.attributes.id
+              : k
           }
-        : {
-            node: <Node node={node} key={k} {...overrides} />,
-            hidden: false,
-          },
-    )
+          {...overrides}
+        />
+      ),
+      hidden: getNodeInputType(node.attributes) === "hidden",
+    }))
   return nodes.length > 0 ? (
     <>
       {nodes.filter((node) => node.hidden).map((node) => node.node)}