fix: passkey and webauthn in settings flow (#317)

ory · Dec 17, 2024 · d5af551 · d5af551
1 parent 49d5de1
commit d5af551
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git 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
@@ -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>