diff --git a/.changeset/canonical-awaiting-input.md b/.changeset/canonical-awaiting-input.md
new file mode 100644
index 0000000..7882d30
--- /dev/null
+++ b/.changeset/canonical-awaiting-input.md
@@ -0,0 +1,5 @@
+---
+"@onkernel/managed-auth-react": minor
+---
+
+Prefer canonical managed-auth fields and choices when present, bind submissions to their interaction IDs, refresh stale interactions, and retain legacy rendering and submission fallbacks during the deprecation window.
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index b261341..b8dafb9 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -41,6 +41,9 @@ jobs:
       - name: Typecheck
         run: bun run typecheck
 
+      - name: Test
+        run: bun run test
+
       # Dry-run npm pack so we catch missing files / bad exports BEFORE a
       # tagged release tries to publish. Exits non-zero if e.g. dist/ is
       # missing from `files` or an export points at a non-existent path.
diff --git a/bun.lock b/bun.lock
index 61be4b1..3cfc67f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,8 +7,11 @@
       "devDependencies": {
         "@changesets/changelog-github": "0.7.0",
         "@changesets/cli": "^2.27.0",
+        "@types/bun": "1.2.21",
         "@types/node": "^20",
+        "@types/react-test-renderer": "18.3.1",
         "prettier": "^3.3.0",
+        "react-test-renderer": "18.3.1",
         "typescript": "^5.6.0",
       },
     },
@@ -265,6 +268,8 @@
 
     "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
 
+    "@types/bun": ["@types/bun@1.2.21", "", { "dependencies": { "bun-types": "1.2.21" } }, "sha512-NiDnvEqmbfQ6dmZ3EeUO577s4P5bf4HCTXtI6trMc6f6RzirY5IrF3aIookuSpyslFzrnvv2lmEWv5HyC1X79A=="],
+
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/node": ["@types/node@20.19.39", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-orrrD74MBUyK8jOAD/r0+lfa1I2MO6I+vAkmAWzMYbCcgrN4lCrmK52gRFQq/JRxfYPfonkr4b0jcY7Olqdqbw=="],
@@ -275,6 +280,8 @@
 
     "@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
 
+    "@types/react-test-renderer": ["@types/react-test-renderer@18.3.1", "", { "dependencies": { "@types/react": "^18" } }, "sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA=="],
+
     "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
 
     "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
