From 94d04cda6436140f417a77f41810dbb9a6f95184 Mon Sep 17 00:00:00 2001
From: aeneasr <3372410+aeneasr@users.noreply.github.com>
Date: Tue, 17 Dec 2024 13:07:51 +0100
Subject: [PATCH] fix: passkey and webauthn in settings flow

---
 .../src/components/settings/settings-card.tsx          |  8 ++++++++
 .../src/components/settings/webauthn-settings.tsx      | 10 +---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/elements-react/src/components/settings/settings-card.tsx b/packages/elements-react/src/components/settings/settings-card.tsx
index fed50a80..b52a5d23 100644
--- a/packages/elements-react/src/components/settings/settings-card.tsx
+++ b/packages/elements-react/src/components/settings/settings-card.tsx
@@ -103,13 +103,21 @@ function SettingsSectionContent({ group, nodes }: SettingsSectionProps) {
   )
 }
 
+const getScriptNode = (nodes: UiNode[]): UiNode | undefined =>
+  nodes.find(
+    (node) =>
+      "id" in node.attributes && node.attributes.id === "webauthn_script",
+  )
+
 export function OrySettingsCard() {
   const { flow } = useOryFlow()
   const uniqueGroups = useNodesGroups(flow.ui.nodes)
+  const scriptNode = getScriptNode(flow.ui.nodes)
 
   return (
     <>
       <OryCardValidationMessages />
+      {scriptNode && <Node node={scriptNode} />}
       {uniqueGroups.entries.map(([group, nodes]) => {
         if (group === UiNodeGroupEnum.Default) {
           return null
diff --git a/packages/elements-react/src/components/settings/webauthn-settings.tsx b/packages/elements-react/src/components/settings/webauthn-settings.tsx
index d79cc3f1..6164b4c3 100644
--- a/packages/elements-react/src/components/settings/webauthn-settings.tsx
+++ b/packages/elements-react/src/components/settings/webauthn-settings.tsx
@@ -31,12 +31,6 @@ const getRemoveButtons = (nodes: UiNode[]): UiNode[] =>
       "name" in node.attributes && node.attributes.name === "webauthn_remove",
   )
 
-const getScriptNode = (nodes: UiNode[]): UiNode | undefined =>
-  nodes.find(
-    (node) =>
-      "id" in node.attributes && node.attributes.id === "webauthn_script",
-  )
-
 const getRegisterNode = (nodes: UiNode[]): UiNode | undefined =>
   nodes.find(
     (node) =>
@@ -56,7 +50,6 @@ export function OrySettingsWebauthn({ nodes }: HeadlessSettingsWebauthnProps) {
   const triggerButton = getTriggerNode(nodes)
   const inputNode = getInputNode(nodes)
   const removeButtons = getRemoveButtons(nodes)
-  const scriptNode = getScriptNode(nodes)
   const registerNode = getRegisterNode(nodes)
 
   if (!inputNode || !triggerButton) {
@@ -84,8 +77,6 @@ export function OrySettingsWebauthn({ nodes }: HeadlessSettingsWebauthnProps) {
         {groups.default?.map((node, i) => (
           <Node key={`webauthn-default-${i}`} node={node} />
         ))}
-        {scriptNode && <Node node={scriptNode} />}
-        {registerNode && <Node node={registerNode} />}
         <Form.WebauthnSettings
           nameInput={inputNode}
           triggerButton={{
@@ -95,6 +86,7 @@ export function OrySettingsWebauthn({ nodes }: HeadlessSettingsWebauthnProps) {
           }}
           removeButtons={removeButtons}
         />
+        {registerNode && <Node node={registerNode} />}
       </Card.SettingsSectionContent>
       <Card.SettingsSectionFooter>
         <span>{intl.formatMessage({ id: "settings.webauthn.info" })}</span>