diff --git a/packages/elements-react/src/components/card/card-two-step.tsx b/packages/elements-react/src/components/card/card-two-step.tsx
index f9816d49..22bbf4dd 100644
--- a/packages/elements-react/src/components/card/card-two-step.tsx
+++ b/packages/elements-react/src/components/card/card-two-step.tsx
@@ -88,6 +88,11 @@ export function OryTwoStepCard() {
)}
{formState.current === "method_active" && (
<>
+ {ui.nodes
+ .filter((n) => n.type === "script")
+ .map((node, k) => (
+
+ ))}
{finalNodes.sort(sortNodes).map((node, k) => (
))}
diff --git a/packages/elements-react/src/context/form-state.ts b/packages/elements-react/src/context/form-state.ts
index b90af88a..16329ff8 100644
--- 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
index 5ccb3493..680fd7bd 100644
--- 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
index 40c86f51..6e106e84 100644
--- 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> = {}
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