From ee4eb9c02ee54035c54126e99d7bd92eb9020039 Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Tue, 26 Nov 2024 08:47:06 +0100
Subject: [PATCH] chore: add more edge cases to form state machine

---
 .../src/context/form-state.test.ts            | 28 +++++++++++++++++--
 .../elements-react/src/context/form-state.ts  |  7 +++--
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/elements-react/src/context/form-state.test.ts b/packages/elements-react/src/context/form-state.test.ts
index e0e05158..19984c58 100644
--- a/packages/elements-react/src/context/form-state.test.ts
+++ b/packages/elements-react/src/context/form-state.test.ts
@@ -325,12 +325,12 @@ test(`should parse state from flow on "action_flow_update" when choosing method
   })
 })
 
-test('should fallback to "impossible_unknown" for unknown recovery state', () => {
+test("should throw error for unknown recovery state", () => {
   const { result } = renderHook(() => useFormStateReducer(init))
   const [, dispatch] = result.current
 
   const mockFlow = {
-    flowType: FlowType.Recovery, // Intentional to simulate an unexpected flow
+    flowType: FlowType.Recovery,
     flow: { id: "unknown", active: null, ui: { nodes: [] } },
   } as unknown as OryFlowContainer
 
@@ -344,7 +344,7 @@ test('should fallback to "impossible_unknown" for unknown recovery state', () =>
   ).toThrow("Unknown form state")
 })
 
-test('should fallback to "impossible_unknown" for unrecognized flow', () => {
+test("should throw error for unrecognized flow", () => {
   const { result } = renderHook(() => useFormStateReducer(init))
   const [, dispatch] = result.current
 
@@ -362,3 +362,25 @@ test('should fallback to "impossible_unknown" for unrecognized flow', () => {
     }),
   ).toThrow("Unknown form state")
 })
+
+for (const activeMethod of ["identifier_first", "default"]) {
+  test(`should ignore ${activeMethod} group in active field`, () => {
+    const { result } = renderHook(() => useFormStateReducer(init))
+    const [, dispatch] = result.current
+
+    const mockFlow = {
+      flowType: FlowType.Login,
+      flow: { id: "unknown", active: activeMethod, ui: { nodes: [] } },
+    } as unknown as OryFlowContainer
+
+    act(() => {
+      dispatch({
+        type: "action_flow_update",
+        flow: mockFlow,
+      })
+    })
+
+    const [state] = result.current
+    expect(state).toEqual({ current: "provide_identifier" })
+  })
+}
diff --git a/packages/elements-react/src/context/form-state.ts b/packages/elements-react/src/context/form-state.ts
index 755201cb..b958cdcd 100644
--- a/packages/elements-react/src/context/form-state.ts
+++ b/packages/elements-react/src/context/form-state.ts
@@ -40,10 +40,13 @@ function parseStateFromFlow(flow: OryFlowContainer): FormState {
         return { current: "method_active", method: "code" }
       } else if (methodWithMessage) {
         return { current: "method_active", method: methodWithMessage.group }
+      } else if (
+        flow.flow.active &&
+        !["default", "identifier_first"].includes(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" }
     }