chore: fix empty second step

ory · Nov 15, 2024 · aeb715f · aeb715f
1 parent e633103
commit aeb715f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/packages/elements-react/src/components/card/card-two-step.tsx b/packages/elements-react/src/components/card/card-two-step.tsx
@@ -49,7 +49,6 @@ export function OryTwoStepCard() {
       ? getFinalNodes(uniqueGroups.groups, formState.method)
       : []
 
-  console.log(formState)
   return (
     <OryCard>
       <OryCardHeader />
@@ -88,6 +87,11 @@ export function OryTwoStepCard() {
             )}
             {formState.current === "method_active" && (
               <>
+                {ui.nodes
+                  .filter((n) => n.type === "script")
+                  .map((node, k) => (
+                    <Node node={node} key={k} />
+                  ))}
                 {finalNodes.sort(sortNodes).map((node, k) => (
                   <Node node={node} key={k} />
                 ))}

diff --git a/packages/elements-react/src/context/form-state.ts b/packages/elements-react/src/context/form-state.ts
@@ -31,10 +31,10 @@ function parseStateFromFlow(flow: OryFlowContainer): FormState {
         return { current: "method_active", method: "link" }
       } else if (flow.flow.active == "code_recovery") {
         return { current: "method_active", method: "code" }
-      } else if (flow.flow.active) {
-        return { current: "method_active", method: flow.flow.active }
       } else if (isChoosingMethod(flow.flow.ui.nodes)) {
         return { current: "select_method" }
+      } else if (flow.flow.active) {
+        return { current: "method_active", method: flow.flow.active }
       }
       return { current: "provide_identifier" }
     case FlowType.Recovery:

diff --git a/packages/elements-react/src/theme/default/components/card/auth-methods.tsx b/packages/elements-react/src/theme/default/components/card/auth-methods.tsx
@@ -1,8 +1,8 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { useIntl } from "react-intl"
 import { OryCardAuthMethodListItemProps } from "@ory/elements-react"
+import { useIntl } from "react-intl"
 import code from "../../assets/icons/code.svg"
 import passkey from "../../assets/icons/passkey.svg"
 import password from "../../assets/icons/password.svg"

diff --git a/packages/elements-react/src/util/ui/index.ts b/packages/elements-react/src/util/ui/index.ts
@@ -48,10 +48,10 @@ export function triggerToWindowCall(
 
   // Retry every 250ms for 5 seconds
   let i = 0
-  const ms = 250
+  const ms = 100
   const interval = setInterval(() => {
     i++
-    if (i > 20) {
+    if (i > 100) {
       clearInterval(interval)
       throw new Error(
         "Unable to load Ory's WebAuthn script. Is it being blocked or otherwise failing to load? If you are running an old version of Ory Elements, please upgrade. For more information, please check your browser's developer console.",
@@ -107,6 +107,10 @@ export function useNodesGroups(nodes: UiNode[]) {
     const groups: Partial<Record<UiNodeGroupEnum, UiNode[]>> = {}
 
     for (const node of nodes) {
+      if (node.type === "script") {
+        // WebAuthn scripts are part of the nodes, for passkey flows
+        continue
+      }
       const groupNodes = groups[node.group] ?? []
       groupNodes.push(node)
       groups[node.group] = groupNodes