@@ -297,6 +304,8 @@
 
     "browserslist": ["browserslist@4.28.2", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
 
+    "bun-types": ["bun-types@1.2.21", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-sa2Tj77Ijc/NTLS0/Odjq/qngmEPZfbfnOERi0KRUYhT9R8M4VBioWVmMWE5GrYbKMc+5lVybXygLdibHaqVqw=="],
+
     "bundle-require": ["bundle-require@5.1.0", "", { "dependencies": { "load-tsconfig": "^0.2.3" }, "peerDependencies": { "esbuild": ">=0.18" } }, "sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA=="],
 
     "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
@@ -479,8 +488,14 @@
 
     "react-dom": ["react-dom@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
 
+    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
+
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
+    "react-shallow-renderer": ["react-shallow-renderer@16.15.0", "", { "dependencies": { "object-assign": "^4.1.1", "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA=="],
+
+    "react-test-renderer": ["react-test-renderer@18.3.1", "", { "dependencies": { "react-is": "^18.3.1", "react-shallow-renderer": "^16.15.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA=="],
+
     "read-yaml-file": ["read-yaml-file@1.1.0", "", { "dependencies": { "graceful-fs": "^4.1.5", "js-yaml": "^3.6.1", "pify": "^4.0.1", "strip-bom": "^3.0.0" } }, "sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA=="],
 
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
diff --git a/package.json b/package.json
index 87a9bbd..12947d0 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "build": "bun run --filter '*' build",
     "dev": "bun run --filter '*' dev",
     "typecheck": "bun run --filter '*' typecheck",
+    "test": "bun test",
     "lint": "bun run --filter '*' lint",
     "format": "prettier --write \"**/*.{ts,tsx,js,json,md,css}\"",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,json,md,css}\"",
@@ -18,8 +19,11 @@
   "devDependencies": {
     "@changesets/changelog-github": "0.7.0",
     "@changesets/cli": "^2.27.0",
+    "@types/bun": "1.2.21",
     "@types/node": "^20",
+    "@types/react-test-renderer": "18.3.1",
     "prettier": "^3.3.0",
+    "react-test-renderer": "18.3.1",
     "typescript": "^5.6.0"
   },
   "packageManager": "bun@1.2.21"
diff --git a/packages/managed-auth-react/src/components/ExternalActionWaiting.tsx b/packages/managed-auth-react/src/components/ExternalActionWaiting.tsx
index 964c2b7..ca54a98 100644
--- a/packages/managed-auth-react/src/components/ExternalActionWaiting.tsx
+++ b/packages/managed-auth-react/src/components/ExternalActionWaiting.tsx
@@ -36,7 +36,7 @@ function getMFAIcon(type: MFAType) {
 interface ExternalActionWaitingProps {
   message?: string | null;
   mfaOptions?: MFAOption[];
-  onMFASelect?: (mfaType: MFAType) => void;
+  onMFASelect?: (mfaType: MFAType, choiceId?: string) => void;
   isLoading?: boolean;
 }
 
@@ -91,11 +91,11 @@ export function ExternalActionWaiting({
         <div className="kma-external-action__alternatives">
           {mfaOptions.map((option, idx) => (
             <Button
-              key={idx}
+              key={option.id ?? `${option.type}:${idx}`}
               variant="secondary"
               slotKey="mfaOption"
               className="kma-option"
-              onClick={() => onMFASelect(option.type)}
+              onClick={() => onMFASelect(option.type, option.id)}
               disabled={isLoading}
             >
               <span
diff --git a/packages/managed-auth-react/src/components/UnifiedAuthForm.test.ts b/packages/managed-auth-react/src/components/UnifiedAuthForm.test.ts
new file mode 100644
index 0000000..1c62d2a
--- /dev/null
+++ b/packages/managed-auth-react/src/components/UnifiedAuthForm.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "bun:test";
+import { getAutocomplete } from "./UnifiedAuthForm";
+
+describe("getAutocomplete", () => {
+  test("uses the canonical field ref for username autocomplete", () => {
+    expect(
+      getAutocomplete({
+        id: "field_opaque",
+        ref: "username",
+        name: "field_opaque",
+        label: "Username",
+        type: "text",
+      }),
+    ).toBe("username");
+  });
+});
diff --git a/packages/managed-auth-react/src/components/UnifiedAuthForm.tsx b/packages/managed-auth-react/src/components/UnifiedAuthForm.tsx
index 1e8769c..49395f0 100644
--- a/packages/managed-auth-react/src/components/UnifiedAuthForm.tsx
+++ b/packages/managed-auth-react/src/components/UnifiedAuthForm.tsx
@@ -38,7 +38,7 @@ interface UnifiedAuthFormProps {
   signInOptions?: SignInOption[];
   onSubmitFields: (credentials: Record<string, string>) => void;
   onSSOClick: (ssoButton: SSOButton) => void;
-  onMFASelect: (mfaType: MFAType) => void;
+  onMFASelect: (mfaType: MFAType, choiceId?: string) => void;
   onSignInOptionSelect: (optionId: string) => void;
   isLoading?: boolean;
   errorMessage?: string | null;
@@ -76,8 +76,8 @@ function getInputType(field: DiscoveredField): string {
   }
 }
 
-function getAutocomplete(field: DiscoveredField): string | undefined {
-  const name = field.name.toLowerCase();
+export function getAutocomplete(field: DiscoveredField): string | undefined {
+  const identity = (field.ref ?? field.name).toLowerCase();
   switch (field.type) {
     case "email":
       return "email";
@@ -89,7 +89,7 @@ function getAutocomplete(field: DiscoveredField): string | undefined {
     case "totp":
       return "one-time-code";
     default:
-      if (name.includes("user") || name.includes("identifier"))
+      if (identity.includes("user") || identity.includes("identifier"))
         return "username";
       return undefined;
   }
@@ -124,12 +124,17 @@ export function UnifiedAuthForm({
   const hasSignIn = signInOptions.length > 0;
 
   const onlySignIn = hasSignIn && !hasMFA && !hasFields && !hasSSO;
+  const onlyAccounts =
+    onlySignIn && signInOptions.every((option) => option.type === "account");
   const onlyMFA = hasMFA && !hasSignIn && !hasFields && !hasSSO;
 
   let title: ReactNode;
   let subtitle: string | undefined;
 
-  if (onlySignIn) {
+  if (onlyAccounts) {
+    title = l.accountSelectTitle;
+    subtitle = l.accountSelectSubtitle;
+  } else if (onlySignIn) {
     title = l.signInSelectTitle;
     subtitle = l.signInSelectSubtitle;
   } else if (onlyMFA) {
@@ -196,11 +201,11 @@ export function UnifiedAuthForm({
     <div className="kma-options">
       {sortedMFAOptions.map((option, idx) => (
         <Button
-          key={idx}
+          key={option.id ?? `${option.type}:${idx}`}
           variant="secondary"
           slotKey="mfaOption"
           className="kma-option"
-          onClick={() => onMFASelect(option.type)}
+          onClick={() => onMFASelect(option.type, option.id)}
           disabled={isLoading}
         >
           <span
diff --git a/packages/managed-auth-react/src/index.ts b/packages/managed-auth-react/src/index.ts
index 29426de..9a62bde 100644
--- a/packages/managed-auth-react/src/index.ts
+++ b/packages/managed-auth-react/src/index.ts
@@ -43,6 +43,9 @@ export type {
   SignInOption,
   FlowStatus,
   FlowStep,
+  ManagedAuthChoice,
+  ManagedAuthChoiceType,
+  ManagedAuthField,
   ManagedAuthResponse,
   UIState,
 } from "./lib/types";
diff --git a/packages/managed-auth-react/src/lib/api.test.ts b/packages/managed-auth-react/src/lib/api.test.ts
new file mode 100644
index 0000000..1f58a8f
--- /dev/null
+++ b/packages/managed-auth-react/src/lib/api.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, test } from "bun:test";
+import { ManagedAuthApiError, submitManagedAuth } from "./api";
+
+describe("submitManagedAuth", () => {
+  test("preserves structured API error codes", async () => {
+    const fetch = async () =>
+      new Response(
+        JSON.stringify({
+          code: "stale_interaction",
+          message: "Refresh the flow state and try again.",
+        }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      );
+
+    try {
+      await submitManagedAuth(
+        "connection-id",
+        "jwt",
+        {
+          interaction_id: "mai_previous",
+          field_values: { field_password: "secret" },
+        },
+        { fetch: fetch as unknown as typeof globalThis.fetch },
+      );
+      throw new Error("expected submitManagedAuth to reject");
+    } catch (error) {
+      expect(error).toBeInstanceOf(ManagedAuthApiError);
+      expect((error as ManagedAuthApiError).code).toBe("stale_interaction");
+      expect((error as ManagedAuthApiError).message).toBe(
+        "Refresh the flow state and try again.",
+      );
+    }
+  });
+});
diff --git a/packages/managed-auth-react/src/lib/api.ts b/packages/managed-auth-react/src/lib/api.ts
index 1d995d1..8464e7b 100644
--- a/packages/managed-auth-react/src/lib/api.ts
+++ b/packages/managed-auth-react/src/lib/api.ts
@@ -17,12 +17,20 @@ export class ManagedAuthApiError extends Error {
   public readonly status: number;
   public readonly body: string;
   public readonly fatal: boolean;
-  constructor(message: string, status: number, body: string, fatal = false) {
+  public readonly code?: string;
+  constructor(
+    message: string,
+    status: number,
+    body: string,
+    fatal = false,
+    code?: string,
+  ) {
     super(message);
     this.name = "ManagedAuthApiError";
     this.status = status;
     this.body = body;
     this.fatal = fatal;
+    this.code = code;
   }
 }
 
@@ -34,15 +42,40 @@ function getBaseUrl(options?: ApiClientOptions): string {
   return (options?.baseUrl ?? DEFAULT_BASE_URL).replace(/\/$/, "");
 }
 
-async function parseError(response: Response): Promise<string> {
-  const text = await response.text();
+interface ParsedApiError {
+  message: string;
+  code?: string;
+}
+
+async function parseError(response: Response): Promise<ParsedApiError> {
+  const body = await response.text();
   try {
-    const parsed = JSON.parse(text);
-    if (parsed && typeof parsed.message === "string") return parsed.message;
+    const parsed = JSON.parse(body) as unknown;
+    if (parsed && typeof parsed === "object") {
+      const error = parsed as { message?: unknown; code?: unknown };
+      return {
+        message:
+          typeof error.message === "string"
+            ? error.message
+            : body || response.statusText,
+        code: typeof error.code === "string" ? error.code : undefined,
+      };
+    }
+    return { message: body || response.statusText };
   } catch {
-    /* fall through */
+    return { message: body || response.statusText };
   }
-  return text || response.statusText;
+}
+
+async function responseError(response: Response): Promise<ManagedAuthApiError> {
+  const error = await parseError(response);
+  return new ManagedAuthApiError(
+    error.message,
+    response.status,
+    error.message,
+    false,
+    error.code,
+  );
 }
 
 export async function exchangeHandoffCode(
@@ -60,8 +93,7 @@ export async function exchangeHandoffCode(
     },
   );
   if (!res.ok) {
-    const msg = await parseError(res);
-    throw new ManagedAuthApiError(msg, res.status, msg);
+    throw await responseError(res);
   }
   const data = (await res.json()) as { jwt?: string };
   if (!data.jwt) {
@@ -85,23 +117,26 @@ export async function retrieveManagedAuth(
     headers: { Authorization: `Bearer ${jwt}` },
   });
   if (!res.ok) {
-    const msg = await parseError(res);
-    throw new ManagedAuthApiError(msg, res.status, msg);
+    throw await responseError(res);
   }
   return (await res.json()) as ManagedAuthResponse;
 }
 
-interface SubmitBody {
-  fields: Record<string, string>;
+export interface ManagedAuthSubmitBody {
+  interaction_id?: string;
+  field_values?: Record<string, string>;
+  selected_choice_id?: string;
+  fields?: Record<string, string>;
   sso_button_selector?: string;
+  sso_provider?: string;
   mfa_option_id?: MFAType;
   sign_in_option_id?: string;
 }
 
-async function submit(
+export async function submitManagedAuth(
   id: string,
   jwt: string,
-  body: SubmitBody,
+  body: ManagedAuthSubmitBody,
   options?: ApiClientOptions,
 ): Promise<void> {
   const f = getFetch(options);
@@ -114,57 +149,10 @@ async function submit(
     body: JSON.stringify(body),
   });
   if (!res.ok) {
-    const msg = await parseError(res);
-    throw new ManagedAuthApiError(msg, res.status, msg);
+    throw await responseError(res);
   }
 }
 
-export function submitFieldValues(
-  id: string,
-  jwt: string,
-  fields: Record<string, string>,
-  options?: ApiClientOptions,
-): Promise<void> {
-  return submit(id, jwt, { fields }, options);
-}
-
-export function submitSSOButton(
-  id: string,
-  jwt: string,
-  selector: string,
-  options?: ApiClientOptions,
-): Promise<void> {
-  return submit(
-    id,
-    jwt,
-    { fields: {}, sso_button_selector: selector },
-    options,
-  );
-}
-
-export function submitMFASelection(
-  id: string,
-  jwt: string,
-  mfaType: MFAType,
-  options?: ApiClientOptions,
-): Promise<void> {
-  return submit(id, jwt, { fields: {}, mfa_option_id: mfaType }, options);
-}
-
-export function submitSignInOption(
-  id: string,
-  jwt: string,
-  signInOptionId: string,
-  options?: ApiClientOptions,
-): Promise<void> {
-  return submit(
-    id,
-    jwt,
-    { fields: {}, sign_in_option_id: signInOptionId },
-    options,
-  );
-}
-
 /** Callbacks for the SSE event stream. */
 export interface ManagedAuthStreamHandlers {
   onState: (data: ManagedAuthStateEventData) => void;
@@ -202,8 +190,7 @@ export function streamManagedAuthEvents(
     });
 
     if (!res.ok) {
-      const msg = await parseError(res);
-      handlers.onError(new ManagedAuthApiError(msg, res.status, msg));
+      handlers.onError(await responseError(res));
       return;
     }
 
diff --git a/packages/managed-auth-react/src/lib/types.ts b/packages/managed-auth-react/src/lib/types.ts
index 70c851e..c78e79d 100644
--- a/packages/managed-auth-react/src/lib/types.ts
+++ b/packages/managed-auth-react/src/lib/types.ts
@@ -28,6 +28,8 @@ export type MFAType =
   | "other";
 
 export interface DiscoveredField {
+  id?: string;
+  ref?: string;
   name: string;
   label: string;
   type: "text" | "email" | "password" | "tel" | "code" | "totp";
@@ -38,12 +40,14 @@ export interface DiscoveredField {
 }
 
 export interface SSOButton {
+  id?: string;
   provider: string;
   selector: string;
   label?: string;
 }
 
 export interface MFAOption {
+  id?: string;
   type: MFAType;
   label?: string;
   target?: string;
@@ -52,16 +56,57 @@ export interface MFAOption {
 
 export interface SignInOption {
   id: string;
+  type?: ManagedAuthChoiceType;
   label: string;
   description?: string | null;
 }
 
+export interface ManagedAuthField {
+  id: string;
+  ref: string;
+  type:
+    | "identifier"
+    | "password"
+    | "code"
+    | "totp_code"
+    | "totp_secret"
+    | "text";
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  observed_selector?: string | null;
+}
+
+export type ManagedAuthChoiceType =
+  | "mfa_method"
+  | "sso_provider"
+  | "sign_in_method"
+  | "auth_method"
+  | "identifier_method"
+  | "account"
+  | "other";
+
+export interface ManagedAuthChoice {
+  id: string;
+  type: ManagedAuthChoiceType;
+  mfa_type?: MFAType | null;
+  label: string;
+  description?: string | null;
+  masked_destination?: string | null;
+  display_text?: string | null;
+  context?: string | null;
+  observed_selector?: string | null;
+}
+
 export interface ManagedAuthStateEventData {
   event: "managed_auth_state";
   timestamp: string;
   flow_status: FlowStatus;
   flow_step: FlowStep;
   flow_type?: "LOGIN" | "REAUTH";
+  interaction_id?: string;
+  fields?: ManagedAuthField[];
+  choices?: ManagedAuthChoice[];
   discovered_fields?: DiscoveredField[];
   mfa_options?: MFAOption[];
   sign_in_options?: SignInOption[];
@@ -82,6 +127,9 @@ export interface ManagedAuthResponse {
   flow_status: FlowStatus;
   flow_step: FlowStep;
   flow_type?: "LOGIN" | "REAUTH" | null;
+  interaction_id?: string | null;
+  fields?: ManagedAuthField[] | null;
+  choices?: ManagedAuthChoice[] | null;
   discovered_fields?: DiscoveredField[] | null;
   pending_sso_buttons?: SSOButton[] | null;
   mfa_options?: MFAOption[] | null;
diff --git a/packages/managed-auth-react/src/localization/defaults.ts b/packages/managed-auth-react/src/localization/defaults.ts
index 664838e..01ccebc 100644
--- a/packages/managed-auth-react/src/localization/defaults.ts
+++ b/packages/managed-auth-react/src/localization/defaults.ts
@@ -34,6 +34,8 @@ export const DEFAULT_LOCALIZATION: Localizer = {
   mfaSelectSubtitle: "Select how you'd like to receive your verification code",
   signInSelectTitle: "Choose an option",
   signInSelectSubtitle: "Select which option to continue with",
+  accountSelectTitle: "Choose an account",
+  accountSelectSubtitle: "Select which account to continue with",
   submitButton: "Continue",
   submittingButton: "Signing in...",
   ssoButtonLabel: (provider) => `Sign in with ${provider}`,
diff --git a/packages/managed-auth-react/src/localization/types.ts b/packages/managed-auth-react/src/localization/types.ts
index 01a7f3d..1c01c71 100644
--- a/packages/managed-auth-react/src/localization/types.ts
+++ b/packages/managed-auth-react/src/localization/types.ts
@@ -31,6 +31,8 @@ export interface Localization {
   mfaSelectSubtitle?: string;
   signInSelectTitle?: string;
   signInSelectSubtitle?: string;
+  accountSelectTitle?: string;
+  accountSelectSubtitle?: string;
   submitButton?: string;
   submittingButton?: string;
   ssoButtonLabel?: (provider: string) => string;
diff --git a/packages/managed-auth-react/src/session/state.test.ts b/packages/managed-auth-react/src/session/state.test.ts
new file mode 100644
index 0000000..338f3fa
--- /dev/null
+++ b/packages/managed-auth-react/src/session/state.test.ts
@@ -0,0 +1,261 @@
+import { describe, expect, test } from "bun:test";
+import type {
+  ManagedAuthResponse,
+  ManagedAuthStateEventData,
+} from "../lib/types";
+import { mergeStateEvent, normalizeManagedAuthState } from "./state";
+
+function managedAuthState(
+  overrides: Partial<ManagedAuthResponse> = {},
+): ManagedAuthResponse {
+  return {
+    id: "connection-id",
+    domain: "example.com",
+    profile_name: "profile",
+    flow_status: "IN_PROGRESS",
+    flow_step: "AWAITING_INPUT",
+    ...overrides,
+  };
+}
+
+describe("mergeStateEvent", () => {
+  test("clears awaiting-input state omitted from the next snapshot", () => {
+    const base = managedAuthState({
+      interaction_id: "mai_previous",
+      fields: [
+        {
+          id: "field_email",
+          ref: "email",
+          type: "identifier",
+          label: "Email",
+        },
+      ],
+      choices: [{ id: "google", type: "sso_provider", label: "Google" }],
+      discovered_fields: [{ name: "email", label: "Email", type: "email" }],
+      pending_sso_buttons: [
+        { provider: "google", selector: "button.google", label: "Google" },
+      ],
+      mfa_options: [{ type: "sms", label: "Text message" }],
+      sign_in_options: [{ id: "work", label: "Work account" }],
+    });
+    const event: ManagedAuthStateEventData = {
+      event: "managed_auth_state",
+      timestamp: "2026-07-28T00:00:00Z",
+      flow_status: "IN_PROGRESS",
+      flow_step: "SUBMITTING",
+    };
+
+    expect(mergeStateEvent(base, event)).toMatchObject({
+      interaction_id: null,
+      fields: null,
+      choices: null,
+      discovered_fields: null,
+      pending_sso_buttons: null,
+      mfa_options: null,
+      sign_in_options: null,
+    });
+  });
+
+  test("retains the interaction ID from an actionable state event", () => {
+    const event: ManagedAuthStateEventData = {
+      event: "managed_auth_state",
+      timestamp: "2026-07-28T00:00:00Z",
+      flow_status: "IN_PROGRESS",
+      flow_step: "AWAITING_INPUT",
+      interaction_id: "mai_current",
+      fields: [],
+      choices: [],
+    };
+
+    expect(mergeStateEvent(managedAuthState(), event)).toMatchObject({
+      interaction_id: "mai_current",
+      fields: [],
+      choices: [],
+    });
+  });
+});
+
+describe("normalizeManagedAuthState", () => {
+  test("uses legacy awaiting-input data when canonical data is absent", () => {
+    const legacy = managedAuthState({
+      discovered_fields: [{ name: "email", label: "Email", type: "email" }],
+      mfa_options: [{ type: "sms", label: "Text message" }],
+      sign_in_options: [{ id: "work", label: "Work account" }],
+    });
+
+    expect(normalizeManagedAuthState(legacy)).toMatchObject({
+      discovered_fields: legacy.discovered_fields,
+      mfa_options: legacy.mfa_options,
+      sign_in_options: legacy.sign_in_options,
+    });
+  });
+
+  test("treats canonical fields and choices as authoritative", () => {
+    const state = managedAuthState({
+      fields: [],
+      choices: [
+        {
+          id: "google",
+          type: "sso_provider",
+          label: "Continue with Google",
+          observed_selector: "button.google",
+        },
+      ],
+      discovered_fields: [
+        { name: "stale", label: "Stale field", type: "text" },
+      ],
+      mfa_options: [{ type: "sms", label: "Stale MFA" }],
+      sign_in_options: [{ id: "stale", label: "Stale account" }],
+    });
+
+    expect(normalizeManagedAuthState(state)).toMatchObject({
+      discovered_fields: null,
+      pending_sso_buttons: [
+        {
+          id: "google",
+          provider: "google",
+          selector: "button.google",
+          label: "Continue with Google",
+        },
+      ],
+      mfa_options: null,
+      sign_in_options: null,
+    });
+  });
+
+  test("preserves canonical MFA identity and the matching legacy destination", () => {
+    const state = managedAuthState({
+      choices: [
+        {
+          id: "text-ending-4821",
+          type: "mfa_method",
+          mfa_type: "sms",
+          label: "Text ending in 4821",
+          description: "Six-digit code",
+          masked_destination: "***-***-4821",
+          display_text: "Personal phone",
+          context: "Primary number",
+        },
+        {
+          id: "text-ending-9930",
+          type: "mfa_method",
+          mfa_type: "sms",
+          label: "Text ending in 9930",
+        },
+        {
+          id: "security_key_vendor",
+          type: "mfa_method",
+          label: "Security key",
+        },
+      ],
+      mfa_options: [
+        {
+          type: "sms",
+          label: "Stale first option",
+          target: "***-***-0000",
+        },
+        {
+          type: "sms",
+          label: "Text ending in 9930",
+          target: "***-***-9930",
+        },
+      ],
+    });
+
+    expect(normalizeManagedAuthState(state).mfa_options).toEqual([
+      {
+        id: "text-ending-4821",
+        type: "sms",
+        label: "Personal phone",
+        target: "***-***-4821",
+        description: "Primary number",
+      },
+      {
+        id: "text-ending-9930",
+        type: "sms",
+        label: "Text ending in 9930",
+        target: "***-***-9930",
+        description: undefined,
+      },
+      {
+        id: "security_key_vendor",
+        type: "other",
+        label: "Security key",
+        target: undefined,
+        description: undefined,
+      },
+    ]);
+  });
+
+  test("projects canonical identifier fields and non-MFA choices into the existing UI model", () => {
+    const state = managedAuthState({
+      fields: [
+        {
+          id: "field_username",
+          ref: "username",
+          type: "identifier",
+          label: "Username",
+        },
+        {
+          id: "field_email",
+          ref: "email",
+          type: "identifier",
+          label: "Email",
+        },
+        {
+          id: "field_phone",
+          ref: "phone_number",
+          type: "identifier",
+          label: "Phone",
+        },
+      ],
+      choices: [
+        {
+          id: "work-account",
+          type: "account",
+          label: "Work account",
+          description: "user@example.com",
+          display_text: "Work profile",
+          context: "user@example.com",
+        },
+      ],
+    });
+
+    expect(normalizeManagedAuthState(state)).toMatchObject({
+      discovered_fields: [
+        {
+          id: "field_username",
+          ref: "username",
+          name: "field_username",
+          type: "text",
+          label: "Username",
+          required: true,
+        },
+        {
+          id: "field_email",
+          ref: "email",
+          name: "field_email",
+          type: "email",
+          label: "Email",
+          required: true,
+        },
+        {
+          id: "field_phone",
+          ref: "phone_number",
+          name: "field_phone",
+          type: "tel",
+          label: "Phone",
+          required: true,
+        },
+      ],
+      sign_in_options: [
+        {
+          id: "work-account",
+          type: "account",
+          label: "Work profile",
+          description: "user@example.com",
+        },
+      ],
+    });
+  });
+});
diff --git a/packages/managed-auth-react/src/session/state.ts b/packages/managed-auth-react/src/session/state.ts
new file mode 100644
index 0000000..43e3501
--- /dev/null
+++ b/packages/managed-auth-react/src/session/state.ts
@@ -0,0 +1,192 @@
+import type {
+  DiscoveredField,
+  ManagedAuthChoice,
+  ManagedAuthField,
+  ManagedAuthResponse,
+  ManagedAuthStateEventData,
+  MFAOption,
+  MFAType,
+  SignInOption,
+  SSOButton,
+} from "../lib/types";
+
+export function mergeStateEvent(
+  base: ManagedAuthResponse,
+  event: ManagedAuthStateEventData,
+): ManagedAuthResponse {
+  return {
+    ...base,
+    flow_status: event.flow_status,
+    flow_step: event.flow_step,
+    flow_type: event.flow_type ?? base.flow_type ?? null,
+    interaction_id: event.interaction_id ?? null,
+    fields: event.fields ?? null,
+    choices: event.choices ?? null,
+    discovered_fields: event.discovered_fields ?? null,
+    pending_sso_buttons: event.pending_sso_buttons ?? null,
+    mfa_options: event.mfa_options ?? null,
+    sign_in_options: event.sign_in_options ?? null,
+    external_action_message: event.external_action_message ?? null,
+    website_error: event.website_error ?? null,
+    error_message: event.error_message ?? null,
+    error_code: event.error_code ?? null,
+    post_login_url: event.post_login_url ?? base.post_login_url ?? null,
+    live_view_url: event.live_view_url ?? base.live_view_url ?? null,
+    hosted_url: event.hosted_url ?? base.hosted_url ?? null,
+  };
+}
+
+function fieldTypeToDiscoveredType(
+  field: ManagedAuthField,
+): DiscoveredField["type"] {
+  switch (field.type) {
+    case "identifier": {
+      const ref = field.ref.toLowerCase();
+      if (ref.includes("email")) return "email";
+      if (ref.includes("phone") || ref.includes("tel")) return "tel";
+      return "text";
+    }
+    case "totp_code":
+      return "totp";
+    case "totp_secret":
+      return "text";
+    default:
+      return field.type;
+  }
+}
+
+function fieldsFromCanonical(
+  fields: ManagedAuthField[],
+): DiscoveredField[] | null {
+  if (!fields.length) return null;
+  return fields.map((field) => ({
+    id: field.id,
+    ref: field.ref,
+    name: field.id,
+    type: fieldTypeToDiscoveredType(field),
+    label: field.label || field.ref,
+    required: field.required ?? true,
+    hint: field.hint,
+  }));
+}
+
+function ssoButtonsFromCanonical(
+  choices: ManagedAuthChoice[],
+): SSOButton[] | null {
+  const buttons = choices
+    .filter((choice) => choice.type === "sso_provider")
+    .map((choice) => ({
+      id: choice.id,
+      provider: choice.id,
+      selector: choice.observed_selector || choice.id,
+      label: choice.label,
+    }));
+  return buttons.length ? buttons : null;
+}
+
+function normalizeMFAChoiceId(id: string): MFAType {
+  switch (id.trim().toLowerCase()) {
+    case "sms_code":
+    case "sms":
+      return "sms";
+    case "email_code":
+    case "email":
+      return "email";
+    case "totp_code":
+    case "totp":
+    case "authenticator":
+    case "authenticator_app":
+      return "totp";
+    case "phone_call":
+    case "call":
+      return "call";
+    case "push":
+      return "push";
+    case "password":
+      return "password";
+    case "passkey":
+      return "passkey";
+    case "switch":
+      return "switch";
+    default:
+      return "other";
+  }
+}
+
+function mfaTargetKey(type: MFAType, label: string | undefined) {
+  return `${type}\u0000${label ?? ""}`;
+}
+
+function legacyMFATargets(options: MFAOption[] | null | undefined) {
+  const targets = new Map<string, Array<string | undefined>>();
+  for (const option of options ?? []) {
+    const key = mfaTargetKey(option.type, option.label);
+    const existing = targets.get(key) ?? [];
+    existing.push(option.target);
+    targets.set(key, existing);
+  }
+  return targets;
+}
+
+function mfaOptionsFromCanonical(
+  choices: ManagedAuthChoice[],
+  legacyOptions: MFAOption[] | null | undefined,
+): MFAOption[] | null {
+  const targets = legacyMFATargets(legacyOptions);
+  const options = choices
+    .filter((choice) => choice.type === "mfa_method")
+    .map((choice) => {
+      const type = choice.mfa_type ?? normalizeMFAChoiceId(choice.id);
+      const target =
+        choice.masked_destination ??
+        targets.get(mfaTargetKey(type, choice.label))?.shift();
+      return {
+        id: choice.id,
+        type,
+        label: choice.display_text ?? choice.label,
+        target,
+        description: choice.context ?? choice.description ?? undefined,
+      };
+    });
+  return options.length ? options : null;
+}
+
+function signInOptionsFromCanonical(
+  choices: ManagedAuthChoice[],
+): SignInOption[] | null {
+  const options = choices
+    .filter(
+      (choice) =>
+        choice.type !== "sso_provider" && choice.type !== "mfa_method",
+    )
+    .map((choice) => ({
+      id: choice.id,
+      type: choice.type,
+      label: choice.display_text ?? choice.label,
+      description: choice.context ?? choice.description ?? null,
+    }));
+  return options.length ? options : null;
+}
+
+export function normalizeManagedAuthState(
+  state: ManagedAuthResponse,
+): ManagedAuthResponse {
+  const hasCanonicalFields = state.fields != null;
+  const hasCanonicalChoices = state.choices != null;
+
+  return {
+    ...state,
+    discovered_fields: hasCanonicalFields
+      ? fieldsFromCanonical(state.fields ?? [])
+      : state.discovered_fields,
+    pending_sso_buttons: hasCanonicalChoices
+      ? ssoButtonsFromCanonical(state.choices ?? [])
+      : state.pending_sso_buttons,
+    mfa_options: hasCanonicalChoices
+      ? mfaOptionsFromCanonical(state.choices ?? [], state.mfa_options)
+      : state.mfa_options,
+    sign_in_options: hasCanonicalChoices
+      ? signInOptionsFromCanonical(state.choices ?? [])
+      : state.sign_in_options,
+  };
+}
diff --git a/packages/managed-auth-react/src/session/submission.test.ts b/packages/managed-auth-react/src/session/submission.test.ts
new file mode 100644
index 0000000..cf00b08
--- /dev/null
+++ b/packages/managed-auth-react/src/session/submission.test.ts
@@ -0,0 +1,101 @@
+import { describe, expect, test } from "bun:test";
+import type { ManagedAuthResponse } from "../lib/types";
+import {
+  buildFieldSubmission,
+  buildMFASubmission,
+  buildSignInSubmission,
+  buildSSOSubmission,
+} from "./submission";
+
+function managedAuthState(
+  overrides: Partial<ManagedAuthResponse> = {},
+): ManagedAuthResponse {
+  return {
+    id: "connection-id",
+    domain: "example.com",
+    profile_name: "profile",
+    flow_status: "IN_PROGRESS",
+    flow_step: "AWAITING_INPUT",
+    ...overrides,
+  };
+}
+
+function canonicalState(
+  overrides: Partial<ManagedAuthResponse> = {},
+): ManagedAuthResponse {
+  return managedAuthState({
+    interaction_id: "mai_current",
+    fields: [],
+    choices: [],
+    ...overrides,
+  });
+}
+
+describe("managed auth submissions", () => {
+  test("submits fields through the contract that produced the UI", () => {
+    const values = { field_email: "user@example.com" };
+
+    expect(buildFieldSubmission(canonicalState(), values)).toEqual({
+      interaction_id: "mai_current",
+      field_values: values,
+    });
+    expect(buildFieldSubmission(managedAuthState(), values)).toEqual({
+      fields: values,
+    });
+  });
+
+  test("submits canonical and legacy SSO choices without mixing contracts", () => {
+    const button = {
+      id: "google",
+      provider: "google",
+      selector: "button.google",
+    };
+    expect(buildSSOSubmission(canonicalState(), button)).toEqual({
+      interaction_id: "mai_current",
+      selected_choice_id: "google",
+    });
+    expect(buildSSOSubmission(managedAuthState(), button)).toEqual({
+      fields: {},
+      sso_button_selector: "button.google",
+    });
+  });
+
+  test("preserves canonical MFA choice IDs instead of submitting normalized types", () => {
+    expect(
+      buildMFASubmission(canonicalState(), "other", "security_key_vendor"),
+    ).toEqual({
+      interaction_id: "mai_current",
+      selected_choice_id: "security_key_vendor",
+    });
+    expect(buildMFASubmission(managedAuthState(), "sms")).toEqual({
+      fields: {},
+      mfa_option_id: "sms",
+    });
+  });
+
+  test("submits sign-in choices through the contract that produced them", () => {
+    expect(buildSignInSubmission(canonicalState(), "work-account")).toEqual({
+      interaction_id: "mai_current",
+      selected_choice_id: "work-account",
+    });
+    expect(buildSignInSubmission(managedAuthState(), "work-account")).toEqual({
+      fields: {},
+      sign_in_option_id: "work-account",
+    });
+  });
+
+  test("rejects incomplete canonical state instead of falling back to legacy", () => {
+    const state = managedAuthState({ fields: [], choices: [] });
+    expect(() => buildFieldSubmission(state, {})).toThrow("interaction_id");
+    expect(() =>
+      buildSSOSubmission(state, {
+        id: "google",
+        provider: "google",
+        selector: "button.google",
+      }),
+    ).toThrow("interaction_id");
+    expect(() => buildMFASubmission(canonicalState(), "sms")).toThrow(
+      "missing an id",
+    );
+  });
+});
diff --git a/packages/managed-auth-react/src/session/submission.ts b/packages/managed-auth-react/src/session/submission.ts
new file mode 100644
index 0000000..4ed48d7
--- /dev/null
+++ b/packages/managed-auth-react/src/session/submission.ts
@@ -0,0 +1,62 @@
+import type { ManagedAuthSubmitBody } from "../lib/api";
+import type { ManagedAuthResponse, MFAType, SSOButton } from "../lib/types";
+
+function interactionId(state: ManagedAuthResponse | null): string {
+  if (!state?.interaction_id) {
+    throw new Error("Canonical managed auth state is missing interaction_id");
+  }
+  return state.interaction_id;
+}
+
+function canonicalChoiceId(id: string | undefined): string {
+  if (!id) {
+    throw new Error("Canonical managed auth choice is missing an id");
+  }
+  return id;
+}
+
+export function buildFieldSubmission(
+  state: ManagedAuthResponse | null,
+  values: Record<string, string>,
+): ManagedAuthSubmitBody {
+  return state?.fields != null
+    ? { interaction_id: interactionId(state), field_values: values }
+    : { fields: values };
+}
+
+export function buildSSOSubmission(
+  state: ManagedAuthResponse | null,
+  button: SSOButton,
+): ManagedAuthSubmitBody {
+  return state?.choices != null
+    ? {
+        interaction_id: interactionId(state),
+        selected_choice_id: canonicalChoiceId(button.id),
+      }
+    : { fields: {}, sso_button_selector: button.selector };
+}
+
+export function buildMFASubmission(
+  state: ManagedAuthResponse | null,
+  type: MFAType,
+  choiceId?: string,
+): ManagedAuthSubmitBody {
+  return state?.choices != null
+    ? {
+        interaction_id: interactionId(state),
+        selected_choice_id: canonicalChoiceId(choiceId),
+      }
+    : { fields: {}, mfa_option_id: type };
+}
+
+export function buildSignInSubmission(
+  state: ManagedAuthResponse | null,
+  optionId: string,
+): ManagedAuthSubmitBody {
+  return state?.choices != null
+    ? {
+        interaction_id: interactionId(state),
+        selected_choice_id: optionId,
+      }
+    : { fields: {}, sign_in_option_id: optionId };
+}
diff --git a/packages/managed-auth-react/src/session/useManagedAuthSession.test.ts b/packages/managed-auth-react/src/session/useManagedAuthSession.test.ts
new file mode 100644
index 0000000..a5821de
--- /dev/null
+++ b/packages/managed-auth-react/src/session/useManagedAuthSession.test.ts
@@ -0,0 +1,204 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { createElement } from "react";
+import { act, create, type ReactTestRenderer } from "react-test-renderer";
+import type { ManagedAuthResponse } from "../lib/types";
+import {
+  useManagedAuthSession,
+  type ManagedAuthSessionValue,
+} from "./useManagedAuthSession";
+
+function response(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+function awaitingInputState(): ManagedAuthResponse {
+  return {
+    id: "session-id",
+    domain: "example.com",
+    profile_name: "profile",
+    flow_status: "IN_PROGRESS",
+    flow_step: "AWAITING_INPUT",
+    interaction_id: "interaction-id",
+    fields: [
+      {
+        id: "email-field",
+        ref: "email",
+        type: "identifier",
+        label: "Email",
+      },
+    ],
+    choices: [],
+  };
+}
+
+function deferred<T>(): {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+} {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+
+async function flushPromises(): Promise<void> {
+  await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+let renderer: ReactTestRenderer | null = null;
+
+afterEach(() => {
+  if (renderer) {
+    act(() => renderer?.unmount());
+    renderer = null;
+  }
+});
+
+async function renderSession(
+  refreshResponse: Promise<Response>,
+  onError?: (message: string) => void,
+  submitResponse = Promise.resolve(
+    response(
+      { code: "stale_interaction", message: "Interaction is stale" },
+      400,
+    ),
+  ),
+) {
+  let retrieveRequests = 0;
+  let streamRequests = 0;
+  let value: ManagedAuthSessionValue | null = null;
+  const sessionRetrieveRequests = new Map<string, number>();
+
+  const fetchImpl = (async (
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<Response> => {
+    const url = String(input);
+    if (url.endsWith("/exchange")) return response({ jwt: "jwt" });
+    if (url.endsWith("/events")) {
+      streamRequests++;
+      return new Promise<Response>(() => {});
+    }
+    if (url.endsWith("/submit")) return submitResponse;
+    if (init?.method === "GET") {
+      retrieveRequests++;
+      const sessionId = url.split("/auth/connections/")[1]?.split("/")[0];
+      if (!sessionId) throw new Error(`Missing session ID in ${url}`);
+      const count = (sessionRetrieveRequests.get(sessionId) ?? 0) + 1;
+      sessionRetrieveRequests.set(sessionId, count);
+      if (count === 1) return response(awaitingInputState());
+      return refreshResponse;
+    }
+    throw new Error(`Unexpected request: ${init?.method} ${url}`);
+  }) as typeof fetch;
+
+  function Harness(props: { sessionId: string; handoffCode: string }) {
+    value = useManagedAuthSession({
+      sessionId: props.sessionId,
+      handoffCode: props.handoffCode,
+      autoStart: true,
+      fetch: fetchImpl,
+      onError: onError ? ({ message }) => onError(message) : undefined,
+    });
+    return null;
+  }
+
+  await act(async () => {
+    renderer = create(
+      createElement(Harness, {
+        sessionId: "session-id",
+        handoffCode: "handoff-code",
+      }),
+    );
+    await flushPromises();
+  });
+
+  return {
+    get value() {
+      if (!value) throw new Error("Session hook did not render");
+      return value;
+    },
+    get retrieveRequests() {
+      return retrieveRequests;
+    },
+    get streamRequests() {
+      return streamRequests;
+    },
+    async updateSession(sessionId: string, handoffCode: string) {
+      await act(async () => {
+        renderer?.update(createElement(Harness, { sessionId, handoffCode }));
+        await flushPromises();
+      });
+    },
+  };
+}
+
+describe("useManagedAuthSession stale interaction recovery", () => {
+  test("does not reconnect after the session is unmounted", async () => {
+    const refresh = deferred<Response>();
+    const session = await renderSession(refresh.promise);
+    expect(session.streamRequests).toBe(1);
+
+    let submission!: Promise<void>;
+    await act(async () => {
+      submission = session.value.submitFields({ email: "person@example.com" });
+      await flushPromises();
+    });
+    expect(session.retrieveRequests).toBe(2);
+
+    act(() => renderer?.unmount());
+    renderer = null;
+    refresh.resolve(response(awaitingInputState()));
+    await act(async () => submission);
+
+    expect(session.streamRequests).toBe(1);
+  });
+
+  test("clears the submitting state when the session changes", async () => {
+    const pendingSubmit = deferred<Response>();
+    const session = await renderSession(
+      Promise.resolve(response(awaitingInputState())),
+      undefined,
+      pendingSubmit.promise,
+    );
+
+    let submission!: Promise<void>;
+    act(() => {
+      submission = session.value.submitFields({ email: "person@example.com" });
+    });
+    expect(session.value.isSubmitting).toBe(true);
+
+    await session.updateSession("next-session-id", "next-handoff-code");
+    expect(session.value.isSubmitting).toBe(false);
+
+    pendingSubmit.resolve(response({}, 202));
+    await act(async () => submission);
+    expect(session.value.isSubmitting).toBe(false);
+  });
+
+  test.each([401, 410])(
+    "expires the session when the stale refresh returns %i",
+    async (status) => {
+      const errors: string[] = [];
+      const session = await renderSession(
+        Promise.resolve(response({ message: "Session expired" }, status)),
+        (message) => errors.push(message),
+      );
+
+      await act(async () => {
+        await session.value.submitFields({ email: "person@example.com" });
+      });
+
+      expect(session.value.uiState).toBe("expired");
+      expect(session.value.isSubmitting).toBe(false);
+      expect(errors).toEqual(["Session expired"]);
+      expect(session.streamRequests).toBe(1);
+    },
+  );
+});
diff --git a/packages/managed-auth-react/src/session/useManagedAuthSession.ts b/packages/managed-auth-react/src/session/useManagedAuthSession.ts
index 1e817c7..a6cc575 100644
--- a/packages/managed-auth-react/src/session/useManagedAuthSession.ts
+++ b/packages/managed-auth-react/src/session/useManagedAuthSession.ts
@@ -4,10 +4,7 @@ import {
   ManagedAuthApiError,
   retrieveManagedAuth,
   streamManagedAuthEvents,
-  submitFieldValues,
-  submitMFASelection,
-  submitSignInOption,
-  submitSSOButton,
+  submitManagedAuth,
   type ApiClientOptions,
   type ManagedAuthStateEventData,
 } from "../lib/api";
@@ -19,6 +16,13 @@ import type {
   SSOButton,
   UIState,
 } from "../lib/types";
+import { mergeStateEvent, normalizeManagedAuthState } from "./state";
+import {
+  buildFieldSubmission,
+  buildMFASubmission,
+  buildSignInSubmission,
+  buildSSOSubmission,
+} from "./submission";
 
 const RECONNECT_BASE_MS = 1000;
 const RECONNECT_MAX_MS = 15000;
@@ -48,29 +52,6 @@ function isTerminal(uiState: UIState): boolean {
   return uiState === "success" || uiState === "expired" || uiState === "error";
 }
 
-function mergeStateEvent(
-  base: ManagedAuthResponse,
-  ev: ManagedAuthStateEventData,
-): ManagedAuthResponse {
-  return {
-    ...base,
-    flow_status: ev.flow_status,
-    flow_step: ev.flow_step,
-    flow_type: ev.flow_type ?? base.flow_type ?? null,
-    discovered_fields: ev.discovered_fields ?? null,
-    pending_sso_buttons: ev.pending_sso_buttons ?? null,
-    mfa_options: ev.mfa_options ?? null,
-    sign_in_options: ev.sign_in_options ?? null,
-    external_action_message: ev.external_action_message ?? null,
-    website_error: ev.website_error ?? null,
-    error_message: ev.error_message ?? null,
-    error_code: ev.error_code ?? null,
-    post_login_url: ev.post_login_url ?? base.post_login_url ?? null,
-    live_view_url: ev.live_view_url ?? base.live_view_url ?? null,
-    hosted_url: ev.hosted_url ?? base.hosted_url ?? null,
-  };
-}
-
 export interface ManagedAuthSessionOptions extends ApiClientOptions {
   sessionId: string;
   handoffCode: string;
@@ -90,7 +71,7 @@ export interface ManagedAuthSessionValue {
   startFlow: () => void;
   submitFields: (credentials: Record<string, string>) => Promise<void>;
   submitSSO: (button: SSOButton) => Promise<void>;
-  submitMFA: (mfaType: MFAType) => Promise<void>;
+  submitMFA: (mfaType: MFAType, choiceId?: string) => Promise<void>;
   submitSignIn: (optionId: string) => Promise<void>;
 }
 
@@ -167,7 +148,7 @@ export function useManagedAuthSession(
         setSubmitError(null);
         const base = stateRef.current;
         if (!base) return;
-        const merged = mergeStateEvent(base, ev);
+        const merged = normalizeManagedAuthState(mergeStateEvent(base, ev));
         stateRef.current = merged;
         setState(merged);
         const nextUI = deriveUIState(merged);
@@ -214,7 +195,9 @@ export function useManagedAuthSession(
         const gen = generationRef.current;
         if (terminalRef.current) return;
         try {
-          const fresh = await retrieveManagedAuth(sessionId, t, options);
+          const fresh = normalizeManagedAuthState(
+            await retrieveManagedAuth(sessionId, t, options),
+          );
           if (gen !== generationRef.current) return;
           if (terminalRef.current) return;
           stateRef.current = fresh;
@@ -325,6 +308,7 @@ export function useManagedAuthSession(
     terminalRef.current = false;
     reconnectAttemptsRef.current = 0;
     callbackFiredRef.current = { success: false, error: false };
+    setIsSubmitting(false);
 
     const ref = { key: exchangeKey, active: true };
     exchangeRef.current = ref;
@@ -338,7 +322,9 @@ export function useManagedAuthSession(
         );
         if (exchangeRef.current !== ref || !ref.active) return;
         setJwt(token);
-        const initial = await retrieveManagedAuth(sessionId, token, options);
+        const initial = normalizeManagedAuthState(
+          await retrieveManagedAuth(sessionId, token, options),
+        );
         if (exchangeRef.current !== ref || !ref.active) return;
         stateRef.current = initial;
         setState(initial);
@@ -389,29 +375,101 @@ export function useManagedAuthSession(
   const submit = useCallback(
     async (fn: () => Promise<void>, onFail: string) => {
       if (!jwt) return;
+      const generation = generationRef.current;
+      const isActive = () =>
+        generation === generationRef.current &&
+        exchangeRef.current?.active === true;
+
       setIsSubmitting(true);
       setSubmitError(null);
       setUIState("submitting");
       try {
         await fn();
       } catch (err) {
+        if (!isActive()) return;
         const msg = err instanceof Error ? err.message : onFail;
+        if (
+          err instanceof ManagedAuthApiError &&
+          err.code === "stale_interaction"
+        ) {
+          try {
+            disconnectStream();
+            const fresh = normalizeManagedAuthState(
+              await retrieveManagedAuth(sessionId, jwt, options),
+            );
+            if (!isActive()) return;
+            stateRef.current = fresh;
+            setState(fresh);
+            const nextUI = deriveUIState(fresh);
+            setUIState(nextUI);
+            setSubmitError(msg);
+            if (isTerminal(nextUI)) {
+              terminalRef.current = true;
+              if (nextUI === "success") {
+                fireSuccessOnce({
+                  profileName: fresh.profile_name,
+                  domain: fresh.domain,
+                });
+              } else {
+                fireErrorOnce({
+                  code: fresh.error_code ?? undefined,
+                  message:
+                    fresh.error_message ||
+                    fresh.website_error ||
+                    (nextUI === "expired" ? "Session expired" : "Login failed"),
+                });
+              }
+              disconnectStream();
+            } else {
+              connectStream(jwt);
+            }
+            return;
+          } catch (refreshError) {
+            if (!isActive()) return;
+            const status =
+              refreshError instanceof ManagedAuthApiError
+                ? refreshError.status
+                : undefined;
+            if (status === 401 || status === 410) {
+              terminalRef.current = true;
+              setIsReconnecting(false);
+              setUIState("expired");
+              fireErrorOnce({ message: "Session expired" });
+              return;
+            }
+            connectStream(jwt);
+          }
+        }
         setSubmitError(msg);
         setUIState((current) =>
           isTerminal(current) ? current : "awaiting_input",
         );
       } finally {
-        setIsSubmitting(false);
+        if (isActive()) setIsSubmitting(false);
       }
     },
-    [jwt],
+    [
+      jwt,
+      sessionId,
+      options,
+      fireSuccessOnce,
+      fireErrorOnce,
+      disconnectStream,
+      connectStream,
+    ],
   );
 
   const submitFields = useCallback(
     async (credentials: Record<string, string>) => {
       if (!jwt) return;
       return submit(
-        () => submitFieldValues(sessionId, jwt, credentials, options),
+        () =>
+          submitManagedAuth(
+            sessionId,
+            jwt,
+            buildFieldSubmission(stateRef.current, credentials),
+            options,
+          ),
         "Failed to submit credentials",
       );
     },
@@ -422,7 +480,13 @@ export function useManagedAuthSession(
     async (button: SSOButton) => {
       if (!jwt) return;
       return submit(
-        () => submitSSOButton(sessionId, jwt, button.selector, options),
+        () =>
+          submitManagedAuth(
+            sessionId,
+            jwt,
+            buildSSOSubmission(stateRef.current, button),
+            options,
+          ),
         "Failed to initiate SSO login",
       );
     },
@@ -430,10 +494,16 @@ export function useManagedAuthSession(
   );
 
   const submitMFA = useCallback(
-    async (mfaType: MFAType) => {
+    async (mfaType: MFAType, choiceId?: string) => {
       if (!jwt) return;
       return submit(
-        () => submitMFASelection(sessionId, jwt, mfaType, options),
+        () =>
+          submitManagedAuth(
+            sessionId,
+            jwt,
+            buildMFASubmission(stateRef.current, mfaType, choiceId),
+            options,
+          ),
         "Failed to select verification method",
       );
     },
@@ -444,7 +514,13 @@ export function useManagedAuthSession(
     async (optionId: string) => {
       if (!jwt) return;
       return submit(
-        () => submitSignInOption(sessionId, jwt, optionId, options),
+        () =>
+          submitManagedAuth(
+            sessionId,
+            jwt,
+            buildSignInSubmission(stateRef.current, optionId),
+            options,
+          ),
         "Failed to select option",
       );
     },