From 021f79cfb653de693dbbabae4deb5b43d338dd94 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Fri, 10 Jan 2025 17:30:36 +0100
Subject: [PATCH 01/31] HRD in Console WIP

---
 packages/react/package.json                   |   2 +-
 .../form/org-switching/org-switching-flow.ts  | 471 ++++++++++++++++++
 .../form/org-switching/org-switching-form.tsx | 129 +++++
 .../org-switching/useOrgSwitchingContext.ts   |   8 +
 .../org-switching/useOrgSwitchingFlowState.ts |  43 ++
 .../react/src/context/slash-id-context.tsx    |  32 +-
 packages/react/src/dev.tsx                    |  60 ++-
 pnpm-lock.yaml                                |  22 +-
 8 files changed, 733 insertions(+), 34 deletions(-)
 create mode 100644 packages/react/src/components/form/org-switching/org-switching-flow.ts
 create mode 100644 packages/react/src/components/form/org-switching/org-switching-form.tsx
 create mode 100644 packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts
 create mode 100644 packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts

diff --git a/packages/react/package.json b/packages/react/package.json
index ec3d2493..04e365c6 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
-    "@slashid/slashid": "3.28.0",
+    "@slashid/slashid": "3.28.1-hrd-console.0",
     "@storybook/addon-essentials": "7.6.19",
     "@storybook/addon-interactions": "7.4.0",
     "@storybook/addon-links": "7.4.0",
diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/org-switching/org-switching-flow.ts
new file mode 100644
index 00000000..ba9bc19e
--- /dev/null
+++ b/packages/react/src/components/form/org-switching/org-switching-flow.ts
@@ -0,0 +1,471 @@
+import { Utils, Errors, User, ReachablePersonHandle } from "@slashid/slashid";
+import {
+  Cancel,
+  LogIn,
+  LoginConfiguration,
+  Retry,
+  MFA,
+  LoginOptions,
+  Recover,
+  RetryPolicy,
+} from "../../../domain/types";
+import { ensureError } from "../../../domain/errors";
+import { isFactorRecoverable } from "../../../domain/handles";
+import { StoreRecoveryCodesState } from "../store-recovery-codes";
+
+export type AuthnContext = {
+  config: LoginConfiguration;
+  options?: LoginOptions;
+  attempt: number;
+};
+export interface InitialState {
+  status: "initial";
+  logIn: (config: LoginConfiguration, options?: LoginOptions) => void;
+}
+
+export interface AuthenticatingState {
+  status: "authenticating";
+  context: AuthnContext;
+  retry: Retry;
+  cancel: Cancel;
+  updateContext: (context: AuthnContext) => void;
+  recover: () => void;
+  logIn: () => void;
+  setRecoveryCodes: (codes: string[]) => void;
+}
+
+export interface SuccessState {
+  status: "success";
+}
+
+export interface ErrorState {
+  status: "error";
+  context: AuthenticatingState["context"] & {
+    error: Error;
+  };
+  retry: Retry;
+  cancel: Cancel;
+}
+
+interface LoginEvent {
+  type: "sid_login";
+  config: LoginConfiguration;
+  options?: LoginOptions;
+}
+
+interface UpdateAuthnContextEvent {
+  type: "sid_login.update_context";
+  context: AuthnContext;
+}
+
+interface LoginSuccessEvent {
+  type: "sid_login.success";
+  user: User;
+}
+
+interface LoginErrorEvent {
+  type: "sid_login.error";
+  error: Error;
+}
+
+interface CancelEvent {
+  type: "sid_cancel";
+}
+
+interface RetryEvent {
+  type: "sid_retry";
+  context: AuthenticatingState["context"];
+  policy: RetryPolicy;
+}
+
+interface InitEvent {
+  type: "sid_init";
+}
+
+interface StoreRecoveryCodesEvent {
+  type: "sid_storeRecoveryCodes";
+  user: User;
+}
+
+type Event =
+  | InitEvent
+  | LoginEvent
+  | UpdateAuthnContextEvent
+  | LoginSuccessEvent
+  | LoginErrorEvent
+  | RetryEvent
+  | CancelEvent
+  | StoreRecoveryCodesEvent;
+
+type FlowActions = {
+  // a function that will be called when the state is entered
+  entry?: () => void;
+};
+
+export type FlowState = FlowActions &
+  (
+    | InitialState
+    | AuthenticatingState
+    | SuccessState
+    | ErrorState
+    | StoreRecoveryCodesState
+  );
+
+type Observer = (state: FlowState, event: Event) => void;
+type Send = (e: Event) => void;
+
+const createInitialState = (send: Send): InitialState => {
+  return {
+    status: "initial",
+    logIn: (config, options) => {
+      send({ type: "sid_login", config, options });
+    },
+  };
+};
+
+const createAuthenticatingState = (
+  send: Send,
+  context: AuthenticatingState["context"],
+  logInFn: LogIn | MFA,
+  recoverFn: Recover,
+  setRecoveryCodes: (codes: string[]) => void
+): AuthenticatingState => {
+  function performLogin() {
+    return logInFn(context.config, context.options)
+      .then((user) => {
+        if (!user) {
+          send({
+            type: "sid_login.error",
+            error: new Error("User not returned from /id"),
+          });
+          return;
+        }
+
+        if (context.config.factor.method === "totp") {
+          send({
+            type: "sid_storeRecoveryCodes",
+            user,
+          });
+          return;
+        }
+        send({ type: "sid_login.success", user });
+      })
+      .catch((error) => {
+        if (Errors.isFlowCancelledError(error)) {
+          return;
+        }
+        send({ type: "sid_login.error", error });
+      });
+  }
+
+  async function recover() {
+    if (
+      !context.config.handle?.type ||
+      !Utils.isReachablePersonHandleType(context.config.handle.type)
+    ) {
+      send({
+        type: "sid_login.error",
+        error: Errors.createSlashIDError({
+          name: Errors.ERROR_NAMES.recoverNonReachableHandleType,
+          message: "Recovery requires a reachable handle type.",
+          context,
+        }),
+      });
+      return;
+    }
+
+    // not possible at the moment
+    if (!isFactorRecoverable(context.config.factor)) return;
+
+    try {
+      return await recoverFn({
+        factor: context.config.factor,
+        handle: context.config.handle as ReachablePersonHandle,
+      });
+
+      // recover does not authenticate on its own
+      // we still need to wait for login to complete
+    } catch (error) {
+      send({ type: "sid_login.error", error: ensureError(error) });
+    }
+  }
+
+  return {
+    status: "authenticating",
+    context: {
+      attempt: context.attempt,
+      config: context.config,
+      options: context.options,
+    },
+    retry: (policy = "retry") => {
+      send({ type: "sid_retry", context, policy });
+    },
+    recover,
+    cancel: () => {
+      // Cancellation API needs to be exposed from the core SDK
+      send({ type: "sid_cancel" });
+    },
+    logIn: performLogin,
+    setRecoveryCodes,
+    updateContext: (newContext: AuthnContext) => {
+      send({
+        type: "sid_login.update_context",
+        context: newContext,
+      });
+    },
+  };
+};
+
+const createSuccessState = (): SuccessState => {
+  return {
+    status: "success",
+  };
+};
+
+const createErrorState = (
+  send: Send,
+  context: ErrorState["context"]
+): ErrorState => {
+  return {
+    status: "error",
+    context,
+    retry: (policy = "retry") => {
+      send({ type: "sid_retry", context, policy });
+    },
+    cancel: () => {
+      send({ type: "sid_cancel" });
+    },
+  };
+};
+
+const createStoreRecoveryCodesState = (
+  send: Send,
+  recoveryCodes: string[],
+  user: User
+): StoreRecoveryCodesState => {
+  return {
+    status: "storeRecoveryCodes",
+    context: {
+      recoveryCodes,
+    },
+    confirm: () => {
+      send({ type: "sid_login.success", user });
+    },
+  };
+};
+
+export type CreateFlowOptions = {
+  onSuccess?: (user: User) => void;
+  onError?: (error: Error, context: ErrorState["context"]) => void;
+};
+
+type HistoryEntry = {
+  state: FlowState;
+  event: Event;
+};
+
+/**
+ * Flow API factory function.
+ *
+ * Responsible for creating the flow state machine and providing the flow API.
+ * Internally it delegates event processing to the underlying state instances.
+ *
+ * When a transition is requested, this function will create a new state instance and notify subscribers.
+ * It will not do any checks to see if the transition is valid as it is the responsibility of the state instances.
+ *
+ * The Flow API is not symetric - external code can interact with it using the fields and methods of the state object.
+ * Internally the state object communicates with the flow using the send function, emitting events and letting the flow API orchestrate the state transitions.
+ *
+ * @param opts
+ * @returns
+ */
+export function createFlow(opts: CreateFlowOptions = {}) {
+  let logInFn: undefined | LogIn | MFA = undefined;
+  let recoverFn: undefined | Recover = undefined;
+  let cancelFn: undefined | Cancel = undefined;
+  let recoveryCodes: undefined | string[] = undefined;
+  let observers: Observer[] = [];
+  const send = (event: Event) => {
+    transition(event);
+  };
+
+  const setRecoveryCodes = (codes: string[]) => {
+    recoveryCodes = codes;
+  };
+
+  function setState(newState: FlowState, changeEvent: Event) {
+    state = newState;
+
+    // keep a history of state transitions for debugging purposes
+    history.push({ state, event: changeEvent });
+
+    observers.forEach((o) => o(state, changeEvent));
+  }
+
+  let state: FlowState = createAuthenticatingState(
+    send,
+    {
+      config: {
+        factor: {
+          method: "email_link",
+        },
+      },
+      attempt: 0,
+    },
+    logInFn!,
+    recoverFn!,
+    setRecoveryCodes
+  );
+
+  // each history entry contains a state and the event that triggered the transition to that state
+  const history: HistoryEntry[] = [{ state, event: { type: "sid_init" } }];
+
+  const { onSuccess, onError } = opts;
+
+  // notify subscribers every time the state changes
+
+  async function transition(e: Event) {
+    switch (e.type) {
+      // case "sid_login":
+      //   // TODO replace with a check for ready state
+      //   if (!logInFn || !recoverFn) break;
+
+      //   const loginContext: AuthenticatingState["context"] = {
+      //     config: e.config,
+      //     options: e.options,
+      //     attempt: 1,
+      //   };
+
+      //   setState(
+      //     createAuthenticatingState(
+      //       send,
+      //       loginContext,
+      //       logInFn,
+      //       recoverFn,
+      //       setRecoveryCodes
+      //     ),
+      //     e
+      //   );
+      //   break;
+      case "sid_storeRecoveryCodes":
+        // recovery codes are only stored on register authenticator
+        if (!recoveryCodes) {
+          send({ type: "sid_login.success", user: e.user });
+          break;
+        }
+
+        setState(
+          createStoreRecoveryCodesState(send, recoveryCodes!, e.user),
+          e
+        );
+        break;
+      case "sid_login.update_context":
+        // TODO replace with a check for ready state
+        if (!logInFn || !recoverFn) break;
+
+        const updatedContext: AuthnContext = {
+          config: e.context.config,
+          options: e.context.options,
+          attempt: e.context.attempt,
+        };
+
+        setState(
+          createAuthenticatingState(
+            send,
+            updatedContext,
+            logInFn,
+            recoverFn,
+            setRecoveryCodes
+          ),
+          e
+        );
+        break;
+      case "sid_login.success":
+        // call onSuccess if present
+        if (typeof onSuccess === "function") {
+          onSuccess(e.user);
+        }
+
+        setState(createSuccessState(), e);
+        break;
+      case "sid_login.error":
+        if (state.status !== "authenticating") break;
+
+        const errorContext: ErrorState["context"] = {
+          ...state.context,
+          error: ensureError(e.error),
+        };
+
+        // call onError if present
+        if (typeof onError === "function") {
+          onError(e.error, errorContext);
+        }
+
+        setState(createErrorState(send, errorContext), e);
+        break;
+      case "sid_retry":
+        // TODO replace with a check for ready state
+        if (!logInFn || !recoverFn) break;
+
+        if (typeof cancelFn === "function") {
+          cancelFn();
+        }
+
+        const retryContext: AuthenticatingState["context"] = {
+          config: e.context.config,
+          options: e.context.options,
+          attempt: e.context.attempt + 1,
+        };
+
+        if (e.policy === "reset") {
+          setState(createInitialState(send), e);
+          break;
+        }
+
+        setState(
+          createAuthenticatingState(
+            send,
+            retryContext,
+            logInFn,
+            recoverFn,
+            setRecoveryCodes
+          ),
+          e
+        );
+        break;
+      case "sid_cancel":
+        if (typeof cancelFn === "function") {
+          cancelFn();
+        }
+
+        // setState(createInitialState(send), e);
+        break;
+      default:
+        break;
+    }
+  }
+
+  // provide the flow API - interact with the flow using the state object, subscribe and unsubscribe to state changes
+  return {
+    history,
+    unsubscribe: (observer: Observer) => {
+      observers = observers.filter((ob) => ob === observer);
+    },
+    subscribe: (observer: Observer) => {
+      observers.push(observer);
+    },
+    // SDK is instantiated asynchronously, so we need to set the logIn and recover functions when it is ready
+    setLogIn: (fn: LogIn | MFA) => {
+      logInFn = fn;
+    },
+    setRecover: (fn: Recover) => {
+      recoverFn = fn;
+    },
+    setCancel: (fn: Cancel) => {
+      cancelFn = fn;
+    },
+    state,
+  };
+}
+
+export type Flow = ReturnType<typeof createFlow>;
diff --git a/packages/react/src/components/form/org-switching/org-switching-form.tsx b/packages/react/src/components/form/org-switching/org-switching-form.tsx
new file mode 100644
index 00000000..29de42f8
--- /dev/null
+++ b/packages/react/src/components/form/org-switching/org-switching-form.tsx
@@ -0,0 +1,129 @@
+import { clsx } from "clsx";
+import { useFlowState } from "../useFlowState";
+import { CreateFlowOptions } from "./org-switching-flow";
+// import { Initial } from "./initial";
+import { Authenticating } from "../authenticating";
+import { Error } from "../error";
+import { Success } from "../success";
+import { Footer } from "../footer";
+import { useConfiguration } from "../../../hooks/use-configuration";
+import { FormProvider } from "../../../context/form-context";
+import { useLastHandle } from "../../../hooks/use-last-handle";
+import {
+  ConfigurationOverrides,
+  ConfigurationOverridesProps,
+} from "../../configuration-overrides";
+import { Handle, LoginOptions } from "../../../domain/types";
+import React, { useCallback } from "react";
+import { Slots, useSlots } from "../../slot";
+import { Factor } from "@slashid/slashid";
+import { PayloadOptions } from "../types";
+import { InternalFormContext } from "../internal-context";
+import { StoreRecoveryCodes } from "../store-recovery-codes";
+import { useLastFactor } from "../../../hooks/use-last-factor";
+import { Card } from "@slashid/react-primitives";
+
+export type Props = ConfigurationOverridesProps & {
+  className?: string;
+  onSuccess?: CreateFlowOptions["onSuccess"];
+  onError?: CreateFlowOptions["onError"];
+  middleware?: LoginOptions["middleware"];
+  children?: Slots<
+    "initial" | "authenticating" | "success" | "error" | "footer"
+  >; // TS does not enforce this, but it is used for documentation
+};
+
+/**
+ * Render a form that can be used to sign in or sign up a user.
+ * The form can be customized significantly using the built-in slots and CSS custom properties.
+ * Check the documentation for more information.
+ */
+export const Form = ({
+  className,
+  onSuccess,
+  onError,
+  factors,
+  text,
+  middleware,
+  children,
+}: Props) => {
+  const flowState = useFlowState({ onSuccess, onError });
+  const { showBanner } = useConfiguration();
+  const { lastHandle } = useLastHandle();
+  const { lastFactor } = useLastFactor();
+  const submitPayloadRef = React.useRef<PayloadOptions>({
+    handleType: undefined,
+    handleValue: undefined,
+    flag: undefined,
+  });
+  const [selectedFactor, setSelectedFactor] = React.useState<
+    Factor | undefined
+  >();
+  const { status } = flowState;
+
+  const defaultSlots = React.useMemo(() => {
+    const slots = {
+      footer: showBanner ? <Footer /> : null,
+      // initial: status === "initial" ? <Initial /> : undefined,
+      authenticating:
+        status === "authenticating" ? <Authenticating /> : undefined,
+      success:
+        status === "success" ? <Success flowState={flowState} /> : undefined,
+      error: status === "error" ? <Error /> : undefined,
+    };
+
+    return slots;
+  }, [status, showBanner, flowState]);
+
+  const slots = useSlots({ children, defaultSlots });
+
+  const handleSubmit = useCallback(
+    (factor: Factor, handle?: Handle) => {
+      if (flowState.status !== "initial") return;
+
+      flowState.logIn(
+        {
+          factor,
+          handle,
+        },
+        { middleware }
+      );
+    },
+    [flowState, middleware]
+  );
+
+  return (
+    <InternalFormContext.Provider
+      value={{
+        flowState,
+        lastHandle,
+        lastFactor,
+        handleSubmit,
+        submitPayloadRef,
+        selectedFactor,
+        setSelectedFactor,
+      }}
+    >
+      <Card className={clsx("sid-form", className)}>
+        <ConfigurationOverrides text={text} factors={factors}>
+          {flowState.status === "initial" && (
+            <FormProvider>{slots.initial}</FormProvider>
+          )}
+          {flowState.status === "authenticating" && (
+            <FormProvider>{slots.authenticating}</FormProvider>
+          )}
+          {flowState.status === "storeRecoveryCodes" && (
+            <StoreRecoveryCodes flowState={flowState} />
+          )}
+          {flowState.status === "success" && slots.success}
+          {flowState.status === "error" && slots.error}
+          {slots.footer}
+        </ConfigurationOverrides>
+      </Card>
+    </InternalFormContext.Provider>
+  );
+};
+
+// Form.Initial = Initial;
+Form.Error = Error;
+Form.Authenticating = Authenticating;
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts
new file mode 100644
index 00000000..525cffb2
--- /dev/null
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts
@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { SlashIDContext } from "../../../context/slash-id-context";
+
+export function useOrgSwitchingContext() {
+  const { __orgSwitchingContext } = useContext(SlashIDContext);
+
+  return __orgSwitchingContext;
+}
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
new file mode 100644
index 00000000..cbe3582b
--- /dev/null
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from "react";
+
+import { useSlashID } from "../../../hooks/use-slash-id";
+import {
+  Flow,
+  createFlow,
+  FlowState,
+  CreateFlowOptions,
+} from "./org-switching-flow";
+import { useOrgSwitchingContext } from "./useOrgSwitchingContext";
+
+export function useFlowState(opts: CreateFlowOptions = {}) {
+  const { logIn, mfa, recover, user, sdkState, sid } = useSlashID();
+  const orgSwitchingCtx = useOrgSwitchingContext();
+  const flowRef = useRef<Flow>(createFlow(opts));
+  const [state, setState] = useState<FlowState>(flowRef.current.state);
+
+  useEffect(() => {
+    const flow = flowRef.current;
+    flow.subscribe(setState);
+
+    return () => flow.unsubscribe(setState);
+  }, []);
+
+  useEffect(() => {
+    if (sdkState !== "ready") return;
+
+    flowRef.current.setRecover(recover);
+    flowRef.current.setCancel(() => {
+      sid?.publish("flowCancelled", undefined);
+    });
+  }, [recover, sdkState, sid]);
+
+  useEffect(() => {
+    if (user && !user.anonymous) {
+      flowRef.current.setLogIn(mfa);
+    } else {
+      flowRef.current.setLogIn(logIn);
+    }
+  }, [logIn, mfa, user]);
+
+  return state;
+}
diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index 7291fcff..35969d8e 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -85,6 +85,15 @@ type ExternalStateParams = Pick<SlashIDProviderProps, "oid" | "initialToken">;
 export type Subscribe = SlashID["subscribe"];
 export type Unsubscribe = SlashID["unsubscribe"];
 
+type OrgSwitchingContext =
+  | {
+      state: "idle";
+    }
+  | {
+      state: "switching";
+      oid: string;
+    };
+
 export interface ISlashIDContext {
   sid: SlashID | undefined;
   user: User | undefined;
@@ -99,9 +108,10 @@ export interface ISlashIDContext {
   validateToken: (token: string) => Promise<boolean>;
   __switchOrganizationInContext: ({ oid }: { oid: string }) => Promise<void>;
   __syncExternalState: (state: ExternalStateParams) => Promise<void>;
+  __orgSwitchingContext: OrgSwitchingContext | null;
 }
 
-export const initialContextValue = {
+export const initialContextValue: ISlashIDContext = {
   sid: undefined,
   user: undefined,
   anonymousUser: undefined,
@@ -115,6 +125,7 @@ export const initialContextValue = {
   validateToken: async () => false,
   __switchOrganizationInContext: async () => undefined,
   __syncExternalState: async () => undefined,
+  __orgSwitchingContext: { state: "idle" },
 };
 
 export const SlashIDContext =
@@ -158,6 +169,9 @@ export const SlashIDProvider = ({
   const storageRef = useRef<Storage | undefined>(undefined);
   const sidRef = useRef<SlashID | undefined>(undefined);
   const eventBufferRef = useRef<EventBuffer | undefined>();
+  const [orgSwitchingCtx, setOrgSwitchingCtx] = useState<OrgSwitchingContext>({
+    state: "idle",
+  });
 
   /**
    * Restarts the React SDK lifecycle with a new
@@ -180,11 +194,18 @@ export const SlashIDProvider = ({
     async ({ oid: newOid }: { oid: string }) => {
       if (!user) return;
 
+      setOrgSwitchingCtx({
+        state: "switching",
+        oid,
+      });
+
       const newToken = await user.getTokenForOrganization(newOid);
 
-      __syncExternalState({ oid: newOid, initialToken: newToken });
+      await __syncExternalState({ oid: newOid, initialToken: newToken });
+
+      setOrgSwitchingCtx({ state: "idle" });
     },
-    [__syncExternalState, user]
+    [__syncExternalState, oid, user]
   );
 
   const storeUser = useCallback(
@@ -563,7 +584,7 @@ export const SlashIDProvider = ({
     validateToken,
   ]);
 
-  const contextValue = useMemo(() => {
+  const contextValue = useMemo<ISlashIDContext>(() => {
     if (state === "initial") {
       return {
         sid: undefined,
@@ -579,6 +600,7 @@ export const SlashIDProvider = ({
         unsubscribe,
         __switchOrganizationInContext,
         __syncExternalState,
+        __orgSwitchingContext: orgSwitchingCtx,
       };
     }
 
@@ -596,6 +618,7 @@ export const SlashIDProvider = ({
       validateToken,
       __switchOrganizationInContext,
       __syncExternalState,
+      __orgSwitchingContext: orgSwitchingCtx,
     };
   }, [
     state,
@@ -610,6 +633,7 @@ export const SlashIDProvider = ({
     validateToken,
     __switchOrganizationInContext,
     __syncExternalState,
+    orgSwitchingCtx,
   ]);
 
   return (
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index 7a2bafa0..ba921d0f 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -171,6 +171,7 @@ const ConfiguredDynamicFlow = () => {
 };
 
 const BasicForm = () => {
+  const { user } = useSlashID();
   return (
     <ConfigurationProvider
       factors={[
@@ -205,21 +206,26 @@ const BasicForm = () => {
       supportURL="https://www.google.com"
       alternativeAuthURL="https://www.google.com"
     >
-      <SlashIDLoaded>
-        <>
-          <LoggedIn>
-            MFA
-            <Form factors={[{ method: "totp" }]} />
-          </LoggedIn>
-          <LoggedOut>
-            <Form
-              onError={(error, context) =>
-                console.log("onError", { error, context })
-              }
-            />
-          </LoggedOut>
-        </>
-      </SlashIDLoaded>
+      <>
+        <LoggedIn>
+          <button
+            onClick={() =>
+              user?.getTokenForOrganization(
+                "971dd52c-c5a5-2260-aa01-71b2c3d9fcb3"
+              )
+            }
+          >
+            Switch org
+          </button>
+        </LoggedIn>
+        <LoggedOut>
+          <Form
+            onError={(error, context) =>
+              console.log("onError", { error, context })
+            }
+          />
+        </LoggedOut>
+      </>
     </ConfigurationProvider>
   );
 };
@@ -336,12 +342,12 @@ root.render(
       themeProps={{ theme: "dark" }}
       tokenStorage="localStorage"
       analyticsEnabled={false}
-      environment="sandbox"
-      anonymousUsersEnabled
-      // environment={{
-      //   baseURL: "https://api.slashid.local",
-      //   sdkURL: "https://jump.slashid.local/sdk.html"
-      // }}
+      // environment="sandbox"
+      // anonymousUsersEnabled
+      environment={{
+        baseURL: "https://api.slashid.local",
+        sdkURL: "https://jump.slashid.local/sdk.html",
+      }}
     >
       <LogOut />
       <div className="layout">
@@ -350,24 +356,24 @@ root.render(
             <h2>Basic form</h2>
             <BasicForm />
           </div>
-          <div style={vars}>
+          {/* <div style={vars}>
             <h2>Composed form</h2>
             <ComposedForm />
-          </div>
+          </div> */}
         </div>
         <div>
-          <div>
+          {/* <div>
             <h2>Switch to default org</h2>
             <Config />
           </div>
           <div>
             <h2>Dynamic flow - factor based on handle</h2>
             <ConfiguredDynamicFlow />
-          </div>
+          </div> */}
         </div>
       </div>
 
-      <div className="states">
+      {/* <div className="states">
         {(() => {
           const forcedEmailMagicLinkLoadingState: AuthenticatingState = {
             status: "authenticating",
@@ -398,7 +404,7 @@ root.render(
             </ConfigurationProvider>
           );
         })()}
-      </div>
+      </div> */}
     </SlashIDProvider>
   </React.StrictMode>
 );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4c25d68..efdb1f8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -348,8 +348,8 @@ importers:
         specifier: ^8.0.2
         version: 8.3.1
       '@slashid/slashid':
-        specifier: 3.28.0
-        version: 3.28.0
+        specifier: 3.28.1-hrd-console.0
+        version: 3.28.1-hrd-console.0
       '@storybook/addon-essentials':
         specifier: 7.6.19
         version: 7.6.19(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
@@ -8753,6 +8753,23 @@ packages:
       ua-parser-js: 1.0.37
       url: 0.11.3
       uuid: 8.3.2
+    dev: false
+
+  /@slashid/slashid@3.28.1-hrd-console.0:
+    resolution: {integrity: sha512-PSYLsagPeAYjbmfmpcTmjFL08GsY+bBHPtfREoyO/bpTeT3UHBlaGbIN69Ma5U0iDLX0cn7k5uxVILl5BkmiAw==}
+    dependencies:
+      '@changesets/cli': 2.27.7
+      '@types/uuid': 8.3.4
+      compare-versions: 6.1.0
+      docdash: 1.2.0
+      jwt-decode: 3.1.2
+      qrcode: 1.5.3
+      querystring-es3: 0.2.1
+      regenerator-runtime: 0.13.11
+      ua-parser-js: 1.0.37
+      url: 0.11.3
+      uuid: 8.3.2
+    dev: true
 
   /@storybook/addon-actions@7.6.19:
     resolution: {integrity: sha512-ATLrA5QKFJt7tIAScRHz5T3eBQ+RG3jaZk08L7gChvyQZhei8knWwePElZ7GaWbCr9BgznQp1lQUUXq/UUblAQ==}
@@ -19491,6 +19508,7 @@ packages:
 
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
 
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}

From f5fa5c5426fe92259a7067c63d383f9c6c9ace64 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Sat, 11 Jan 2025 15:00:46 +0100
Subject: [PATCH 02/31] Set login function

---
 .../org-switching/useOrgSwitchingFlowState.ts     | 15 +++++++++------
 packages/react/src/context/slash-id-context.tsx   |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index cbe3582b..4a12b850 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -8,9 +8,10 @@ import {
   CreateFlowOptions,
 } from "./org-switching-flow";
 import { useOrgSwitchingContext } from "./useOrgSwitchingContext";
+import { User } from "@slashid/slashid";
 
 export function useFlowState(opts: CreateFlowOptions = {}) {
-  const { logIn, mfa, recover, user, sdkState, sid } = useSlashID();
+  const { recover, user, sdkState, sid } = useSlashID();
   const orgSwitchingCtx = useOrgSwitchingContext();
   const flowRef = useRef<Flow>(createFlow(opts));
   const [state, setState] = useState<FlowState>(flowRef.current.state);
@@ -32,12 +33,14 @@ export function useFlowState(opts: CreateFlowOptions = {}) {
   }, [recover, sdkState, sid]);
 
   useEffect(() => {
-    if (user && !user.anonymous) {
-      flowRef.current.setLogIn(mfa);
-    } else {
-      flowRef.current.setLogIn(logIn);
+    if (user && orgSwitchingCtx?.state === "switching") {
+      flowRef.current.setLogIn = async () => {
+        const token = await user.getTokenForOrganization(orgSwitchingCtx.oid);
+
+        return new User(token);
+      };
     }
-  }, [logIn, mfa, user]);
+  }, [orgSwitchingCtx, user]);
 
   return state;
 }
diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index 35969d8e..f3d1caa5 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -108,7 +108,7 @@ export interface ISlashIDContext {
   validateToken: (token: string) => Promise<boolean>;
   __switchOrganizationInContext: ({ oid }: { oid: string }) => Promise<void>;
   __syncExternalState: (state: ExternalStateParams) => Promise<void>;
-  __orgSwitchingContext: OrgSwitchingContext | null;
+  __orgSwitchingContext: OrgSwitchingContext;
 }
 
 export const initialContextValue: ISlashIDContext = {

From b89a62f8ae2ea973a785f18f2bb59d3ac568ae6a Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Sat, 11 Jan 2025 16:16:12 +0100
Subject: [PATCH 03/31] Form reacting to webhook challenge update

---
 .../form/org-switching/org-switching-flow.ts  |  1 +
 .../form/org-switching/org-switching-form.tsx | 57 +++++--------------
 .../org-switching/org-switching-provider.tsx  | 17 ++++++
 .../org-switching/useOrgSwitchingFlowState.ts | 19 +++----
 packages/react/src/dev.tsx                    | 25 ++++----
 5 files changed, 53 insertions(+), 66 deletions(-)
 create mode 100644 packages/react/src/components/form/org-switching/org-switching-provider.tsx

diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/org-switching/org-switching-flow.ts
index ba9bc19e..a3b31690 100644
--- a/packages/react/src/components/form/org-switching/org-switching-flow.ts
+++ b/packages/react/src/components/form/org-switching/org-switching-flow.ts
@@ -131,6 +131,7 @@ const createAuthenticatingState = (
   setRecoveryCodes: (codes: string[]) => void
 ): AuthenticatingState => {
   function performLogin() {
+    if (!logInFn) return;
     return logInFn(context.config, context.options)
       .then((user) => {
         if (!user) {
diff --git a/packages/react/src/components/form/org-switching/org-switching-form.tsx b/packages/react/src/components/form/org-switching/org-switching-form.tsx
index 29de42f8..1e058b94 100644
--- a/packages/react/src/components/form/org-switching/org-switching-form.tsx
+++ b/packages/react/src/components/form/org-switching/org-switching-form.tsx
@@ -1,26 +1,22 @@
 import { clsx } from "clsx";
-import { useFlowState } from "../useFlowState";
+import { useFlowState } from "./useOrgSwitchingFlowState";
 import { CreateFlowOptions } from "./org-switching-flow";
-// import { Initial } from "./initial";
 import { Authenticating } from "../authenticating";
 import { Error } from "../error";
 import { Success } from "../success";
 import { Footer } from "../footer";
 import { useConfiguration } from "../../../hooks/use-configuration";
 import { FormProvider } from "../../../context/form-context";
-import { useLastHandle } from "../../../hooks/use-last-handle";
 import {
   ConfigurationOverrides,
   ConfigurationOverridesProps,
 } from "../../configuration-overrides";
-import { Handle, LoginOptions } from "../../../domain/types";
-import React, { useCallback } from "react";
+import { LoginOptions } from "../../../domain/types";
+import { useRef, useMemo } from "react";
 import { Slots, useSlots } from "../../slot";
-import { Factor } from "@slashid/slashid";
 import { PayloadOptions } from "../types";
 import { InternalFormContext } from "../internal-context";
 import { StoreRecoveryCodes } from "../store-recovery-codes";
-import { useLastFactor } from "../../../hooks/use-last-factor";
 import { Card } from "@slashid/react-primitives";
 
 export type Props = ConfigurationOverridesProps & {
@@ -28,9 +24,7 @@ export type Props = ConfigurationOverridesProps & {
   onSuccess?: CreateFlowOptions["onSuccess"];
   onError?: CreateFlowOptions["onError"];
   middleware?: LoginOptions["middleware"];
-  children?: Slots<
-    "initial" | "authenticating" | "success" | "error" | "footer"
-  >; // TS does not enforce this, but it is used for documentation
+  children?: Slots<"authenticating" | "success" | "error" | "footer">; // TS does not enforce this, but it is used for documentation
 };
 
 /**
@@ -38,30 +32,26 @@ export type Props = ConfigurationOverridesProps & {
  * The form can be customized significantly using the built-in slots and CSS custom properties.
  * Check the documentation for more information.
  */
-export const Form = ({
+export const OrgSwitchingForm = ({
   className,
   onSuccess,
   onError,
   factors,
   text,
-  middleware,
   children,
 }: Props) => {
   const flowState = useFlowState({ onSuccess, onError });
   const { showBanner } = useConfiguration();
-  const { lastHandle } = useLastHandle();
-  const { lastFactor } = useLastFactor();
-  const submitPayloadRef = React.useRef<PayloadOptions>({
+
+  const submitPayloadRef = useRef<PayloadOptions>({
     handleType: undefined,
     handleValue: undefined,
     flag: undefined,
   });
-  const [selectedFactor, setSelectedFactor] = React.useState<
-    Factor | undefined
-  >();
+
   const { status } = flowState;
 
-  const defaultSlots = React.useMemo(() => {
+  const defaultSlots = useMemo(() => {
     const slots = {
       footer: showBanner ? <Footer /> : null,
       // initial: status === "initial" ? <Initial /> : undefined,
@@ -77,38 +67,17 @@ export const Form = ({
 
   const slots = useSlots({ children, defaultSlots });
 
-  const handleSubmit = useCallback(
-    (factor: Factor, handle?: Handle) => {
-      if (flowState.status !== "initial") return;
-
-      flowState.logIn(
-        {
-          factor,
-          handle,
-        },
-        { middleware }
-      );
-    },
-    [flowState, middleware]
-  );
-
   return (
     <InternalFormContext.Provider
       value={{
         flowState,
-        lastHandle,
-        lastFactor,
-        handleSubmit,
         submitPayloadRef,
-        selectedFactor,
-        setSelectedFactor,
+        handleSubmit: () => {},
+        setSelectedFactor: () => {},
       }}
     >
       <Card className={clsx("sid-form", className)}>
         <ConfigurationOverrides text={text} factors={factors}>
-          {flowState.status === "initial" && (
-            <FormProvider>{slots.initial}</FormProvider>
-          )}
           {flowState.status === "authenticating" && (
             <FormProvider>{slots.authenticating}</FormProvider>
           )}
@@ -125,5 +94,5 @@ export const Form = ({
 };
 
 // Form.Initial = Initial;
-Form.Error = Error;
-Form.Authenticating = Authenticating;
+OrgSwitchingForm.Error = Error;
+OrgSwitchingForm.Authenticating = Authenticating;
diff --git a/packages/react/src/components/form/org-switching/org-switching-provider.tsx b/packages/react/src/components/form/org-switching/org-switching-provider.tsx
new file mode 100644
index 00000000..c6135943
--- /dev/null
+++ b/packages/react/src/components/form/org-switching/org-switching-provider.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { useOrgSwitchingContext } from "./useOrgSwitchingContext";
+
+type Props = {
+  children: ReactNode;
+  authUI: ReactNode;
+};
+
+export function OrgSwitchingProvider({ children, authUI }: Props) {
+  const ctx = useOrgSwitchingContext();
+
+  if (ctx.state === "switching") {
+    return <>{authUI}</>;
+  }
+
+  return <>{children}</>;
+}
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index 4a12b850..c262c115 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -7,15 +7,14 @@ import {
   FlowState,
   CreateFlowOptions,
 } from "./org-switching-flow";
-import { useOrgSwitchingContext } from "./useOrgSwitchingContext";
-import { User } from "@slashid/slashid";
 
 export function useFlowState(opts: CreateFlowOptions = {}) {
-  const { recover, user, sdkState, sid } = useSlashID();
-  const orgSwitchingCtx = useOrgSwitchingContext();
+  const { recover, sdkState, sid, user } = useSlashID();
   const flowRef = useRef<Flow>(createFlow(opts));
   const [state, setState] = useState<FlowState>(flowRef.current.state);
 
+  console.log({ flowState: flowRef.current.state });
+
   useEffect(() => {
     const flow = flowRef.current;
     flow.subscribe(setState);
@@ -33,14 +32,10 @@ export function useFlowState(opts: CreateFlowOptions = {}) {
   }, [recover, sdkState, sid]);
 
   useEffect(() => {
-    if (user && orgSwitchingCtx?.state === "switching") {
-      flowRef.current.setLogIn = async () => {
-        const token = await user.getTokenForOrganization(orgSwitchingCtx.oid);
-
-        return new User(token);
-      };
-    }
-  }, [orgSwitchingCtx, user]);
+    if (!user) return;
+
+    flowRef.current.setLogIn(async () => user);
+  }, [user]);
 
   return state;
 }
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index ba921d0f..2fb23dd7 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -21,6 +21,8 @@ import { defaultOrganization } from "./middleware/default-organization";
 import { Slot } from "./components/slot";
 import { AuthenticatingState } from "./components/form/flow";
 import { Authenticating } from "./components/form";
+import { OrgSwitchingProvider } from "./components/form/org-switching/org-switching-provider";
+import { OrgSwitchingForm } from "./components/form/org-switching/org-switching-form";
 
 const rootOid = "b6f94b67-d20f-7fc3-51df-bf6e3b82683e";
 
@@ -171,7 +173,8 @@ const ConfiguredDynamicFlow = () => {
 };
 
 const BasicForm = () => {
-  const { user } = useSlashID();
+  const { __switchOrganizationInContext } = useSlashID();
+
   return (
     <ConfigurationProvider
       factors={[
@@ -208,15 +211,17 @@ const BasicForm = () => {
     >
       <>
         <LoggedIn>
-          <button
-            onClick={() =>
-              user?.getTokenForOrganization(
-                "971dd52c-c5a5-2260-aa01-71b2c3d9fcb3"
-              )
-            }
-          >
-            Switch org
-          </button>
+          <OrgSwitchingProvider authUI={<OrgSwitchingForm />}>
+            <button
+              onClick={() =>
+                __switchOrganizationInContext({
+                  oid: "8e669bb5-f4a7-2a3f-fec6-3d6f96f6dd26",
+                })
+              }
+            >
+              Switch org
+            </button>
+          </OrgSwitchingProvider>
         </LoggedIn>
         <LoggedOut>
           <Form

From 65d374f8d67028b284cbd81f836a63f0a89a7ede Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Mon, 13 Jan 2025 15:26:03 +0100
Subject: [PATCH 04/31] Reorganize the state

---
 .../org-switching/org-switching-provider.tsx  | 17 -------------
 .../org-switching/useOrgSwitchingContext.ts   |  8 -------
 .../react/src/context/slash-id-context.tsx    | 24 ++++++++++---------
 packages/react/src/dev.tsx                    | 20 ++++++++--------
 packages/react/src/main.ts                    | 12 +++++++++-
 5 files changed, 34 insertions(+), 47 deletions(-)
 delete mode 100644 packages/react/src/components/form/org-switching/org-switching-provider.tsx
 delete mode 100644 packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts

diff --git a/packages/react/src/components/form/org-switching/org-switching-provider.tsx b/packages/react/src/components/form/org-switching/org-switching-provider.tsx
deleted file mode 100644
index c6135943..00000000
--- a/packages/react/src/components/form/org-switching/org-switching-provider.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ReactNode } from "react";
-import { useOrgSwitchingContext } from "./useOrgSwitchingContext";
-
-type Props = {
-  children: ReactNode;
-  authUI: ReactNode;
-};
-
-export function OrgSwitchingProvider({ children, authUI }: Props) {
-  const ctx = useOrgSwitchingContext();
-
-  if (ctx.state === "switching") {
-    return <>{authUI}</>;
-  }
-
-  return <>{children}</>;
-}
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts
deleted file mode 100644
index 525cffb2..00000000
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingContext.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useContext } from "react";
-import { SlashIDContext } from "../../../context/slash-id-context";
-
-export function useOrgSwitchingContext() {
-  const { __orgSwitchingContext } = useContext(SlashIDContext);
-
-  return __orgSwitchingContext;
-}
diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index f3d1caa5..7dd00cc5 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -85,7 +85,7 @@ type ExternalStateParams = Pick<SlashIDProviderProps, "oid" | "initialToken">;
 export type Subscribe = SlashID["subscribe"];
 export type Unsubscribe = SlashID["unsubscribe"];
 
-type OrgSwitchingContext =
+type OrgSwitchingState =
   | {
       state: "idle";
     }
@@ -108,7 +108,7 @@ export interface ISlashIDContext {
   validateToken: (token: string) => Promise<boolean>;
   __switchOrganizationInContext: ({ oid }: { oid: string }) => Promise<void>;
   __syncExternalState: (state: ExternalStateParams) => Promise<void>;
-  __orgSwitchingContext: OrgSwitchingContext;
+  __orgSwitchingState: OrgSwitchingState;
 }
 
 export const initialContextValue: ISlashIDContext = {
@@ -125,7 +125,7 @@ export const initialContextValue: ISlashIDContext = {
   validateToken: async () => false,
   __switchOrganizationInContext: async () => undefined,
   __syncExternalState: async () => undefined,
-  __orgSwitchingContext: { state: "idle" },
+  __orgSwitchingState: { state: "idle" },
 };
 
 export const SlashIDContext =
@@ -169,9 +169,11 @@ export const SlashIDProvider = ({
   const storageRef = useRef<Storage | undefined>(undefined);
   const sidRef = useRef<SlashID | undefined>(undefined);
   const eventBufferRef = useRef<EventBuffer | undefined>();
-  const [orgSwitchingCtx, setOrgSwitchingCtx] = useState<OrgSwitchingContext>({
-    state: "idle",
-  });
+  const [orgSwitchingState, setOrgSwitchingState] = useState<OrgSwitchingState>(
+    {
+      state: "idle",
+    }
+  );
 
   /**
    * Restarts the React SDK lifecycle with a new
@@ -194,7 +196,7 @@ export const SlashIDProvider = ({
     async ({ oid: newOid }: { oid: string }) => {
       if (!user) return;
 
-      setOrgSwitchingCtx({
+      setOrgSwitchingState({
         state: "switching",
         oid,
       });
@@ -203,7 +205,7 @@ export const SlashIDProvider = ({
 
       await __syncExternalState({ oid: newOid, initialToken: newToken });
 
-      setOrgSwitchingCtx({ state: "idle" });
+      setOrgSwitchingState({ state: "idle" });
     },
     [__syncExternalState, oid, user]
   );
@@ -600,7 +602,7 @@ export const SlashIDProvider = ({
         unsubscribe,
         __switchOrganizationInContext,
         __syncExternalState,
-        __orgSwitchingContext: orgSwitchingCtx,
+        __orgSwitchingState: orgSwitchingState,
       };
     }
 
@@ -618,7 +620,7 @@ export const SlashIDProvider = ({
       validateToken,
       __switchOrganizationInContext,
       __syncExternalState,
-      __orgSwitchingContext: orgSwitchingCtx,
+      __orgSwitchingState: orgSwitchingState,
     };
   }, [
     state,
@@ -633,7 +635,7 @@ export const SlashIDProvider = ({
     validateToken,
     __switchOrganizationInContext,
     __syncExternalState,
-    orgSwitchingCtx,
+    orgSwitchingState,
   ]);
 
   return (
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index 2fb23dd7..f6fb42d9 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -21,7 +21,6 @@ import { defaultOrganization } from "./middleware/default-organization";
 import { Slot } from "./components/slot";
 import { AuthenticatingState } from "./components/form/flow";
 import { Authenticating } from "./components/form";
-import { OrgSwitchingProvider } from "./components/form/org-switching/org-switching-provider";
 import { OrgSwitchingForm } from "./components/form/org-switching/org-switching-form";
 
 const rootOid = "b6f94b67-d20f-7fc3-51df-bf6e3b82683e";
@@ -173,7 +172,7 @@ const ConfiguredDynamicFlow = () => {
 };
 
 const BasicForm = () => {
-  const { __switchOrganizationInContext } = useSlashID();
+  const { __switchOrganizationInContext, __orgSwitchingState } = useSlashID();
 
   return (
     <ConfigurationProvider
@@ -211,7 +210,7 @@ const BasicForm = () => {
     >
       <>
         <LoggedIn>
-          <OrgSwitchingProvider authUI={<OrgSwitchingForm />}>
+          {__orgSwitchingState.state === "idle" && (
             <button
               onClick={() =>
                 __switchOrganizationInContext({
@@ -221,7 +220,8 @@ const BasicForm = () => {
             >
               Switch org
             </button>
-          </OrgSwitchingProvider>
+          )}
+          {__orgSwitchingState.state === "switching" && <OrgSwitchingForm />}
         </LoggedIn>
         <LoggedOut>
           <Form
@@ -361,24 +361,24 @@ root.render(
             <h2>Basic form</h2>
             <BasicForm />
           </div>
-          {/* <div style={vars}>
+          <div style={vars}>
             <h2>Composed form</h2>
             <ComposedForm />
-          </div> */}
+          </div>
         </div>
         <div>
-          {/* <div>
+          <div>
             <h2>Switch to default org</h2>
             <Config />
           </div>
           <div>
             <h2>Dynamic flow - factor based on handle</h2>
             <ConfiguredDynamicFlow />
-          </div> */}
+          </div>
         </div>
       </div>
 
-      {/* <div className="states">
+      <div className="states">
         {(() => {
           const forcedEmailMagicLinkLoadingState: AuthenticatingState = {
             status: "authenticating",
@@ -409,7 +409,7 @@ root.render(
             </ConfigurationProvider>
           );
         })()}
-      </div> */}
+      </div>
     </SlashIDProvider>
   </React.StrictMode>
 );
diff --git a/packages/react/src/main.ts b/packages/react/src/main.ts
index f1af40a8..f72c2fa0 100644
--- a/packages/react/src/main.ts
+++ b/packages/react/src/main.ts
@@ -48,6 +48,8 @@ import * as validation from "./utils/css-validation";
 
 import type { LoginConfiguration } from "./domain/types";
 
+import { OrgSwitchingForm } from "./components/form/org-switching/org-switching-form";
+
 const Customisation = {
   sanitiseCssVariableCustomisationConfig,
   getGoogleFontImports,
@@ -58,6 +60,13 @@ const FormState = {
   Authenticating,
 };
 
+/**
+ * Components for SlashID internal use
+ */
+const Internal = {
+  OrgSwitchingForm,
+}
+
 /**
  * TODO: think about code splitting
  */
@@ -93,7 +102,8 @@ export {
   type CssVariable,
   type CssVariableConfig,
   Customisation,
-
+  Internal,
+  
   // raw states
   FormState,
 

From 12c422abb0f3c33bd6cee01ed3d8912d22eb2c04 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Mon, 13 Jan 2025 15:26:33 +0100
Subject: [PATCH 05/31] Remove comment

---
 .../form/org-switching/org-switching-flow.ts  | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/org-switching/org-switching-flow.ts
index a3b31690..4bdac8f6 100644
--- a/packages/react/src/components/form/org-switching/org-switching-flow.ts
+++ b/packages/react/src/components/form/org-switching/org-switching-flow.ts
@@ -327,27 +327,6 @@ export function createFlow(opts: CreateFlowOptions = {}) {
 
   async function transition(e: Event) {
     switch (e.type) {
-      // case "sid_login":
-      //   // TODO replace with a check for ready state
-      //   if (!logInFn || !recoverFn) break;
-
-      //   const loginContext: AuthenticatingState["context"] = {
-      //     config: e.config,
-      //     options: e.options,
-      //     attempt: 1,
-      //   };
-
-      //   setState(
-      //     createAuthenticatingState(
-      //       send,
-      //       loginContext,
-      //       logInFn,
-      //       recoverFn,
-      //       setRecoveryCodes
-      //     ),
-      //     e
-      //   );
-      //   break;
       case "sid_storeRecoveryCodes":
         // recovery codes are only stored on register authenticator
         if (!recoveryCodes) {

From 275ce9903a3ca49c03cbbde71662e7a289c6845d Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 14 Jan 2025 14:14:29 +0100
Subject: [PATCH 06/31] Publish beta release

---
 packages/react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 04e365c6..b6df38f4 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@slashid/react",
-  "version": "1.31.4",
+  "version": "1.31.5-org-switching-flow.0",
   "private": false,
   "publishConfig": {
     "access": "public"

From 2419b75de4f8964125846f45aac0abdec88e14e6 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 16 Jan 2025 13:03:52 +0100
Subject: [PATCH 07/31] Create changeset

---
 .changeset/tough-chairs-glow.md | 5 +++++
 packages/react/package.json     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tough-chairs-glow.md

diff --git a/.changeset/tough-chairs-glow.md b/.changeset/tough-chairs-glow.md
new file mode 100644
index 00000000..d1e67fd0
--- /dev/null
+++ b/.changeset/tough-chairs-glow.md
@@ -0,0 +1,5 @@
+---
+"@slashid/react": minor
+---
+
+Create internal components for the new org switching flow
diff --git a/packages/react/package.json b/packages/react/package.json
index b6df38f4..04e365c6 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@slashid/react",
-  "version": "1.31.5-org-switching-flow.0",
+  "version": "1.31.4",
   "private": false,
   "publishConfig": {
     "access": "public"

From abc86ab6e2e9d6c2d7ca8377854f3491b5c8a22d Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 16 Jan 2025 14:15:07 +0100
Subject: [PATCH 08/31] Remove log

---
 .../components/form/org-switching/useOrgSwitchingFlowState.ts   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index c262c115..7ee30a9a 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -13,8 +13,6 @@ export function useFlowState(opts: CreateFlowOptions = {}) {
   const flowRef = useRef<Flow>(createFlow(opts));
   const [state, setState] = useState<FlowState>(flowRef.current.state);
 
-  console.log({ flowState: flowRef.current.state });
-
   useEffect(() => {
     const flow = flowRef.current;
     flow.subscribe(setState);

From dfd4bbe4d5ccaf70322ecd5e993667ac20870d39 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Fri, 17 Jan 2025 10:06:46 +0100
Subject: [PATCH 09/31] Use lastest Core SDK

---
 packages/react-primitives/package.json  |  2 +-
 packages/react/package.json             |  2 +-
 packages/remix/package.json             |  2 +-
 packages/remix/src/slashid-provider.tsx |  1 +
 pnpm-lock.yaml                          | 52 ++++++++++---------------
 5 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/packages/react-primitives/package.json b/packages/react-primitives/package.json
index 40ce0feb..6fc5efbe 100644
--- a/packages/react-primitives/package.json
+++ b/packages/react-primitives/package.json
@@ -76,7 +76,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
-    "@slashid/slashid": "3.17.1",
+    "@slashid/slashid": "3.29.0",
     "@storybook/addon-essentials": "7.6.19",
     "@storybook/addon-interactions": "7.4.0",
     "@storybook/addon-links": "7.4.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 04e365c6..8ed33581 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
-    "@slashid/slashid": "3.28.1-hrd-console.0",
+    "@slashid/slashid": "3.29.0",
     "@storybook/addon-essentials": "7.6.19",
     "@storybook/addon-interactions": "7.4.0",
     "@storybook/addon-links": "7.4.0",
diff --git a/packages/remix/package.json b/packages/remix/package.json
index 565cc41b..4bb875c9 100644
--- a/packages/remix/package.json
+++ b/packages/remix/package.json
@@ -10,7 +10,7 @@
   "module": "dist/main.js",
   "dependencies": {
     "@slashid/react": "workspace:*",
-    "@slashid/slashid": "3.28.0",
+    "@slashid/slashid": "3.29.0",
     "jose": "^5.2.0",
     "url-join": "^5.0.0"
   },
diff --git a/packages/remix/src/slashid-provider.tsx b/packages/remix/src/slashid-provider.tsx
index faf932c3..0c074a40 100644
--- a/packages/remix/src/slashid-provider.tsx
+++ b/packages/remix/src/slashid-provider.tsx
@@ -54,6 +54,7 @@ function SlashIDProviderSSR({
       __syncExternalState() {
         throw new Error("Operation not possible in this state");
       },
+      __orgSwitchingState: { state: "idle" },
     };
   }, [
     props.analyticsEnabled,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index efdb1f8e..694316d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -348,8 +348,8 @@ importers:
         specifier: ^8.0.2
         version: 8.3.1
       '@slashid/slashid':
-        specifier: 3.28.1-hrd-console.0
-        version: 3.28.1-hrd-console.0
+        specifier: 3.29.0
+        version: 3.29.0
       '@storybook/addon-essentials':
         specifier: 7.6.19
         version: 7.6.19(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
@@ -493,8 +493,8 @@ importers:
         specifier: ^8.0.2
         version: 8.3.1
       '@slashid/slashid':
-        specifier: 3.17.1
-        version: 3.17.1
+        specifier: 3.29.0
+        version: 3.29.0
       '@storybook/addon-essentials':
         specifier: 7.6.19
         version: 7.6.19(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
@@ -598,8 +598,8 @@ importers:
         specifier: workspace:*
         version: link:../react
       '@slashid/slashid':
-        specifier: 3.28.0
-        version: 3.28.0
+        specifier: 3.29.0
+        version: 3.29.0
       jose:
         specifier: ^5.2.0
         version: 5.2.0
@@ -8704,6 +8704,7 @@ packages:
       regenerator-runtime: 0.13.11
       url: 0.11.3
       uuid: 8.3.2
+    dev: false
 
   /@slashid/slashid@3.22.0:
     resolution: {integrity: sha512-DVN7ciOs+RCXFpV8tIG5WFE51/O83Te3RdgmL4Zp7K9/dzGXB3f+/ps/pDjp5CseARJL5Bp7sh+HDNFtXUGm/w==}
@@ -8739,24 +8740,8 @@ packages:
       uuid: 8.3.2
     dev: false
 
-  /@slashid/slashid@3.28.0:
-    resolution: {integrity: sha512-AX0aSrgfFkG9iwzgQDK6h+hbJOmbRkX+CyKuJYAxyOFfjpvEZhGg5Y3RuClo9BCBWdRrc9VhSho2iycwP3TNVw==}
-    dependencies:
-      '@changesets/cli': 2.27.7
-      '@types/uuid': 8.3.4
-      compare-versions: 6.1.0
-      docdash: 1.2.0
-      jwt-decode: 3.1.2
-      qrcode: 1.5.3
-      querystring-es3: 0.2.1
-      regenerator-runtime: 0.13.11
-      ua-parser-js: 1.0.37
-      url: 0.11.3
-      uuid: 8.3.2
-    dev: false
-
-  /@slashid/slashid@3.28.1-hrd-console.0:
-    resolution: {integrity: sha512-PSYLsagPeAYjbmfmpcTmjFL08GsY+bBHPtfREoyO/bpTeT3UHBlaGbIN69Ma5U0iDLX0cn7k5uxVILl5BkmiAw==}
+  /@slashid/slashid@3.29.0:
+    resolution: {integrity: sha512-kFW7dy3VIcp55U6tSIWB+t+x70HqKaI+TxQKL+/L5qQNgCLQGGXnWrj552HWlbAdiTN6h+eJbAw7HkxG/926kQ==}
     dependencies:
       '@changesets/cli': 2.27.7
       '@types/uuid': 8.3.4
@@ -8769,7 +8754,6 @@ packages:
       ua-parser-js: 1.0.37
       url: 0.11.3
       uuid: 8.3.2
-    dev: true
 
   /@storybook/addon-actions@7.6.19:
     resolution: {integrity: sha512-ATLrA5QKFJt7tIAScRHz5T3eBQ+RG3jaZk08L7gChvyQZhei8knWwePElZ7GaWbCr9BgznQp1lQUUXq/UUblAQ==}
@@ -9380,7 +9364,7 @@ packages:
       file-system-cache: 2.3.0
       find-cache-dir: 3.3.2
       find-up: 5.0.0
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       glob: 10.3.10
       handlebars: 4.7.8
       lazy-universal-dotenv: 4.0.0
@@ -9442,7 +9426,7 @@ packages:
       file-system-cache: 2.3.0
       find-cache-dir: 3.3.2
       find-up: 5.0.0
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       glob: 10.3.10
       handlebars: 4.7.8
       lazy-universal-dotenv: 4.0.0
@@ -9509,7 +9493,7 @@ packages:
       compression: 1.7.4
       detect-port: 1.5.1
       express: 4.18.2
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       globby: 11.1.0
       ip: 2.0.0
       lodash: 4.17.21
@@ -9575,7 +9559,7 @@ packages:
       '@babel/types': 7.23.3
       '@storybook/csf': 0.1.7
       '@storybook/types': 7.5.3
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       recast: 0.23.4
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -9591,7 +9575,7 @@ packages:
       '@babel/types': 7.23.6
       '@storybook/csf': 0.1.7
       '@storybook/types': 7.6.19
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       recast: 0.23.4
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -9607,7 +9591,7 @@ packages:
       '@babel/types': 7.24.5
       '@storybook/csf': 0.1.7
       '@storybook/types': 7.6.9
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       recast: 0.23.4
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -9958,7 +9942,7 @@ packages:
       chalk: 4.1.2
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       read-pkg-up: 7.0.1
     transitivePeerDependencies:
       - encoding
@@ -12263,6 +12247,7 @@ packages:
     dependencies:
       udc: 1.0.1
       underscore: 1.13.6
+    dev: false
 
   /character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
@@ -17299,6 +17284,7 @@ packages:
 
   /mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: false
 
   /mixme@0.5.10:
     resolution: {integrity: sha512-5H76ANWinB1H3twpJ6JY8uvAtpmFvHNArpilJAjXRKXSDDLPIMoZArw5SH0q9z+lLs8IrMw7Q2VWpWimFKFT1Q==}
@@ -20564,6 +20550,7 @@ packages:
 
   /udc@1.0.1:
     resolution: {integrity: sha512-jv+D9de1flsum5QkFtBdjyppCQAdz9kTck/0xST5Vx48T9LL2BYnw0Iw77dSKDQ9KZ/PS3qPO1vfXHDpLZlxcQ==}
+    dev: false
 
   /ufo@1.3.2:
     resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
@@ -20587,6 +20574,7 @@ packages:
 
   /underscore@1.13.6:
     resolution: {integrity: sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==}
+    dev: false
 
   /unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}

From 9e4c80eab207cec2d2c5e153608723e78c6ba5ac Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Fri, 17 Jan 2025 11:29:56 +0100
Subject: [PATCH 10/31] Revert dev env

---
 packages/react/src/dev.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index f6fb42d9..b914a330 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -347,12 +347,12 @@ root.render(
       themeProps={{ theme: "dark" }}
       tokenStorage="localStorage"
       analyticsEnabled={false}
-      // environment="sandbox"
-      // anonymousUsersEnabled
-      environment={{
-        baseURL: "https://api.slashid.local",
-        sdkURL: "https://jump.slashid.local/sdk.html",
-      }}
+      environment="sandbox"
+      anonymousUsersEnabled
+      // environment={{
+      //   baseURL: "https://api.slashid.local",
+      //   sdkURL: "https://jump.slashid.local/sdk.html",
+      // }}
     >
       <LogOut />
       <div className="layout">

From 86763035c010ba197929990d1d1e4a5ffd6a9140 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Fri, 17 Jan 2025 12:33:42 +0100
Subject: [PATCH 11/31] Fix leftovers

---
 .../form/org-switching/org-switching-form.tsx    | 16 ++++++++--------
 .../org-switching/useOrgSwitchingFlowState.ts    |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/form/org-switching/org-switching-form.tsx b/packages/react/src/components/form/org-switching/org-switching-form.tsx
index 1e058b94..326cfdf4 100644
--- a/packages/react/src/components/form/org-switching/org-switching-form.tsx
+++ b/packages/react/src/components/form/org-switching/org-switching-form.tsx
@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { useFlowState } from "./useOrgSwitchingFlowState";
+import { useOrgSwitchingFlowState } from "./useOrgSwitchingFlowState";
 import { CreateFlowOptions } from "./org-switching-flow";
 import { Authenticating } from "../authenticating";
 import { Error } from "../error";
@@ -12,7 +12,7 @@ import {
   ConfigurationOverridesProps,
 } from "../../configuration-overrides";
 import { LoginOptions } from "../../../domain/types";
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, useCallback } from "react";
 import { Slots, useSlots } from "../../slot";
 import { PayloadOptions } from "../types";
 import { InternalFormContext } from "../internal-context";
@@ -28,7 +28,7 @@ export type Props = ConfigurationOverridesProps & {
 };
 
 /**
- * Render a form that can be used to sign in or sign up a user.
+ * Render a form that can be used to complete the challenges for organization switching .
  * The form can be customized significantly using the built-in slots and CSS custom properties.
  * Check the documentation for more information.
  */
@@ -40,7 +40,7 @@ export const OrgSwitchingForm = ({
   text,
   children,
 }: Props) => {
-  const flowState = useFlowState({ onSuccess, onError });
+  const flowState = useOrgSwitchingFlowState({ onSuccess, onError });
   const { showBanner } = useConfiguration();
 
   const submitPayloadRef = useRef<PayloadOptions>({
@@ -54,7 +54,6 @@ export const OrgSwitchingForm = ({
   const defaultSlots = useMemo(() => {
     const slots = {
       footer: showBanner ? <Footer /> : null,
-      // initial: status === "initial" ? <Initial /> : undefined,
       authenticating:
         status === "authenticating" ? <Authenticating /> : undefined,
       success:
@@ -67,13 +66,15 @@ export const OrgSwitchingForm = ({
 
   const slots = useSlots({ children, defaultSlots });
 
+  const _ = useCallback(() => {}, []);
+
   return (
     <InternalFormContext.Provider
       value={{
         flowState,
         submitPayloadRef,
-        handleSubmit: () => {},
-        setSelectedFactor: () => {},
+        handleSubmit: _,
+        setSelectedFactor: _,
       }}
     >
       <Card className={clsx("sid-form", className)}>
@@ -93,6 +94,5 @@ export const OrgSwitchingForm = ({
   );
 };
 
-// Form.Initial = Initial;
 OrgSwitchingForm.Error = Error;
 OrgSwitchingForm.Authenticating = Authenticating;
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index 7ee30a9a..ac4d4e2c 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -8,7 +8,7 @@ import {
   CreateFlowOptions,
 } from "./org-switching-flow";
 
-export function useFlowState(opts: CreateFlowOptions = {}) {
+export function useOrgSwitchingFlowState(opts: CreateFlowOptions = {}) {
   const { recover, sdkState, sid, user } = useSlashID();
   const flowRef = useRef<Flow>(createFlow(opts));
   const [state, setState] = useState<FlowState>(flowRef.current.state);

From 179c18af5483dff6b553a08b1d256d69af3d3b18 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Fri, 17 Jan 2025 17:31:58 +0100
Subject: [PATCH 12/31] Adjust the implementation

---
 .../components/form/authenticating/otp.tsx    |  5 ++-
 .../react/src/components/form/event-buffer.ts |  2 +-
 .../form/org-switching/org-switching-flow.ts  | 12 ++++---
 .../form/org-switching/org-switching-form.tsx |  4 ++-
 .../org-switching/useOrgSwitchingFlowState.ts | 33 +++++++++----------
 packages/react/src/components/test-utils.ts   | 10 +++++-
 .../react/src/context/slash-id-context.tsx    |  8 ++++-
 packages/react/src/context/test-providers.tsx |  3 ++
 packages/react/src/dev.tsx                    | 15 +--------
 9 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/packages/react/src/components/form/authenticating/otp.tsx b/packages/react/src/components/form/authenticating/otp.tsx
index d8076505..3e9afa7f 100644
--- a/packages/react/src/components/form/authenticating/otp.tsx
+++ b/packages/react/src/components/form/authenticating/otp.tsx
@@ -165,7 +165,10 @@ export const OTPState = ({ flowState }: Props) => {
           onSubmit={registerSubmit(handleSubmit)}
           className={styles.otpForm}
         >
-          <div className={styles.formInner}>
+          <div
+            className={styles.formInner}
+            data-testid="sid-form-authenticating-otp"
+          >
             <OtpInput
               shouldAutoFocus
               inputType="number"
diff --git a/packages/react/src/components/form/event-buffer.ts b/packages/react/src/components/form/event-buffer.ts
index 5093c3d3..a3eb4f01 100644
--- a/packages/react/src/components/form/event-buffer.ts
+++ b/packages/react/src/components/form/event-buffer.ts
@@ -24,7 +24,7 @@ export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
 
   // listen to all the SDK events on init
   Utils.PUBLIC_READ_EVENTS.forEach((publicReadEventName: EventNames) => {
-    // create an event handler
+    // create an event handler 
     const handler = (event: Event) => {
       if (
         subscribers.has(publicReadEventName) &&
diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/org-switching/org-switching-flow.ts
index 4bdac8f6..a4e84f8d 100644
--- a/packages/react/src/components/form/org-switching/org-switching-flow.ts
+++ b/packages/react/src/components/form/org-switching/org-switching-flow.ts
@@ -256,8 +256,12 @@ const createStoreRecoveryCodesState = (
 };
 
 export type CreateFlowOptions = {
+  oid: string;
   onSuccess?: (user: User) => void;
   onError?: (error: Error, context: ErrorState["context"]) => void;
+  logInFn?: LogIn | MFA;
+  recover?: Recover;
+  cancelFn?: Cancel;
 };
 
 type HistoryEntry = {
@@ -280,10 +284,10 @@ type HistoryEntry = {
  * @param opts
  * @returns
  */
-export function createFlow(opts: CreateFlowOptions = {}) {
-  let logInFn: undefined | LogIn | MFA = undefined;
-  let recoverFn: undefined | Recover = undefined;
-  let cancelFn: undefined | Cancel = undefined;
+export function createFlow(opts: CreateFlowOptions) {
+  let logInFn: undefined | LogIn | MFA = opts.logInFn;
+  let recoverFn: undefined | Recover = opts.recover;
+  let cancelFn: undefined | Cancel = opts.cancelFn;
   let recoveryCodes: undefined | string[] = undefined;
   let observers: Observer[] = [];
   const send = (event: Event) => {
diff --git a/packages/react/src/components/form/org-switching/org-switching-form.tsx b/packages/react/src/components/form/org-switching/org-switching-form.tsx
index 326cfdf4..e7589546 100644
--- a/packages/react/src/components/form/org-switching/org-switching-form.tsx
+++ b/packages/react/src/components/form/org-switching/org-switching-form.tsx
@@ -20,6 +20,7 @@ import { StoreRecoveryCodes } from "../store-recovery-codes";
 import { Card } from "@slashid/react-primitives";
 
 export type Props = ConfigurationOverridesProps & {
+  oid: string;
   className?: string;
   onSuccess?: CreateFlowOptions["onSuccess"];
   onError?: CreateFlowOptions["onError"];
@@ -33,6 +34,7 @@ export type Props = ConfigurationOverridesProps & {
  * Check the documentation for more information.
  */
 export const OrgSwitchingForm = ({
+  oid,
   className,
   onSuccess,
   onError,
@@ -40,7 +42,7 @@ export const OrgSwitchingForm = ({
   text,
   children,
 }: Props) => {
-  const flowState = useOrgSwitchingFlowState({ onSuccess, onError });
+  const flowState = useOrgSwitchingFlowState({ onSuccess, onError, oid });
   const { showBanner } = useConfiguration();
 
   const submitPayloadRef = useRef<PayloadOptions>({
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index ac4d4e2c..c104b8df 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -8,9 +8,21 @@ import {
   CreateFlowOptions,
 } from "./org-switching-flow";
 
-export function useOrgSwitchingFlowState(opts: CreateFlowOptions = {}) {
-  const { recover, sdkState, sid, user } = useSlashID();
-  const flowRef = useRef<Flow>(createFlow(opts));
+export function useOrgSwitchingFlowState(opts: CreateFlowOptions) {
+  const { recover, sid, __switchOrganizationInContext } = useSlashID();
+
+  const flowRef = useRef<Flow>(
+    createFlow({
+      ...opts,
+      logInFn: async () => {
+        return __switchOrganizationInContext({ oid: opts.oid });
+      },
+      recover,
+      cancelFn: () => {
+        sid?.publish("flowCancelled", undefined);
+      },
+    })
+  );
   const [state, setState] = useState<FlowState>(flowRef.current.state);
 
   useEffect(() => {
@@ -20,20 +32,5 @@ export function useOrgSwitchingFlowState(opts: CreateFlowOptions = {}) {
     return () => flow.unsubscribe(setState);
   }, []);
 
-  useEffect(() => {
-    if (sdkState !== "ready") return;
-
-    flowRef.current.setRecover(recover);
-    flowRef.current.setCancel(() => {
-      sid?.publish("flowCancelled", undefined);
-    });
-  }, [recover, sdkState, sid]);
-
-  useEffect(() => {
-    if (!user) return;
-
-    flowRef.current.setLogIn(async () => user);
-  }, [user]);
-
   return state;
 }
diff --git a/packages/react/src/components/test-utils.ts b/packages/react/src/components/test-utils.ts
index 08322e6a..db2aa23c 100644
--- a/packages/react/src/components/test-utils.ts
+++ b/packages/react/src/components/test-utils.ts
@@ -59,6 +59,12 @@ const TEST_TOKEN_PAYLOAD_DECODED = {
 const TEST_TOKEN_SIGNATURE =
   "tsyUk3guY29r-jb-Xw2htT0egEO3KUErDSlJu9F9Y_QQAf6Te_DmdPgnCKjR7pTGO1uKvYT6JKit7opyntOA4y_wIhymUOkW5mtX-fgyIF0Fkxx1JjGm4BcTE9rI1tH7DWG177yTzwJ2kv5OYvTknpn_QK8s6JzD1N5Yq11_VNf2dRN_NXb-0feqDGhXU7lR-oO7wqFlt37pzENQ7-tG3JDt9uCKqSbrtXqxTHGtg80ZY3FxXYYiHNC3v0nXV5aFRhxGvIIm9LgNkZwXkEtSecIqFHWJn2-ILuOFpvcmtmlZr8AxQyNMAKMt1fARf2LJy45qITI2IyVTndtDekT6HQ";
 
+export const testToken = [
+  TEST_TOKEN_HEADER,
+  btoa(JSON.stringify({ ...TEST_TOKEN_PAYLOAD_DECODED })),
+  TEST_TOKEN_SIGNATURE,
+].join(".");
+
 type Authentication = {
   method: FactorMethod;
   handle: Handle;
@@ -71,6 +77,7 @@ type CreateTestUserOptions = {
   authentications?: Authentication[];
   token?: string;
   anonymous?: boolean;
+  sid?: SlashID;
 };
 
 /**
@@ -87,6 +94,7 @@ function createBaseTestUser({
   authentications = [],
   token,
   anonymous = false,
+  sid,
 }: CreateTestUserOptions = {}): User | AnonymousUser {
   const payload = token
     ? JSON.parse(atob(token.split(".")[1]))
@@ -123,7 +131,7 @@ function createBaseTestUser({
     return new AnonymousUser(newToken, sid);
   }
 
-  return new User(newToken, { analyticsEnabled: false });
+  return new User(newToken, sid ?? { analyticsEnabled: false });
 }
 
 export const createTestUser = (
diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index 7dd00cc5..ae239df9 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -106,7 +106,11 @@ export interface ISlashIDContext {
   mfa: MFA;
   recover: Recover;
   validateToken: (token: string) => Promise<boolean>;
-  __switchOrganizationInContext: ({ oid }: { oid: string }) => Promise<void>;
+  __switchOrganizationInContext: ({
+    oid,
+  }: {
+    oid: string;
+  }) => Promise<User | undefined>;
   __syncExternalState: (state: ExternalStateParams) => Promise<void>;
   __orgSwitchingState: OrgSwitchingState;
 }
@@ -206,6 +210,8 @@ export const SlashIDProvider = ({
       await __syncExternalState({ oid: newOid, initialToken: newToken });
 
       setOrgSwitchingState({ state: "idle" });
+
+      return new User(newToken, sidRef.current);
     },
     [__syncExternalState, oid, user]
   );
diff --git a/packages/react/src/context/test-providers.tsx b/packages/react/src/context/test-providers.tsx
index c7922ead..8c01d863 100644
--- a/packages/react/src/context/test-providers.tsx
+++ b/packages/react/src/context/test-providers.tsx
@@ -29,6 +29,7 @@ export const TestSlashIDProvider: React.FC<TestProviderProps> = ({
   recover,
   __switchOrganizationInContext = async () => undefined,
   __syncExternalState = async () => undefined,
+  __orgSwitchingState = { state: "idle" },
 }) => {
   const [internalUser, setInternalUser] = React.useState(user);
   const eventBufferRef = React.useRef<EventBuffer | null>(null);
@@ -86,6 +87,7 @@ export const TestSlashIDProvider: React.FC<TestProviderProps> = ({
       unsubscribe,
       __switchOrganizationInContext,
       __syncExternalState,
+      __orgSwitchingState,
     }),
     [
       sid,
@@ -99,6 +101,7 @@ export const TestSlashIDProvider: React.FC<TestProviderProps> = ({
       unsubscribe,
       __switchOrganizationInContext,
       __syncExternalState,
+      __orgSwitchingState,
     ]
   );
 
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index b914a330..3ef4942d 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -172,8 +172,6 @@ const ConfiguredDynamicFlow = () => {
 };
 
 const BasicForm = () => {
-  const { __switchOrganizationInContext, __orgSwitchingState } = useSlashID();
-
   return (
     <ConfigurationProvider
       factors={[
@@ -210,18 +208,7 @@ const BasicForm = () => {
     >
       <>
         <LoggedIn>
-          {__orgSwitchingState.state === "idle" && (
-            <button
-              onClick={() =>
-                __switchOrganizationInContext({
-                  oid: "8e669bb5-f4a7-2a3f-fec6-3d6f96f6dd26",
-                })
-              }
-            >
-              Switch org
-            </button>
-          )}
-          {__orgSwitchingState.state === "switching" && <OrgSwitchingForm />}
+          <OrgSwitchingForm oid="16b38ec1-5b48-046c-ebbb-cc15e439481" />
         </LoggedIn>
         <LoggedOut>
           <Form

From ceb3bc8b066d14e65c5dbfc6b27dc85ef2d7dcce Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Fri, 17 Jan 2025 17:32:03 +0100
Subject: [PATCH 13/31] Write unit tests

---
 .../org-switching/org-switching-form.test.tsx | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 packages/react/src/components/form/org-switching/org-switching-form.test.tsx

diff --git a/packages/react/src/components/form/org-switching/org-switching-form.test.tsx b/packages/react/src/components/form/org-switching/org-switching-form.test.tsx
new file mode 100644
index 00000000..e462e39d
--- /dev/null
+++ b/packages/react/src/components/form/org-switching/org-switching-form.test.tsx
@@ -0,0 +1,120 @@
+import { describe, it } from "vitest";
+import { createTestUser, testToken } from "../../test-utils";
+import { render, screen } from "@testing-library/react";
+import { TestSlashIDProvider } from "../../../context/test-providers";
+import { ConfigurationProvider } from "../../../context/config-context";
+import { OrgSwitchingForm } from "./org-switching-form";
+import { User } from "@slashid/slashid";
+import { SlashID } from "@slashid/slashid";
+
+describe("<OrgSwitchingForm>", () => {
+  it("should show success state after org switching", async () => {
+    const oid = "test-oid";
+    const oid2 = "test-oid2";
+    const sid = new SlashID({ oid });
+    const testUser = createTestUser({ sid });
+
+    // @ts-ignore
+    testUser._apiClient = {
+      getTokenV2: async () => {
+        return {
+          result: {
+            type: "token",
+            token: testToken,
+          },
+        };
+      },
+    };
+
+    const __switchOrganizationInContext = async ({
+      oid: newOid,
+    }: {
+      oid: string;
+    }) => {
+      const newToken = await testUser.getTokenForOrganization(newOid);
+
+      return new User(newToken, sid);
+    };
+
+    render(
+      <TestSlashIDProvider
+        sdkState="ready"
+        sid={sid}
+        user={testUser}
+        __switchOrganizationInContext={__switchOrganizationInContext}
+      >
+        <ConfigurationProvider>
+          <OrgSwitchingForm oid={oid2} />
+        </ConfigurationProvider>
+      </TestSlashIDProvider>
+    );
+
+    await expect(
+      screen.findByTestId("sid-form-success-state")
+    ).resolves.toBeInTheDocument();
+  });
+
+  it("should show OTP input", async () => {
+    const oid = "test-oid";
+    const oid2 = "test-oid2";
+    const sid = new SlashID({ oid });
+    const testUser = createTestUser({ sid });
+
+    // @ts-ignore
+    testUser._apiClient = {
+      getTokenV2: async () => {
+        return {
+          result: {
+            type: "challenge_list",
+            challenges: [
+              {
+                id: "gNbbLKbG1Zt5Ep6Wl6dpNw",
+                options: {
+                  target_org_id: "8e669bb5-f4a7-2a3f-fec6-3d6f96f6dd26",
+                  factor: {
+                    method: "otp_via_email",
+                    options: undefined,
+                  },
+                },
+                type: "authn_context_update",
+                authentication_method: "otp_via_email",
+              },
+              {
+                authentication_method: "otp_via_email",
+                id: "FZ8txUDp-iHnqUfQcTcU9g",
+                type: "otp",
+              },
+            ],
+          },
+        };
+      },
+    };
+
+    const __switchOrganizationInContext = async ({
+      oid: newOid,
+    }: {
+      oid: string;
+    }) => {
+      const newToken = await testUser.getTokenForOrganization(newOid);
+
+      return new User(newToken, sid);
+    };
+
+    render(
+      <TestSlashIDProvider
+        sdkState="ready"
+        sid={sid}
+        user={testUser}
+        __switchOrganizationInContext={__switchOrganizationInContext}
+      >
+        <ConfigurationProvider>
+          <OrgSwitchingForm oid={oid2} />
+        </ConfigurationProvider>
+      </TestSlashIDProvider>
+    );
+
+    await expect(
+      screen.findByTestId("sid-form-authenticating-otp")
+    ).resolves.toBeInTheDocument();
+  });
+});

From 0c0706fa215d3f51614b0b4d10a48ccc9e9f446b Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 23 Jan 2025 12:55:29 +0100
Subject: [PATCH 14/31] Propagate flow cancelled error upstream

---
 .../src/components/form/org-switching/org-switching-flow.ts   | 4 ++--
 packages/react/src/dev.tsx                                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/org-switching/org-switching-flow.ts
index a4e84f8d..9cd64aa1 100644
--- a/packages/react/src/components/form/org-switching/org-switching-flow.ts
+++ b/packages/react/src/components/form/org-switching/org-switching-flow.ts
@@ -153,7 +153,8 @@ const createAuthenticatingState = (
       })
       .catch((error) => {
         if (Errors.isFlowCancelledError(error)) {
-          return;
+          // propagate error when the flow is cancelled
+          throw error;
         }
         send({ type: "sid_login.error", error });
       });
@@ -422,7 +423,6 @@ export function createFlow(opts: CreateFlowOptions) {
           cancelFn();
         }
 
-        // setState(createInitialState(send), e);
         break;
       default:
         break;
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index 3ef4942d..4c057ea5 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -208,7 +208,7 @@ const BasicForm = () => {
     >
       <>
         <LoggedIn>
-          <OrgSwitchingForm oid="16b38ec1-5b48-046c-ebbb-cc15e439481" />
+          <OrgSwitchingForm oid="758e443e-d2c1-2fcc-28b5-0b94c33b5a7c" />
         </LoggedIn>
         <LoggedOut>
           <Form

From 3e1ab438a041477b081d93550bb157fa7eef922a Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Mon, 3 Feb 2025 15:18:01 +0100
Subject: [PATCH 15/31] Use suffixed token

---
 .../react/src/context/slash-id-context.tsx    | 86 +++++++++++++------
 1 file changed, 60 insertions(+), 26 deletions(-)

diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index ae239df9..d944bae8 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -136,7 +136,7 @@ export const SlashIDContext =
   createContext<ISlashIDContext>(initialContextValue);
 SlashIDContext.displayName = "SlashIDContext";
 
-const STORAGE_TOKEN_KEY = "@slashid/USER_TOKEN";
+const LEGACY_STORAGE_TOKEN_KEY = "@slashid/USER_TOKEN";
 
 const createStorage = (storageType: StorageOption) => {
   switch (storageType) {
@@ -179,6 +179,10 @@ export const SlashIDProvider = ({
     }
   );
 
+  /**
+   * Storage key for the User token (current organization).
+   */
+  const STORAGE_TOKEN_KEY = useMemo(() => `@slashid/USER_TOKEN/${oid}`, [oid]);
   /**
    * Restarts the React SDK lifecycle with a new
    * configuration, potentially for a different organization.
@@ -192,6 +196,25 @@ export const SlashIDProvider = ({
     []
   );
 
+  const validateToken = useCallback(
+    async (token: string): Promise<boolean> => {
+      const tokenUser = new User(token, sidRef.current!);
+
+      if (tokenUser?.anonymous && !anonymousUsersEnabled) {
+        return false;
+      }
+
+      try {
+        const ret = await tokenUser.validateToken();
+        return ret.valid;
+      } catch (e) {
+        console.error(e);
+        return false;
+      }
+    },
+    [anonymousUsersEnabled]
+  );
+
   /**
    * Restarts the React SDK lifecycle with a new
    * organizational context
@@ -205,7 +228,19 @@ export const SlashIDProvider = ({
         oid,
       });
 
-      const newToken = await user.getTokenForOrganization(newOid);
+      let newToken: string;
+
+      // check if a valid token for new org is in storage
+      const newOidToken = storageRef.current?.getItem(
+        `@slashid/USER_TOKEN/${newOid}`
+      );
+      const isNewOidTokenValid =
+        newOidToken && (await validateToken(newOidToken));
+      if (isNewOidTokenValid) {
+        newToken = newOidToken;
+      } else {
+        newToken = await user.getTokenForOrganization(newOid);
+      }
 
       await __syncExternalState({ oid: newOid, initialToken: newToken });
 
@@ -213,7 +248,7 @@ export const SlashIDProvider = ({
 
       return new User(newToken, sidRef.current);
     },
-    [__syncExternalState, oid, user]
+    [__syncExternalState, oid, user, validateToken]
   );
 
   const storeUser = useCallback(
@@ -229,7 +264,7 @@ export const SlashIDProvider = ({
         __switchOrganizationInContext({ oid: newUser.oid });
       }
     },
-    [state, __switchOrganizationInContext, oid]
+    [state, __switchOrganizationInContext, oid, STORAGE_TOKEN_KEY]
   );
 
   const storeAnonymousUser = useCallback(
@@ -250,7 +285,7 @@ export const SlashIDProvider = ({
         }
       }
     },
-    [analyticsEnabled, anonymousUsersEnabled, state]
+    [STORAGE_TOKEN_KEY, analyticsEnabled, anonymousUsersEnabled, state]
   );
 
   const clearAnonymousUser = useCallback(() => {
@@ -261,7 +296,7 @@ export const SlashIDProvider = ({
     storageRef.current?.removeItem(STORAGE_TOKEN_KEY);
 
     setAnonymousUser(undefined);
-  }, [anonymousUsersEnabled, state]);
+  }, [STORAGE_TOKEN_KEY, anonymousUsersEnabled, state]);
 
   const logOut = useCallback((): undefined => {
     if (state === "initial") {
@@ -286,7 +321,7 @@ export const SlashIDProvider = ({
     setUser(undefined);
     // we need to set the oid back to the root on log out
     setOid(initialOid);
-  }, [state, user, analyticsEnabled, initialOid]);
+  }, [state, user, STORAGE_TOKEN_KEY, analyticsEnabled, initialOid]);
 
   const logIn = useCallback<LogIn>(
     async (
@@ -431,25 +466,6 @@ export const SlashIDProvider = ({
     [state]
   );
 
-  const validateToken = useCallback(
-    async (token: string): Promise<boolean> => {
-      const tokenUser = new User(token, sidRef.current!);
-
-      if (tokenUser?.anonymous && !anonymousUsersEnabled) {
-        return false;
-      }
-
-      try {
-        const ret = await tokenUser.validateToken();
-        return ret.valid;
-      } catch (e) {
-        console.error(e);
-        return false;
-      }
-    },
-    [anonymousUsersEnabled]
-  );
-
   useEffect(() => {
     if (state === "initial") {
       const slashId = new SlashID({
@@ -555,6 +571,22 @@ export const SlashIDProvider = ({
       return user;
     };
 
+    const loginWithTokenFromStorageLegacyKey = async () => {
+      const tokenFromStorage = storage.getItem(LEGACY_STORAGE_TOKEN_KEY);
+      if (!tokenFromStorage) {
+        return null;
+      }
+
+      // always clean up the storage if the token is present
+      storage.removeItem(LEGACY_STORAGE_TOKEN_KEY);
+      const isValidToken = await validateToken(tokenFromStorage);
+      if (!isValidToken) {
+        return null;
+      }
+
+      return createAndStoreUserFromToken(tokenFromStorage);
+    };
+
     const createAnonymousUser = async () => {
       if (!anonymousUsersEnabled) return null;
 
@@ -571,6 +603,7 @@ export const SlashIDProvider = ({
       [
         loginWithInitialToken,
         loginWithDirectID,
+        loginWithTokenFromStorageLegacyKey,
         loginWithTokenFromStorage,
         createAnonymousUser,
       ],
@@ -582,6 +615,7 @@ export const SlashIDProvider = ({
       }
     );
   }, [
+    STORAGE_TOKEN_KEY,
     analyticsEnabled,
     anonymousUsersEnabled,
     createAndStoreUserFromToken,

From d804a8808cb4119d749c746ce56090579fab662f Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Mon, 3 Feb 2025 15:48:03 +0100
Subject: [PATCH 16/31] Adjust Remix SDK

---
 packages/remix/src/root-loader.tsx | 2 +-
 packages/remix/src/slashid-app.tsx | 2 +-
 packages/remix/src/util.ts         | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/remix/src/root-loader.tsx b/packages/remix/src/root-loader.tsx
index 02b0aaba..89d9b550 100644
--- a/packages/remix/src/root-loader.tsx
+++ b/packages/remix/src/root-loader.tsx
@@ -25,7 +25,7 @@ export const rootLoader =
   (context: RootLoaderSlashIDContext) =>
   <T extends RootAuthLoaderCallback>(callback: T = defaultCallback) =>
   async (args: LoaderFunctionArgs): Promise<ReturnType<T>> => {
-    const token = getUserTokenFromCookies(args.request.headers.get("cookie"));
+    const token = getUserTokenFromCookies(args.request.headers.get("cookie"), context.oid);
 
     const verified = await verifyToken({
       token,
diff --git a/packages/remix/src/slashid-app.tsx b/packages/remix/src/slashid-app.tsx
index 90628bd1..870aa40f 100644
--- a/packages/remix/src/slashid-app.tsx
+++ b/packages/remix/src/slashid-app.tsx
@@ -64,7 +64,7 @@ export const createSlashIDApp = (options: SlashIDAppOptions) => {
   const slashIDLoader =
     (loader: LoaderFunction) => (args: LoaderFunctionArgs) => {
       const cookies = args.request.headers.get("cookie");
-      const token = getUserTokenFromCookies(cookies);
+      const token = getUserTokenFromCookies(cookies, opts.oid);
 
       if (!token) return loader(args);
 
diff --git a/packages/remix/src/util.ts b/packages/remix/src/util.ts
index 57e0ae2f..ff1e2edb 100644
--- a/packages/remix/src/util.ts
+++ b/packages/remix/src/util.ts
@@ -43,7 +43,8 @@ export function assertCallbackResult(
 }
 
 export const getUserTokenFromCookies = (
-  cookies: string | null
+  cookies: string | null,
+  oid: string
 ): string | undefined => {
   if (!cookies) return undefined;
 
@@ -63,7 +64,7 @@ export const getUserTokenFromCookies = (
       };
     }, {});
 
-  const STORAGE_KEY = "@slashid/USER_TOKEN";
+  const STORAGE_KEY = `@slashid/USER_TOKEN/${oid}`;
 
   return all[STORAGE_KEY];
 };

From bf5b2dee1af663ebc823d163c22c86a21fc0e3c1 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 4 Feb 2025 12:35:37 +0100
Subject: [PATCH 17/31] whitespace

---
 packages/react/src/components/form/event-buffer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/event-buffer.ts b/packages/react/src/components/form/event-buffer.ts
index a3eb4f01..5093c3d3 100644
--- a/packages/react/src/components/form/event-buffer.ts
+++ b/packages/react/src/components/form/event-buffer.ts
@@ -24,7 +24,7 @@ export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
 
   // listen to all the SDK events on init
   Utils.PUBLIC_READ_EVENTS.forEach((publicReadEventName: EventNames) => {
-    // create an event handler 
+    // create an event handler
     const handler = (event: Event) => {
       if (
         subscribers.has(publicReadEventName) &&

From 71c4dd14584ecec43a48dcdacf5130d3b32a1b4b Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 4 Feb 2025 17:56:40 +0100
Subject: [PATCH 18/31] Write unit tests for org suffix

---
 .../react/src/context/slash-id-context.tsx    |  7 +-
 .../react/src/tests/anonymous-users.test.tsx  |  3 +-
 .../react/src/tests/token-storage.test.tsx    | 71 +++++++++++++++++++
 3 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 packages/react/src/tests/token-storage.test.tsx

diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index d944bae8..e7601752 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -136,7 +136,10 @@ export const SlashIDContext =
   createContext<ISlashIDContext>(initialContextValue);
 SlashIDContext.displayName = "SlashIDContext";
 
-const LEGACY_STORAGE_TOKEN_KEY = "@slashid/USER_TOKEN";
+export const LEGACY_STORAGE_TOKEN_KEY = "@slashid/USER_TOKEN";
+
+export const NEW_STORAGE_TOKEN_KEY = (oid: string) =>
+  `${LEGACY_STORAGE_TOKEN_KEY}/${oid}`;
 
 const createStorage = (storageType: StorageOption) => {
   switch (storageType) {
@@ -182,7 +185,7 @@ export const SlashIDProvider = ({
   /**
    * Storage key for the User token (current organization).
    */
-  const STORAGE_TOKEN_KEY = useMemo(() => `@slashid/USER_TOKEN/${oid}`, [oid]);
+  const STORAGE_TOKEN_KEY = useMemo(() => NEW_STORAGE_TOKEN_KEY(oid), [oid]);
   /**
    * Restarts the React SDK lifecycle with a new
    * configuration, potentially for a different organization.
diff --git a/packages/react/src/tests/anonymous-users.test.tsx b/packages/react/src/tests/anonymous-users.test.tsx
index d5a9f0b7..123e7450 100644
--- a/packages/react/src/tests/anonymous-users.test.tsx
+++ b/packages/react/src/tests/anonymous-users.test.tsx
@@ -4,6 +4,7 @@ import { renderHook, waitFor } from "@testing-library/react";
 import { useSlashID, SlashIDProvider } from "../main";
 import { createAnonymousTestUser } from "../components/test-utils";
 import { SlashID } from "@slashid/slashid";
+import { NEW_STORAGE_TOKEN_KEY } from "../context/slash-id-context";
 
 describe("Anonymous users", () => {
   afterEach(() => {
@@ -55,7 +56,7 @@ describe("Anonymous users", () => {
     const TEST_ROOT_OID = "oid_1";
 
     const anonUser = createAnonymousTestUser({ oid: TEST_ROOT_OID });
-    localStorage.setItem("@slashid/USER_TOKEN", anonUser.token);
+    localStorage.setItem(NEW_STORAGE_TOKEN_KEY(TEST_ROOT_OID), anonUser.token);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const wrapper = ({ children }: PropsWithChildren<any>) => (
       <SlashIDProvider oid={TEST_ROOT_OID} anonymousUsersEnabled>
diff --git a/packages/react/src/tests/token-storage.test.tsx b/packages/react/src/tests/token-storage.test.tsx
new file mode 100644
index 00000000..b19cccbc
--- /dev/null
+++ b/packages/react/src/tests/token-storage.test.tsx
@@ -0,0 +1,71 @@
+import { render, waitFor } from "@testing-library/react";
+import { Form, SlashIDProvider } from "../main";
+import { createTestUser, TEST_ORG_ID } from "../components/test-utils";
+import {
+  LEGACY_STORAGE_TOKEN_KEY,
+  NEW_STORAGE_TOKEN_KEY,
+} from "../context/slash-id-context";
+
+describe("token storage key with org id suffix", () => {
+  const getItemSpy = vi.spyOn(Storage.prototype, "getItem");
+  const setItemSpy = vi.spyOn(Storage.prototype, "setItem");
+  const removeItemSpy = vi.spyOn(Storage.prototype, "removeItem");
+
+  afterEach(() => {
+    localStorage.clear();
+    getItemSpy.mockClear();
+    setItemSpy.mockClear();
+    removeItemSpy.mockClear();
+  });
+
+  it("should use the token from localStorage", async () => {
+    const testUser = createTestUser({ oid: TEST_ORG_ID });
+    localStorage.setItem(NEW_STORAGE_TOKEN_KEY(TEST_ORG_ID), testUser.token);
+
+    render(
+      <SlashIDProvider
+        oid={TEST_ORG_ID}
+        tokenStorage="localStorage"
+        analyticsEnabled={false}
+      >
+        <Form />
+      </SlashIDProvider>
+    );
+
+    await waitFor(() =>
+      expect(getItemSpy).toHaveBeenCalledWith(
+        NEW_STORAGE_TOKEN_KEY(TEST_ORG_ID)
+      )
+    );
+  });
+
+  it("should replace legacy token key with new one", async () => {
+    const testUser = createTestUser({ oid: TEST_ORG_ID });
+    localStorage.setItem(LEGACY_STORAGE_TOKEN_KEY, testUser.token);
+
+    render(
+      <SlashIDProvider
+        oid={TEST_ORG_ID}
+        tokenStorage="localStorage"
+        analyticsEnabled={false}
+      >
+        <Form />
+      </SlashIDProvider>
+    );
+
+    await waitFor(() =>
+      expect(getItemSpy).toHaveBeenCalledWith(LEGACY_STORAGE_TOKEN_KEY)
+    );
+
+    await waitFor(() =>
+      expect(setItemSpy).toHaveBeenCalledWith(
+        NEW_STORAGE_TOKEN_KEY(TEST_ORG_ID),
+        testUser.token
+      )
+    );
+
+    await waitFor(() =>
+      expect(removeItemSpy).toHaveBeenCalledWith(LEGACY_STORAGE_TOKEN_KEY)
+    );
+  });
+});

From 60d15638cda496830a069ec1c0053921635170a5 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Wed, 5 Feb 2025 13:48:12 +0100
Subject: [PATCH 19/31] Fix dev file

---
 packages/react/.env        |  3 ++-
 packages/react/src/dev.tsx | 46 ++++++++++++++++++++++++++++----------
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/react/.env b/packages/react/.env
index 0eed0bfe..698b2405 100644
--- a/packages/react/.env
+++ b/packages/react/.env
@@ -1 +1,2 @@
-VITE_ORG_ID=
\ No newline at end of file
+VITE_ORG_ID=
+VITE_ORG_SWITCHING_ORG_ID=
\ No newline at end of file
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index 4c057ea5..98aaeda1 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -206,18 +206,34 @@ const BasicForm = () => {
       supportURL="https://www.google.com"
       alternativeAuthURL="https://www.google.com"
     >
-      <>
-        <LoggedIn>
-          <OrgSwitchingForm oid="758e443e-d2c1-2fcc-28b5-0b94c33b5a7c" />
-        </LoggedIn>
-        <LoggedOut>
-          <Form
-            onError={(error, context) =>
-              console.log("onError", { error, context })
-            }
-          />
-        </LoggedOut>
-      </>
+      <SlashIDLoaded>
+        <>
+          <LoggedIn>
+            MFA
+            <Form factors={[{ method: "totp" }]} />
+          </LoggedIn>
+          <LoggedOut>
+            <Form
+              onError={(error, context) =>
+                console.log("onError", { error, context })
+              }
+            />
+          </LoggedOut>
+        </>
+      </SlashIDLoaded>
+    </ConfigurationProvider>
+  );
+};
+
+const ImmediateOrgSwitchForm = () => {
+  return (
+    <ConfigurationProvider>
+      <LoggedIn>
+        <OrgSwitchingForm oid={import.meta.env.VITE_ORG_SWITCHING_ORG_ID} />
+      </LoggedIn>
+      <LoggedOut>
+        <Form />
+      </LoggedOut>
     </ConfigurationProvider>
   );
 };
@@ -363,6 +379,12 @@ root.render(
             <ConfiguredDynamicFlow />
           </div>
         </div>
+        <div>
+          <div>
+            <h2>Immediate org switch</h2>
+            <ImmediateOrgSwitchForm />
+          </div>
+        </div>
       </div>
 
       <div className="states">

From e3f9e81f0256f18cefc4afc4c9f23033c3db3677 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Wed, 5 Feb 2025 13:55:43 +0100
Subject: [PATCH 20/31] Apply changes based on code review feedback

---
 .../react/src/context/slash-id-context.tsx    | 34 +++++++++----------
 .../react/src/tests/anonymous-users.test.tsx  |  4 +--
 .../react/src/tests/token-storage.test.tsx    | 10 +++---
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index e7601752..0332fe06 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -138,7 +138,7 @@ SlashIDContext.displayName = "SlashIDContext";
 
 export const LEGACY_STORAGE_TOKEN_KEY = "@slashid/USER_TOKEN";
 
-export const NEW_STORAGE_TOKEN_KEY = (oid: string) =>
+export const STORAGE_TOKEN_KEY = (oid: string) =>
   `${LEGACY_STORAGE_TOKEN_KEY}/${oid}`;
 
 const createStorage = (storageType: StorageOption) => {
@@ -182,10 +182,10 @@ export const SlashIDProvider = ({
     }
   );
 
-  /**
-   * Storage key for the User token (current organization).
-   */
-  const STORAGE_TOKEN_KEY = useMemo(() => NEW_STORAGE_TOKEN_KEY(oid), [oid]);
+  const currentOrgStorageTokenKey = useMemo(
+    () => STORAGE_TOKEN_KEY(oid),
+    [oid]
+  );
   /**
    * Restarts the React SDK lifecycle with a new
    * configuration, potentially for a different organization.
@@ -235,7 +235,7 @@ export const SlashIDProvider = ({
 
       // check if a valid token for new org is in storage
       const newOidToken = storageRef.current?.getItem(
-        `@slashid/USER_TOKEN/${newOid}`
+        STORAGE_TOKEN_KEY(newOid)
       );
       const isNewOidTokenValid =
         newOidToken && (await validateToken(newOidToken));
@@ -261,13 +261,13 @@ export const SlashIDProvider = ({
       }
 
       setUser(newUser);
-      storageRef.current?.setItem(STORAGE_TOKEN_KEY, newUser.token);
+      storageRef.current?.setItem(currentOrgStorageTokenKey, newUser.token);
 
       if (newUser.oid !== oid) {
         __switchOrganizationInContext({ oid: newUser.oid });
       }
     },
-    [state, __switchOrganizationInContext, oid, STORAGE_TOKEN_KEY]
+    [state, __switchOrganizationInContext, oid, currentOrgStorageTokenKey]
   );
 
   const storeAnonymousUser = useCallback(
@@ -277,7 +277,7 @@ export const SlashIDProvider = ({
       }
 
       setAnonymousUser(anonUser);
-      storageRef.current?.setItem(STORAGE_TOKEN_KEY, anonUser.token);
+      storageRef.current?.setItem(currentOrgStorageTokenKey, anonUser.token);
 
       if (analyticsEnabled) {
         try {
@@ -288,7 +288,7 @@ export const SlashIDProvider = ({
         }
       }
     },
-    [STORAGE_TOKEN_KEY, analyticsEnabled, anonymousUsersEnabled, state]
+    [currentOrgStorageTokenKey, analyticsEnabled, anonymousUsersEnabled, state]
   );
 
   const clearAnonymousUser = useCallback(() => {
@@ -296,10 +296,10 @@ export const SlashIDProvider = ({
       return;
     }
 
-    storageRef.current?.removeItem(STORAGE_TOKEN_KEY);
+    storageRef.current?.removeItem(currentOrgStorageTokenKey);
 
     setAnonymousUser(undefined);
-  }, [STORAGE_TOKEN_KEY, anonymousUsersEnabled, state]);
+  }, [currentOrgStorageTokenKey, anonymousUsersEnabled, state]);
 
   const logOut = useCallback((): undefined => {
     if (state === "initial") {
@@ -310,7 +310,7 @@ export const SlashIDProvider = ({
       return;
     }
 
-    storageRef.current?.removeItem(STORAGE_TOKEN_KEY);
+    storageRef.current?.removeItem(currentOrgStorageTokenKey);
 
     if (analyticsEnabled) {
       try {
@@ -324,7 +324,7 @@ export const SlashIDProvider = ({
     setUser(undefined);
     // we need to set the oid back to the root on log out
     setOid(initialOid);
-  }, [state, user, STORAGE_TOKEN_KEY, analyticsEnabled, initialOid]);
+  }, [state, user, currentOrgStorageTokenKey, analyticsEnabled, initialOid]);
 
   const logIn = useCallback<LogIn>(
     async (
@@ -547,13 +547,13 @@ export const SlashIDProvider = ({
     };
 
     const loginWithTokenFromStorage = async () => {
-      const tokenFromStorage = storage.getItem(STORAGE_TOKEN_KEY);
+      const tokenFromStorage = storage.getItem(currentOrgStorageTokenKey);
 
       const isValidToken =
         tokenFromStorage && (await validateToken(tokenFromStorage));
 
       if (!isValidToken) {
-        storage.removeItem(STORAGE_TOKEN_KEY);
+        storage.removeItem(currentOrgStorageTokenKey);
 
         return null;
       }
@@ -618,7 +618,7 @@ export const SlashIDProvider = ({
       }
     );
   }, [
-    STORAGE_TOKEN_KEY,
+    currentOrgStorageTokenKey,
     analyticsEnabled,
     anonymousUsersEnabled,
     createAndStoreUserFromToken,
diff --git a/packages/react/src/tests/anonymous-users.test.tsx b/packages/react/src/tests/anonymous-users.test.tsx
index 123e7450..1ef9e9ad 100644
--- a/packages/react/src/tests/anonymous-users.test.tsx
+++ b/packages/react/src/tests/anonymous-users.test.tsx
@@ -4,7 +4,7 @@ import { renderHook, waitFor } from "@testing-library/react";
 import { useSlashID, SlashIDProvider } from "../main";
 import { createAnonymousTestUser } from "../components/test-utils";
 import { SlashID } from "@slashid/slashid";
-import { NEW_STORAGE_TOKEN_KEY } from "../context/slash-id-context";
+import { STORAGE_TOKEN_KEY } from "../context/slash-id-context";
 
 describe("Anonymous users", () => {
   afterEach(() => {
@@ -56,7 +56,7 @@ describe("Anonymous users", () => {
     const TEST_ROOT_OID = "oid_1";
 
     const anonUser = createAnonymousTestUser({ oid: TEST_ROOT_OID });
-    localStorage.setItem(NEW_STORAGE_TOKEN_KEY(TEST_ROOT_OID), anonUser.token);
+    localStorage.setItem(STORAGE_TOKEN_KEY(TEST_ROOT_OID), anonUser.token);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const wrapper = ({ children }: PropsWithChildren<any>) => (
       <SlashIDProvider oid={TEST_ROOT_OID} anonymousUsersEnabled>
diff --git a/packages/react/src/tests/token-storage.test.tsx b/packages/react/src/tests/token-storage.test.tsx
index b19cccbc..b51ee881 100644
--- a/packages/react/src/tests/token-storage.test.tsx
+++ b/packages/react/src/tests/token-storage.test.tsx
@@ -3,7 +3,7 @@ import { Form, SlashIDProvider } from "../main";
 import { createTestUser, TEST_ORG_ID } from "../components/test-utils";
 import {
   LEGACY_STORAGE_TOKEN_KEY,
-  NEW_STORAGE_TOKEN_KEY,
+  STORAGE_TOKEN_KEY,
 } from "../context/slash-id-context";
 
 describe("token storage key with org id suffix", () => {
@@ -20,7 +20,7 @@ describe("token storage key with org id suffix", () => {
 
   it("should use the token from localStorage", async () => {
     const testUser = createTestUser({ oid: TEST_ORG_ID });
-    localStorage.setItem(NEW_STORAGE_TOKEN_KEY(TEST_ORG_ID), testUser.token);
+    localStorage.setItem(STORAGE_TOKEN_KEY(TEST_ORG_ID), testUser.token);
 
     render(
       <SlashIDProvider
@@ -33,9 +33,7 @@ describe("token storage key with org id suffix", () => {
     );
 
     await waitFor(() =>
-      expect(getItemSpy).toHaveBeenCalledWith(
-        NEW_STORAGE_TOKEN_KEY(TEST_ORG_ID)
-      )
+      expect(getItemSpy).toHaveBeenCalledWith(STORAGE_TOKEN_KEY(TEST_ORG_ID))
     );
   });
 
@@ -59,7 +57,7 @@ describe("token storage key with org id suffix", () => {
 
     await waitFor(() =>
       expect(setItemSpy).toHaveBeenCalledWith(
-        NEW_STORAGE_TOKEN_KEY(TEST_ORG_ID),
+        STORAGE_TOKEN_KEY(TEST_ORG_ID),
         testUser.token
       )
     );

From 832278d0ea14b5fb030914d7d5c5e4623f41b811 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Wed, 5 Feb 2025 13:58:14 +0100
Subject: [PATCH 21/31] Add a separate changeset for token storage changes

---
 .changeset/late-peas-turn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/late-peas-turn.md

diff --git a/.changeset/late-peas-turn.md b/.changeset/late-peas-turn.md
new file mode 100644
index 00000000..e658ebe1
--- /dev/null
+++ b/.changeset/late-peas-turn.md
@@ -0,0 +1,5 @@
+---
+"@slashid/react": minor
+---
+
+Store user tokens for multiple organizations, suffixed with org ID

From cf1708a562eb55fe497cb3a01186ca2560c2a129 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 6 Feb 2025 11:54:50 +0100
Subject: [PATCH 22/31] Fix logout behaviour, debug switching WIP

---
 packages/react/package.json                   |  2 +-
 .../components/form/authenticating/index.tsx  | 12 +++
 .../react/src/components/form/event-buffer.ts |  3 +
 .../react/src/context/slash-id-context.tsx    | 21 ++--
 packages/react/src/dev.tsx                    | 95 +++++++++++--------
 5 files changed, 87 insertions(+), 46 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 8ed33581..a8d721e0 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@slashid/react",
-  "version": "1.31.4",
+  "version": "1.31.5-org-switching-flow.3",
   "private": false,
   "publishConfig": {
     "access": "public"
diff --git a/packages/react/src/components/form/authenticating/index.tsx b/packages/react/src/components/form/authenticating/index.tsx
index 7f60e5fc..211154ea 100644
--- a/packages/react/src/components/form/authenticating/index.tsx
+++ b/packages/react/src/components/form/authenticating/index.tsx
@@ -142,6 +142,14 @@ export const AuthenticatingImplementation = ({
   const [establishedAuthContext, setEstablishedAuthContext] = useState(false);
   const { subscribe, unsubscribe } = useSlashID();
 
+  console.log({
+    flowState,
+    establishedAuthContext,
+    factor,
+    attempt,
+    isLoggingIn,
+  });
+
   useEffect(() => {
     if (flowState.context.attempt > attempt.current) {
       attempt.current = flowState.context.attempt;
@@ -153,6 +161,7 @@ export const AuthenticatingImplementation = ({
     const handleAuthnContextUpdate = (
       event: AuthnContextUpdateChallengeReceivedEvent
     ) => {
+      console.log("handler - updating ctx");
       flowState.updateContext({
         attempt: flowState.context.attempt,
         options: flowState.context.options,
@@ -161,11 +170,14 @@ export const AuthenticatingImplementation = ({
           handle: flowState.context.config.handle,
         },
       });
+      console.log("handler - unsubscribe");
 
       unsubscribe(
         "authnContextUpdateChallengeReceivedEvent",
         handleAuthnContextUpdate
       );
+      console.log("handler - setEstablishedCtx");
+
       setEstablishedAuthContext(true);
     };
 
diff --git a/packages/react/src/components/form/event-buffer.ts b/packages/react/src/components/form/event-buffer.ts
index 5093c3d3..81425d33 100644
--- a/packages/react/src/components/form/event-buffer.ts
+++ b/packages/react/src/components/form/event-buffer.ts
@@ -18,6 +18,7 @@ export type EventBuffer = {
 };
 
 export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
+  console.log("createEventBuffer");
   const buffer: Map<EventNames, Event[]> = new Map();
   const internalHandlers: Map<EventNames, EventCallback> = new Map();
   const subscribers: Map<EventNames, EventCallback[]> = new Map();
@@ -57,6 +58,7 @@ export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
    * Event will be consumed and removed from the buffer.
    */
   function subscribe(eventType: EventNames, callback: EventCallback) {
+    console.log("buffer subscribe", eventType);
     sdk.subscribe(eventType, callback);
 
     // add to our list of subscribers
@@ -80,6 +82,7 @@ export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
    * This way we know when to buffer (only when there are no subscribers to the given event).
    */
   function unsubscribe(eventType: EventNames, callback: EventCallback) {
+    console.log("buffer unsubscribe", eventType);
     sdk.unsubscribe(eventType, callback);
 
     if (!subscribers.has(eventType) || !subscribers.get(eventType)?.length) {
diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index 0332fe06..531bfe36 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -262,12 +262,8 @@ export const SlashIDProvider = ({
 
       setUser(newUser);
       storageRef.current?.setItem(currentOrgStorageTokenKey, newUser.token);
-
-      if (newUser.oid !== oid) {
-        __switchOrganizationInContext({ oid: newUser.oid });
-      }
     },
-    [state, __switchOrganizationInContext, oid, currentOrgStorageTokenKey]
+    [state, currentOrgStorageTokenKey]
   );
 
   const storeAnonymousUser = useCallback(
@@ -310,7 +306,13 @@ export const SlashIDProvider = ({
       return;
     }
 
-    storageRef.current?.removeItem(currentOrgStorageTokenKey);
+    Object.entries(storageRef.current!).forEach(([k, v]) => {
+      if (k.startsWith(LEGACY_STORAGE_TOKEN_KEY)) {
+        storageRef.current?.removeItem(k);
+        const tempUser = new User(v, sidRef.current);
+        tempUser.logout();
+      }
+    });
 
     if (analyticsEnabled) {
       try {
@@ -320,11 +322,10 @@ export const SlashIDProvider = ({
       }
     }
 
-    user.logout();
     setUser(undefined);
     // we need to set the oid back to the root on log out
     setOid(initialOid);
-  }, [state, user, currentOrgStorageTokenKey, analyticsEnabled, initialOid]);
+  }, [state, user, analyticsEnabled, initialOid]);
 
   const logIn = useCallback<LogIn>(
     async (
@@ -429,6 +430,8 @@ export const SlashIDProvider = ({
 
   const subscribe = useCallback<Subscribe>(
     (event, handler) => {
+      console.log("context subscribe", event);
+
       if (state === "initial") {
         return;
       }
@@ -450,6 +453,8 @@ export const SlashIDProvider = ({
 
   const unsubscribe = useCallback<Unsubscribe>(
     (event, handler) => {
+      console.log("context unsubscribe", event);
+
       if (state === "initial") {
         return;
       }
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index 98aaeda1..822f156c 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -226,10 +226,29 @@ const BasicForm = () => {
 };
 
 const ImmediateOrgSwitchForm = () => {
+  const [switching, setSwitching] = useState(false);
+
+  const { sid } = useSlashID();
+
+  useEffect(() => {
+    sid?.subscribe("authnContextUpdateChallengeReceivedEvent", console.log);
+
+    return () => {
+      sid?.unsubscribe("authnContextUpdateChallengeReceivedEvent", console.log);
+    };
+  }, [sid]);
+
   return (
     <ConfigurationProvider>
       <LoggedIn>
-        <OrgSwitchingForm oid={import.meta.env.VITE_ORG_SWITCHING_ORG_ID} />
+        {switching ? (
+          <OrgSwitchingForm
+            oid={import.meta.env.VITE_ORG_SWITCHING_ORG_ID}
+            onSuccess={() => setSwitching(false)}
+          />
+        ) : (
+          <button onClick={() => setSwitching(true)}>Switch</button>
+        )}
       </LoggedIn>
       <LoggedOut>
         <Form />
@@ -341,6 +360,41 @@ const LogOut = () => {
   );
 };
 
+const States = () => (
+  <div className="states">
+    {(() => {
+      const forcedEmailMagicLinkLoadingState: AuthenticatingState = {
+        status: "authenticating",
+        context: {
+          config: {
+            handle: {
+              type: "email_address",
+              value: "foo@world.com",
+            },
+            factor: {
+              method: "email_link",
+            },
+          },
+          attempt: 1,
+        },
+        retry: () => {},
+        cancel: () => {},
+        recover: () => {},
+        logIn: () => {},
+        updateContext: () => {},
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        setRecoveryCodes: (_code: string[]) => {},
+      };
+
+      return (
+        <ConfigurationProvider>
+          <Authenticating flowState={forcedEmailMagicLinkLoadingState} />
+        </ConfigurationProvider>
+      );
+    })()}
+  </div>
+);
+
 const container = document.getElementById("root") as HTMLElement;
 const root = ReactDOM.createRoot(container);
 root.render(
@@ -351,7 +405,6 @@ root.render(
       tokenStorage="localStorage"
       analyticsEnabled={false}
       environment="sandbox"
-      anonymousUsersEnabled
       // environment={{
       //   baseURL: "https://api.slashid.local",
       //   sdkURL: "https://jump.slashid.local/sdk.html",
@@ -359,7 +412,7 @@ root.render(
     >
       <LogOut />
       <div className="layout">
-        <div>
+        {/* <div>
           <div>
             <h2>Basic form</h2>
             <BasicForm />
@@ -378,7 +431,7 @@ root.render(
             <h2>Dynamic flow - factor based on handle</h2>
             <ConfiguredDynamicFlow />
           </div>
-        </div>
+        </div> */}
         <div>
           <div>
             <h2>Immediate org switch</h2>
@@ -386,39 +439,7 @@ root.render(
           </div>
         </div>
       </div>
-
-      <div className="states">
-        {(() => {
-          const forcedEmailMagicLinkLoadingState: AuthenticatingState = {
-            status: "authenticating",
-            context: {
-              config: {
-                handle: {
-                  type: "email_address",
-                  value: "foo@world.com",
-                },
-                factor: {
-                  method: "email_link",
-                },
-              },
-              attempt: 1,
-            },
-            retry: () => {},
-            cancel: () => {},
-            recover: () => {},
-            logIn: () => {},
-            updateContext: () => {},
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            setRecoveryCodes: (_code: string[]) => {},
-          };
-
-          return (
-            <ConfigurationProvider>
-              <Authenticating flowState={forcedEmailMagicLinkLoadingState} />
-            </ConfigurationProvider>
-          );
-        })()}
-      </div>
+      {/* <States /> */}
     </SlashIDProvider>
   </React.StrictMode>
 );

From d7d2329fbd2cfdf7356f43984191394c81c0ba00 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 6 Feb 2025 13:06:21 +0100
Subject: [PATCH 23/31] Remove the logs, store user on switch

---
 packages/react/package.json                   |  2 +-
 .../components/form/authenticating/index.tsx  | 11 -----
 .../react/src/components/form/event-buffer.ts |  3 --
 .../react/src/context/slash-id-context.tsx    | 49 ++++++++++---------
 4 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index a8d721e0..8ed33581 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@slashid/react",
-  "version": "1.31.5-org-switching-flow.3",
+  "version": "1.31.4",
   "private": false,
   "publishConfig": {
     "access": "public"
diff --git a/packages/react/src/components/form/authenticating/index.tsx b/packages/react/src/components/form/authenticating/index.tsx
index 211154ea..9887b174 100644
--- a/packages/react/src/components/form/authenticating/index.tsx
+++ b/packages/react/src/components/form/authenticating/index.tsx
@@ -142,14 +142,6 @@ export const AuthenticatingImplementation = ({
   const [establishedAuthContext, setEstablishedAuthContext] = useState(false);
   const { subscribe, unsubscribe } = useSlashID();
 
-  console.log({
-    flowState,
-    establishedAuthContext,
-    factor,
-    attempt,
-    isLoggingIn,
-  });
-
   useEffect(() => {
     if (flowState.context.attempt > attempt.current) {
       attempt.current = flowState.context.attempt;
@@ -161,7 +153,6 @@ export const AuthenticatingImplementation = ({
     const handleAuthnContextUpdate = (
       event: AuthnContextUpdateChallengeReceivedEvent
     ) => {
-      console.log("handler - updating ctx");
       flowState.updateContext({
         attempt: flowState.context.attempt,
         options: flowState.context.options,
@@ -170,13 +161,11 @@ export const AuthenticatingImplementation = ({
           handle: flowState.context.config.handle,
         },
       });
-      console.log("handler - unsubscribe");
 
       unsubscribe(
         "authnContextUpdateChallengeReceivedEvent",
         handleAuthnContextUpdate
       );
-      console.log("handler - setEstablishedCtx");
 
       setEstablishedAuthContext(true);
     };
diff --git a/packages/react/src/components/form/event-buffer.ts b/packages/react/src/components/form/event-buffer.ts
index 81425d33..5093c3d3 100644
--- a/packages/react/src/components/form/event-buffer.ts
+++ b/packages/react/src/components/form/event-buffer.ts
@@ -18,7 +18,6 @@ export type EventBuffer = {
 };
 
 export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
-  console.log("createEventBuffer");
   const buffer: Map<EventNames, Event[]> = new Map();
   const internalHandlers: Map<EventNames, EventCallback> = new Map();
   const subscribers: Map<EventNames, EventCallback[]> = new Map();
@@ -58,7 +57,6 @@ export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
    * Event will be consumed and removed from the buffer.
    */
   function subscribe(eventType: EventNames, callback: EventCallback) {
-    console.log("buffer subscribe", eventType);
     sdk.subscribe(eventType, callback);
 
     // add to our list of subscribers
@@ -82,7 +80,6 @@ export function createEventBuffer({ sdk }: CreateEventBufferArgs): EventBuffer {
    * This way we know when to buffer (only when there are no subscribers to the given event).
    */
   function unsubscribe(eventType: EventNames, callback: EventCallback) {
-    console.log("buffer unsubscribe", eventType);
     sdk.unsubscribe(eventType, callback);
 
     if (!subscribers.has(eventType) || !subscribers.get(eventType)?.length) {
diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index 531bfe36..4965afb2 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -218,6 +218,18 @@ export const SlashIDProvider = ({
     [anonymousUsersEnabled]
   );
 
+  const storeUser = useCallback(
+    (newUser: User) => {
+      if (state === "initial") {
+        return;
+      }
+
+      setUser(newUser);
+      storageRef.current?.setItem(currentOrgStorageTokenKey, newUser.token);
+    },
+    [state, currentOrgStorageTokenKey]
+  );
+
   /**
    * Restarts the React SDK lifecycle with a new
    * organizational context
@@ -245,25 +257,16 @@ export const SlashIDProvider = ({
         newToken = await user.getTokenForOrganization(newOid);
       }
 
-      await __syncExternalState({ oid: newOid, initialToken: newToken });
-
+      setToken(newToken);
+      setOid(newOid);
       setOrgSwitchingState({ state: "idle" });
 
-      return new User(newToken, sidRef.current);
-    },
-    [__syncExternalState, oid, user, validateToken]
-  );
-
-  const storeUser = useCallback(
-    (newUser: User) => {
-      if (state === "initial") {
-        return;
-      }
+      const newUser = new User(newToken, sidRef.current);
+      storeUser(newUser);
 
-      setUser(newUser);
-      storageRef.current?.setItem(currentOrgStorageTokenKey, newUser.token);
+      return new User(newToken, sidRef.current);
     },
-    [state, currentOrgStorageTokenKey]
+    [oid, storeUser, user, validateToken]
   );
 
   const storeAnonymousUser = useCallback(
@@ -306,10 +309,14 @@ export const SlashIDProvider = ({
       return;
     }
 
-    Object.entries(storageRef.current!).forEach(([k, v]) => {
-      if (k.startsWith(LEGACY_STORAGE_TOKEN_KEY)) {
-        storageRef.current?.removeItem(k);
-        const tempUser = new User(v, sidRef.current);
+    // search storage for user tokens
+    Object.entries(storageRef.current!).forEach(([key, maybeToken]) => {
+      // check if the storage entry is a user token
+      if (key.startsWith(LEGACY_STORAGE_TOKEN_KEY)) {
+        // remove the entry
+        storageRef.current?.removeItem(key);
+        // revoke removed token
+        const tempUser = new User(maybeToken, sidRef.current);
         tempUser.logout();
       }
     });
@@ -430,8 +437,6 @@ export const SlashIDProvider = ({
 
   const subscribe = useCallback<Subscribe>(
     (event, handler) => {
-      console.log("context subscribe", event);
-
       if (state === "initial") {
         return;
       }
@@ -453,8 +458,6 @@ export const SlashIDProvider = ({
 
   const unsubscribe = useCallback<Unsubscribe>(
     (event, handler) => {
-      console.log("context unsubscribe", event);
-
       if (state === "initial") {
         return;
       }

From bdbfc86ecce8e5176c76a874c650d172fb6a8fac Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 6 Feb 2025 14:39:17 +0100
Subject: [PATCH 24/31] Get most recent user handle for the org switching flow

---
 .../src/components/form/authenticating/index.tsx |  1 -
 .../form/org-switching/org-switching-flow.ts     |  3 +++
 .../org-switching/useOrgSwitchingFlowState.ts    | 15 +++++++++++++--
 packages/react/src/dev.tsx                       | 16 +++-------------
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/components/form/authenticating/index.tsx b/packages/react/src/components/form/authenticating/index.tsx
index 9887b174..7f60e5fc 100644
--- a/packages/react/src/components/form/authenticating/index.tsx
+++ b/packages/react/src/components/form/authenticating/index.tsx
@@ -166,7 +166,6 @@ export const AuthenticatingImplementation = ({
         "authnContextUpdateChallengeReceivedEvent",
         handleAuthnContextUpdate
       );
-
       setEstablishedAuthContext(true);
     };
 
diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/org-switching/org-switching-flow.ts
index 9cd64aa1..0093c955 100644
--- a/packages/react/src/components/form/org-switching/org-switching-flow.ts
+++ b/packages/react/src/components/form/org-switching/org-switching-flow.ts
@@ -8,6 +8,7 @@ import {
   LoginOptions,
   Recover,
   RetryPolicy,
+  Handle,
 } from "../../../domain/types";
 import { ensureError } from "../../../domain/errors";
 import { isFactorRecoverable } from "../../../domain/handles";
@@ -263,6 +264,7 @@ export type CreateFlowOptions = {
   logInFn?: LogIn | MFA;
   recover?: Recover;
   cancelFn?: Cancel;
+  lastUserHandle?: Handle;
 };
 
 type HistoryEntry = {
@@ -315,6 +317,7 @@ export function createFlow(opts: CreateFlowOptions) {
         factor: {
           method: "email_link",
         },
+        handle: opts.lastUserHandle,
       },
       attempt: 0,
     },
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index c104b8df..b28f05d9 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useSlashID } from "../../../hooks/use-slash-id";
 import {
@@ -7,12 +7,23 @@ import {
   FlowState,
   CreateFlowOptions,
 } from "./org-switching-flow";
+import { Handle } from "../../../domain/types";
 
 export function useOrgSwitchingFlowState(opts: CreateFlowOptions) {
-  const { recover, sid, __switchOrganizationInContext } = useSlashID();
+  const { recover, sid, __switchOrganizationInContext, user } = useSlashID();
+
+  const lastUserHandle = useMemo<Handle | undefined>(() => {
+    if (!user) return undefined;
+
+    const recentAuthentication = user.authentications[0];
+    if (!recentAuthentication) return undefined;
+
+    return recentAuthentication.handle;
+  }, [user]);
 
   const flowRef = useRef<Flow>(
     createFlow({
+      lastUserHandle,
       ...opts,
       logInFn: async () => {
         return __switchOrganizationInContext({ oid: opts.oid });
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index 822f156c..bf0bcc6f 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -228,16 +228,6 @@ const BasicForm = () => {
 const ImmediateOrgSwitchForm = () => {
   const [switching, setSwitching] = useState(false);
 
-  const { sid } = useSlashID();
-
-  useEffect(() => {
-    sid?.subscribe("authnContextUpdateChallengeReceivedEvent", console.log);
-
-    return () => {
-      sid?.unsubscribe("authnContextUpdateChallengeReceivedEvent", console.log);
-    };
-  }, [sid]);
-
   return (
     <ConfigurationProvider>
       <LoggedIn>
@@ -412,7 +402,7 @@ root.render(
     >
       <LogOut />
       <div className="layout">
-        {/* <div>
+        <div>
           <div>
             <h2>Basic form</h2>
             <BasicForm />
@@ -431,7 +421,7 @@ root.render(
             <h2>Dynamic flow - factor based on handle</h2>
             <ConfiguredDynamicFlow />
           </div>
-        </div> */}
+        </div>
         <div>
           <div>
             <h2>Immediate org switch</h2>
@@ -439,7 +429,7 @@ root.render(
           </div>
         </div>
       </div>
-      {/* <States /> */}
+      <States />
     </SlashIDProvider>
   </React.StrictMode>
 );

From 29dc6b19344c1bcce2a4c242f5bbea44d79afe6d Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 6 Feb 2025 16:08:03 +0100
Subject: [PATCH 25/31] Fix the race condition when storing new user token

---
 packages/react/src/context/slash-id-context.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/context/slash-id-context.tsx b/packages/react/src/context/slash-id-context.tsx
index 4965afb2..5d99c2c1 100644
--- a/packages/react/src/context/slash-id-context.tsx
+++ b/packages/react/src/context/slash-id-context.tsx
@@ -257,16 +257,17 @@ export const SlashIDProvider = ({
         newToken = await user.getTokenForOrganization(newOid);
       }
 
+      const newUser = new User(newToken, sidRef.current);
+      storageRef.current?.setItem(STORAGE_TOKEN_KEY(newOid), newToken);
+
+      setUser(newUser);
       setToken(newToken);
       setOid(newOid);
       setOrgSwitchingState({ state: "idle" });
 
-      const newUser = new User(newToken, sidRef.current);
-      storeUser(newUser);
-
       return new User(newToken, sidRef.current);
     },
-    [oid, storeUser, user, validateToken]
+    [oid, user, validateToken]
   );
 
   const storeAnonymousUser = useCallback(

From e06a3f952b15fcdfb17ff0b39e7cb1df02a73d5e Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Thu, 6 Feb 2025 16:36:42 +0100
Subject: [PATCH 26/31] Add additional log out test

---
 .../react/src/tests/token-storage.test.tsx    | 71 ++++++++++++++++++-
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/tests/token-storage.test.tsx b/packages/react/src/tests/token-storage.test.tsx
index b51ee881..6294168e 100644
--- a/packages/react/src/tests/token-storage.test.tsx
+++ b/packages/react/src/tests/token-storage.test.tsx
@@ -1,10 +1,17 @@
-import { render, waitFor } from "@testing-library/react";
-import { Form, SlashIDProvider } from "../main";
+import { render, waitFor, screen } from "@testing-library/react";
+import {
+  Form,
+  LoggedIn,
+  LoggedOut,
+  SlashIDProvider,
+  useSlashID,
+} from "../main";
 import { createTestUser, TEST_ORG_ID } from "../components/test-utils";
 import {
   LEGACY_STORAGE_TOKEN_KEY,
   STORAGE_TOKEN_KEY,
 } from "../context/slash-id-context";
+import userEvent from "@testing-library/user-event";
 
 describe("token storage key with org id suffix", () => {
   const getItemSpy = vi.spyOn(Storage.prototype, "getItem");
@@ -66,4 +73,64 @@ describe("token storage key with org id suffix", () => {
       expect(removeItemSpy).toHaveBeenCalledWith(LEGACY_STORAGE_TOKEN_KEY)
     );
   });
+
+  it("should remove all user tokens on log out", async () => {
+    const oid1 = "40123378-47ea-43d9-b7b2-aaa05bea48dc";
+    const oid2 = "67a5710c-b9f6-4640-9dbc-7b1c5fad4435";
+    const oid3 = "834e6c25-bca7-40b5-81ff-8cb7b4680c9b";
+
+    const user1 = createTestUser({ oid: oid1 });
+    const user2 = createTestUser({ oid: oid2 });
+    const user3 = createTestUser({ oid: oid3 });
+
+    localStorage.setItem(STORAGE_TOKEN_KEY(oid1), user1.token);
+    localStorage.setItem(STORAGE_TOKEN_KEY(oid2), user2.token);
+    localStorage.setItem(STORAGE_TOKEN_KEY(oid3), user3.token);
+
+    const browserUser = userEvent.setup();
+
+    const TestComponent = () => {
+      const { logOut, user } = useSlashID();
+
+      return (
+        <>
+          {user && <div data-testid="logged-in">logged in</div>}
+          <button data-testid="logout" onClick={logOut}>
+            log out
+          </button>
+        </>
+      );
+    };
+
+    render(
+      <SlashIDProvider
+        oid={oid1}
+        tokenStorage="localStorage"
+        analyticsEnabled={false}
+      >
+        <LoggedOut>
+          <Form />
+        </LoggedOut>
+        <LoggedIn>
+          <TestComponent />
+        </LoggedIn>
+      </SlashIDProvider>
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId("logged-in")).toBeInTheDocument()
+    );
+
+    browserUser.click(screen.getByTestId("logout"));
+
+    await waitFor(() =>
+      expect(removeItemSpy).toHaveBeenCalledWith(STORAGE_TOKEN_KEY(oid1))
+    );
+    await waitFor(() =>
+      expect(removeItemSpy).toHaveBeenCalledWith(STORAGE_TOKEN_KEY(oid2))
+    );
+    await waitFor(() =>
+      expect(removeItemSpy).toHaveBeenCalledWith(STORAGE_TOKEN_KEY(oid3))
+    );
+  });
 });

From 327e16a009821afd50dd7f8976555b5318527522 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 11 Feb 2025 13:44:43 +0100
Subject: [PATCH 27/31] Extract common bits, refactor org switching flow

---
 .../src/components/form/flow/flow.common.ts   | 447 ++++++++++++++++++
 .../form/org-switching/org-switching-flow.ts  | 407 ++--------------
 .../form/org-switching/org-switching-form.tsx |   2 +-
 .../org-switching/useOrgSwitchingFlowState.ts |  10 +-
 4 files changed, 484 insertions(+), 382 deletions(-)
 create mode 100644 packages/react/src/components/form/flow/flow.common.ts

diff --git a/packages/react/src/components/form/flow/flow.common.ts b/packages/react/src/components/form/flow/flow.common.ts
new file mode 100644
index 00000000..afdd2180
--- /dev/null
+++ b/packages/react/src/components/form/flow/flow.common.ts
@@ -0,0 +1,447 @@
+import { Utils, Errors, User, ReachablePersonHandle } from "@slashid/slashid";
+import {
+  Cancel,
+  LogIn,
+  LoginConfiguration,
+  Retry,
+  MFA,
+  LoginOptions,
+  Recover,
+  RetryPolicy,
+} from "../../../domain/types";
+import { ensureError } from "../../../domain/errors";
+import { isFactorRecoverable } from "../../../domain/handles";
+import { StoreRecoveryCodesState } from "../store-recovery-codes";
+import { Handle } from "../../../domain/types";
+
+export type AuthnContext = {
+  config: LoginConfiguration;
+  options?: LoginOptions;
+  attempt: number;
+};
+
+export interface InitialState {
+  status: "initial";
+  logIn: (config: LoginConfiguration, options?: LoginOptions) => void;
+}
+
+export interface AuthenticatingState {
+  status: "authenticating";
+  context: AuthnContext;
+  retry: Retry;
+  cancel: Cancel;
+  updateContext: (context: AuthnContext) => void;
+  recover: () => void;
+  logIn: () => void;
+  setRecoveryCodes: (codes: string[]) => void;
+}
+
+export interface SuccessState {
+  status: "success";
+}
+
+export interface ErrorState {
+  status: "error";
+  context: AuthenticatingState["context"] & {
+    error: Error;
+  };
+  retry: Retry;
+  cancel: Cancel;
+}
+
+export interface LoginEvent {
+  type: "sid_login";
+  config: LoginConfiguration;
+  options?: LoginOptions;
+}
+
+export interface UpdateAuthnContextEvent {
+  type: "sid_login.update_context";
+  context: AuthnContext;
+}
+
+export interface LoginSuccessEvent {
+  type: "sid_login.success";
+  user: User;
+}
+
+export interface LoginErrorEvent {
+  type: "sid_login.error";
+  error: Error;
+}
+
+export interface CancelEvent {
+  type: "sid_cancel";
+}
+
+export interface RetryEvent {
+  type: "sid_retry";
+  context: AuthenticatingState["context"];
+  policy: RetryPolicy;
+}
+
+export interface InitEvent {
+  type: "sid_init";
+}
+
+export interface StoreRecoveryCodesEvent {
+  type: "sid_storeRecoveryCodes";
+  user: User;
+}
+
+export type Event =
+  | InitEvent
+  | LoginEvent
+  | UpdateAuthnContextEvent
+  | LoginSuccessEvent
+  | LoginErrorEvent
+  | RetryEvent
+  | CancelEvent
+  | StoreRecoveryCodesEvent;
+
+type FlowActions = {
+  entry?: () => void;
+};
+
+export type FlowState = FlowActions &
+  (
+    | InitialState
+    | AuthenticatingState
+    | SuccessState
+    | ErrorState
+    | StoreRecoveryCodesState
+  );
+
+export type Observer = (state: FlowState, event: Event) => void;
+export type Send = (e: Event) => void;
+
+export const createInitialState = (send: Send): InitialState => {
+  return {
+    status: "initial",
+    logIn: (config, options) => {
+      send({ type: "sid_login", config, options });
+    },
+  };
+};
+
+export const createAuthenticatingState = (
+  send: Send,
+  context: AuthenticatingState["context"],
+  logInFn: LogIn | MFA,
+  recoverFn: Recover,
+  setRecoveryCodes: (codes: string[]) => void,
+  config: FlowConfig
+): AuthenticatingState => {
+  function performLogin() {
+    if (!logInFn) return;
+    return logInFn(context.config, context.options)
+      .then((user) => {
+        if (!user) {
+          send({
+            type: "sid_login.error",
+            error: new Error("User not returned from /id"),
+          });
+          return;
+        }
+
+        if (context.config.factor.method === "totp") {
+          send({
+            type: "sid_storeRecoveryCodes",
+            user,
+          });
+          return;
+        }
+        send({ type: "sid_login.success", user });
+      })
+      .catch((error) => {
+        if (Errors.isFlowCancelledError(error)) {
+          if (config.propagateFlowCancelled) {
+            throw error;
+          }
+        }
+        send({ type: "sid_login.error", error });
+      });
+  }
+
+  async function recover() {
+    if (
+      !context.config.handle?.type ||
+      !Utils.isReachablePersonHandleType(context.config.handle.type)
+    ) {
+      send({
+        type: "sid_login.error",
+        error: Errors.createSlashIDError({
+          name: Errors.ERROR_NAMES.recoverNonReachableHandleType,
+          message: "Recovery requires a reachable handle type.",
+          context,
+        }),
+      });
+      return;
+    }
+
+    if (!isFactorRecoverable(context.config.factor)) return;
+
+    try {
+      return await recoverFn({
+        factor: context.config.factor,
+        handle: context.config.handle as ReachablePersonHandle,
+      });
+    } catch (error) {
+      send({ type: "sid_login.error", error: ensureError(error) });
+    }
+  }
+
+  return {
+    status: "authenticating",
+    context: {
+      attempt: context.attempt,
+      config: context.config,
+      options: context.options,
+    },
+    retry: (policy = "retry") => {
+      send({ type: "sid_retry", context, policy });
+    },
+    recover,
+    cancel: () => {
+      send({ type: "sid_cancel" });
+    },
+    logIn: performLogin,
+    setRecoveryCodes,
+    updateContext: (newContext: AuthnContext) => {
+      send({
+        type: "sid_login.update_context",
+        context: newContext,
+      });
+    },
+  };
+};
+
+export const createSuccessState = (): SuccessState => {
+  return {
+    status: "success",
+  };
+};
+
+export const createErrorState = (
+  send: Send,
+  context: ErrorState["context"]
+): ErrorState => {
+  return {
+    status: "error",
+    context,
+    retry: (policy = "retry") => {
+      send({ type: "sid_retry", context, policy });
+    },
+    cancel: () => {
+      send({ type: "sid_cancel" });
+    },
+  };
+};
+
+export const createStoreRecoveryCodesState = (
+  send: Send,
+  recoveryCodes: string[],
+  user: User
+): StoreRecoveryCodesState => {
+  return {
+    status: "storeRecoveryCodes",
+    context: {
+      recoveryCodes,
+    },
+    confirm: () => {
+      send({ type: "sid_login.success", user });
+    },
+  };
+};
+
+export type HistoryEntry = {
+  state: FlowState;
+  event: Event;
+};
+
+export type CreateFlowOptions = {
+  oid?: string;
+  onSuccess?: (user: User) => void;
+  onError?: (error: Error, context: ErrorState["context"]) => void;
+  logInFn?: LogIn | MFA;
+  recover?: Recover;
+  cancelFn?: Cancel;
+  lastUserHandle?: Handle;
+};
+
+export type FlowConfig = {
+  propagateFlowCancelled: boolean;
+  resetOnCancel: boolean;
+};
+
+type AsyncDependencies = {
+  getLogInFn: () => LogIn | MFA | undefined;
+  getRecoverFn: () => Recover | undefined;
+  getCancelFn: () => Cancel | undefined;
+};
+
+type StaticDependencies = {
+  send: (event: Event) => void;
+  setState: (state: FlowState, event: Event) => void;
+  onSuccess?: (user: User) => void;
+  onError?: (
+    error: Error,
+    context: AuthenticatingState["context"] & { error: Error }
+  ) => void;
+  getRecoveryCodes: () => string[] | undefined;
+  setRecoveryCodes: (codes: string[]) => void;
+  config: FlowConfig;
+};
+
+type FlowDependencies = AsyncDependencies & StaticDependencies;
+
+type TransitionHandler = (
+  event: Event,
+  state: FlowState,
+  deps: FlowDependencies
+) => void;
+
+const isSDKReady = (deps: FlowDependencies): boolean => {
+  return !!(deps.getLogInFn() && deps.getRecoverFn());
+};
+
+const HANDLERS: Record<Event["type"], TransitionHandler> = {
+  sid_login: (event, state, deps) => {
+    if (!isSDKReady(deps)) return;
+    const e = event as Event & { type: "sid_login" };
+    const logInFn = deps.getLogInFn()!;
+    const recoverFn = deps.getRecoverFn()!;
+
+    const loginContext: AuthenticatingState["context"] = {
+      config: e.config,
+      options: e.options,
+      attempt: 1,
+    };
+
+    deps.setState(
+      createAuthenticatingState(
+        deps.send,
+        loginContext,
+        logInFn,
+        recoverFn,
+        deps.setRecoveryCodes,
+        deps.config
+      ),
+      event
+    );
+  },
+
+  sid_storeRecoveryCodes: (event, state, deps) => {
+    const e = event as Event & { type: "sid_storeRecoveryCodes" };
+    const codes = deps.getRecoveryCodes();
+
+    if (!codes) {
+      deps.send({ type: "sid_login.success", user: e.user });
+      return;
+    }
+
+    deps.setState(
+      createStoreRecoveryCodesState(deps.send, codes, e.user),
+      event
+    );
+  },
+
+  "sid_login.update_context": (event, state, deps) => {
+    if (!isSDKReady(deps)) return;
+    const e = event as Event & { type: "sid_login.update_context" };
+    const logInFn = deps.getLogInFn()!;
+    const recoverFn = deps.getRecoverFn()!;
+
+    deps.setState(
+      createAuthenticatingState(
+        deps.send,
+        e.context,
+        logInFn,
+        recoverFn,
+        deps.setRecoveryCodes,
+        deps.config
+      ),
+      event
+    );
+  },
+
+  "sid_login.success": (event, state, deps) => {
+    const e = event as Event & { type: "sid_login.success" };
+
+    if (deps.onSuccess) {
+      deps.onSuccess(e.user);
+    }
+
+    deps.setState(createSuccessState(), event);
+  },
+
+  "sid_login.error": (event, state, deps) => {
+    if (state.status !== "authenticating") return;
+    const e = event as Event & { type: "sid_login.error" };
+
+    const errorContext = {
+      ...state.context,
+      error: ensureError(e.error),
+    };
+
+    if (deps.onError) {
+      deps.onError(e.error, errorContext);
+    }
+
+    deps.setState(createErrorState(deps.send, errorContext), event);
+  },
+
+  sid_retry: (event, state, deps) => {
+    if (!isSDKReady(deps)) return;
+    const e = event as Event & { type: "sid_retry" };
+    const logInFn = deps.getLogInFn()!;
+    const recoverFn = deps.getRecoverFn()!;
+    const cancelFn = deps.getCancelFn();
+
+    if (cancelFn) {
+      cancelFn();
+    }
+
+    if (e.policy === "reset") {
+      deps.setState(createInitialState(deps.send), event);
+      return;
+    }
+
+    deps.setState(
+      createAuthenticatingState(
+        deps.send,
+        {
+          ...e.context,
+          attempt: e.context.attempt + 1,
+        },
+        logInFn,
+        recoverFn,
+        deps.setRecoveryCodes,
+        deps.config
+      ),
+      event
+    );
+  },
+
+  sid_cancel: (event, state, deps) => {
+    const cancelFn = deps.getCancelFn();
+    if (cancelFn) {
+      cancelFn();
+    }
+
+    if (deps.config.resetOnCancel) {
+      deps.setState(createInitialState(deps.send), event);
+    }
+  },
+
+  sid_init: () => {},
+} as const;
+
+export function createTransitionFunction(deps: FlowDependencies) {
+  return function transition(event: Event, state: FlowState) {
+    const handler = HANDLERS[event.type];
+    if (handler) {
+      handler(event, state, deps);
+    }
+  };
+}
diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/org-switching/org-switching-flow.ts
index 0093c955..55fa316c 100644
--- a/packages/react/src/components/form/org-switching/org-switching-flow.ts
+++ b/packages/react/src/components/form/org-switching/org-switching-flow.ts
@@ -1,275 +1,18 @@
-import { Utils, Errors, User, ReachablePersonHandle } from "@slashid/slashid";
+import { Cancel, LogIn, MFA, Recover } from "../../../domain/types";
 import {
-  Cancel,
-  LogIn,
-  LoginConfiguration,
-  Retry,
-  MFA,
-  LoginOptions,
-  Recover,
-  RetryPolicy,
-  Handle,
-} from "../../../domain/types";
-import { ensureError } from "../../../domain/errors";
-import { isFactorRecoverable } from "../../../domain/handles";
-import { StoreRecoveryCodesState } from "../store-recovery-codes";
-
-export type AuthnContext = {
-  config: LoginConfiguration;
-  options?: LoginOptions;
-  attempt: number;
-};
-export interface InitialState {
-  status: "initial";
-  logIn: (config: LoginConfiguration, options?: LoginOptions) => void;
-}
-
-export interface AuthenticatingState {
-  status: "authenticating";
-  context: AuthnContext;
-  retry: Retry;
-  cancel: Cancel;
-  updateContext: (context: AuthnContext) => void;
-  recover: () => void;
-  logIn: () => void;
-  setRecoveryCodes: (codes: string[]) => void;
-}
-
-export interface SuccessState {
-  status: "success";
-}
-
-export interface ErrorState {
-  status: "error";
-  context: AuthenticatingState["context"] & {
-    error: Error;
-  };
-  retry: Retry;
-  cancel: Cancel;
-}
-
-interface LoginEvent {
-  type: "sid_login";
-  config: LoginConfiguration;
-  options?: LoginOptions;
-}
-
-interface UpdateAuthnContextEvent {
-  type: "sid_login.update_context";
-  context: AuthnContext;
-}
-
-interface LoginSuccessEvent {
-  type: "sid_login.success";
-  user: User;
-}
-
-interface LoginErrorEvent {
-  type: "sid_login.error";
-  error: Error;
-}
-
-interface CancelEvent {
-  type: "sid_cancel";
-}
-
-interface RetryEvent {
-  type: "sid_retry";
-  context: AuthenticatingState["context"];
-  policy: RetryPolicy;
-}
-
-interface InitEvent {
-  type: "sid_init";
-}
-
-interface StoreRecoveryCodesEvent {
-  type: "sid_storeRecoveryCodes";
-  user: User;
-}
-
-type Event =
-  | InitEvent
-  | LoginEvent
-  | UpdateAuthnContextEvent
-  | LoginSuccessEvent
-  | LoginErrorEvent
-  | RetryEvent
-  | CancelEvent
-  | StoreRecoveryCodesEvent;
-
-type FlowActions = {
-  // a function that will be called when the state is entered
-  entry?: () => void;
-};
-
-export type FlowState = FlowActions &
-  (
-    | InitialState
-    | AuthenticatingState
-    | SuccessState
-    | ErrorState
-    | StoreRecoveryCodesState
-  );
-
-type Observer = (state: FlowState, event: Event) => void;
-type Send = (e: Event) => void;
-
-const createInitialState = (send: Send): InitialState => {
-  return {
-    status: "initial",
-    logIn: (config, options) => {
-      send({ type: "sid_login", config, options });
-    },
-  };
-};
-
-const createAuthenticatingState = (
-  send: Send,
-  context: AuthenticatingState["context"],
-  logInFn: LogIn | MFA,
-  recoverFn: Recover,
-  setRecoveryCodes: (codes: string[]) => void
-): AuthenticatingState => {
-  function performLogin() {
-    if (!logInFn) return;
-    return logInFn(context.config, context.options)
-      .then((user) => {
-        if (!user) {
-          send({
-            type: "sid_login.error",
-            error: new Error("User not returned from /id"),
-          });
-          return;
-        }
-
-        if (context.config.factor.method === "totp") {
-          send({
-            type: "sid_storeRecoveryCodes",
-            user,
-          });
-          return;
-        }
-        send({ type: "sid_login.success", user });
-      })
-      .catch((error) => {
-        if (Errors.isFlowCancelledError(error)) {
-          // propagate error when the flow is cancelled
-          throw error;
-        }
-        send({ type: "sid_login.error", error });
-      });
-  }
-
-  async function recover() {
-    if (
-      !context.config.handle?.type ||
-      !Utils.isReachablePersonHandleType(context.config.handle.type)
-    ) {
-      send({
-        type: "sid_login.error",
-        error: Errors.createSlashIDError({
-          name: Errors.ERROR_NAMES.recoverNonReachableHandleType,
-          message: "Recovery requires a reachable handle type.",
-          context,
-        }),
-      });
-      return;
-    }
-
-    // not possible at the moment
-    if (!isFactorRecoverable(context.config.factor)) return;
-
-    try {
-      return await recoverFn({
-        factor: context.config.factor,
-        handle: context.config.handle as ReachablePersonHandle,
-      });
-
-      // recover does not authenticate on its own
-      // we still need to wait for login to complete
-    } catch (error) {
-      send({ type: "sid_login.error", error: ensureError(error) });
-    }
-  }
-
-  return {
-    status: "authenticating",
-    context: {
-      attempt: context.attempt,
-      config: context.config,
-      options: context.options,
-    },
-    retry: (policy = "retry") => {
-      send({ type: "sid_retry", context, policy });
-    },
-    recover,
-    cancel: () => {
-      // Cancellation API needs to be exposed from the core SDK
-      send({ type: "sid_cancel" });
-    },
-    logIn: performLogin,
-    setRecoveryCodes,
-    updateContext: (newContext: AuthnContext) => {
-      send({
-        type: "sid_login.update_context",
-        context: newContext,
-      });
-    },
-  };
-};
-
-const createSuccessState = (): SuccessState => {
-  return {
-    status: "success",
-  };
-};
-
-const createErrorState = (
-  send: Send,
-  context: ErrorState["context"]
-): ErrorState => {
-  return {
-    status: "error",
-    context,
-    retry: (policy = "retry") => {
-      send({ type: "sid_retry", context, policy });
-    },
-    cancel: () => {
-      send({ type: "sid_cancel" });
-    },
-  };
-};
-
-const createStoreRecoveryCodesState = (
-  send: Send,
-  recoveryCodes: string[],
-  user: User
-): StoreRecoveryCodesState => {
-  return {
-    status: "storeRecoveryCodes",
-    context: {
-      recoveryCodes,
-    },
-    confirm: () => {
-      send({ type: "sid_login.success", user });
-    },
-  };
-};
-
-export type CreateFlowOptions = {
-  oid: string;
-  onSuccess?: (user: User) => void;
-  onError?: (error: Error, context: ErrorState["context"]) => void;
-  logInFn?: LogIn | MFA;
-  recover?: Recover;
-  cancelFn?: Cancel;
-  lastUserHandle?: Handle;
-};
-
-type HistoryEntry = {
-  state: FlowState;
-  event: Event;
+  CreateFlowOptions,
+  FlowConfig,
+  Observer,
+  Event,
+  createAuthenticatingState,
+  HistoryEntry,
+  createTransitionFunction,
+  FlowState,
+} from "../flow/flow.common";
+
+const authFlowConfig: FlowConfig = {
+  propagateFlowCancelled: true,
+  resetOnCancel: false,
 };
 
 /**
@@ -288,13 +31,14 @@ type HistoryEntry = {
  * @returns
  */
 export function createFlow(opts: CreateFlowOptions) {
+  let state: FlowState;
   let logInFn: undefined | LogIn | MFA = opts.logInFn;
   let recoverFn: undefined | Recover = opts.recover;
   let cancelFn: undefined | Cancel = opts.cancelFn;
   let recoveryCodes: undefined | string[] = undefined;
   let observers: Observer[] = [];
   const send = (event: Event) => {
-    transition(event);
+    transition(event, state);
   };
 
   const setRecoveryCodes = (codes: string[]) => {
@@ -310,7 +54,7 @@ export function createFlow(opts: CreateFlowOptions) {
     observers.forEach((o) => o(state, changeEvent));
   }
 
-  let state: FlowState = createAuthenticatingState(
+  state = createAuthenticatingState(
     send,
     {
       config: {
@@ -323,114 +67,29 @@ export function createFlow(opts: CreateFlowOptions) {
     },
     logInFn!,
     recoverFn!,
-    setRecoveryCodes
+    setRecoveryCodes,
+    authFlowConfig
   );
 
   // each history entry contains a state and the event that triggered the transition to that state
   const history: HistoryEntry[] = [{ state, event: { type: "sid_init" } }];
 
-  const { onSuccess, onError } = opts;
-
   // notify subscribers every time the state changes
 
-  async function transition(e: Event) {
-    switch (e.type) {
-      case "sid_storeRecoveryCodes":
-        // recovery codes are only stored on register authenticator
-        if (!recoveryCodes) {
-          send({ type: "sid_login.success", user: e.user });
-          break;
-        }
-
-        setState(
-          createStoreRecoveryCodesState(send, recoveryCodes!, e.user),
-          e
-        );
-        break;
-      case "sid_login.update_context":
-        // TODO replace with a check for ready state
-        if (!logInFn || !recoverFn) break;
-
-        const updatedContext: AuthnContext = {
-          config: e.context.config,
-          options: e.context.options,
-          attempt: e.context.attempt,
-        };
-
-        setState(
-          createAuthenticatingState(
-            send,
-            updatedContext,
-            logInFn,
-            recoverFn,
-            setRecoveryCodes
-          ),
-          e
-        );
-        break;
-      case "sid_login.success":
-        // call onSuccess if present
-        if (typeof onSuccess === "function") {
-          onSuccess(e.user);
-        }
-
-        setState(createSuccessState(), e);
-        break;
-      case "sid_login.error":
-        if (state.status !== "authenticating") break;
-
-        const errorContext: ErrorState["context"] = {
-          ...state.context,
-          error: ensureError(e.error),
-        };
-
-        // call onError if present
-        if (typeof onError === "function") {
-          onError(e.error, errorContext);
-        }
-
-        setState(createErrorState(send, errorContext), e);
-        break;
-      case "sid_retry":
-        // TODO replace with a check for ready state
-        if (!logInFn || !recoverFn) break;
-
-        if (typeof cancelFn === "function") {
-          cancelFn();
-        }
-
-        const retryContext: AuthenticatingState["context"] = {
-          config: e.context.config,
-          options: e.context.options,
-          attempt: e.context.attempt + 1,
-        };
-
-        if (e.policy === "reset") {
-          setState(createInitialState(send), e);
-          break;
-        }
-
-        setState(
-          createAuthenticatingState(
-            send,
-            retryContext,
-            logInFn,
-            recoverFn,
-            setRecoveryCodes
-          ),
-          e
-        );
-        break;
-      case "sid_cancel":
-        if (typeof cancelFn === "function") {
-          cancelFn();
-        }
-
-        break;
-      default:
-        break;
-    }
-  }
+  const transition = createTransitionFunction({
+    send,
+    setState,
+    getLogInFn: () => logInFn,
+    getRecoverFn: () => recoverFn,
+    getCancelFn: () => cancelFn,
+    onSuccess: opts.onSuccess,
+    onError: opts.onError,
+    getRecoveryCodes: () => recoveryCodes,
+    setRecoveryCodes: (codes) => {
+      recoveryCodes = codes;
+    },
+    config: authFlowConfig,
+  });
 
   // provide the flow API - interact with the flow using the state object, subscribe and unsubscribe to state changes
   return {
diff --git a/packages/react/src/components/form/org-switching/org-switching-form.tsx b/packages/react/src/components/form/org-switching/org-switching-form.tsx
index e7589546..0ec7e5c1 100644
--- a/packages/react/src/components/form/org-switching/org-switching-form.tsx
+++ b/packages/react/src/components/form/org-switching/org-switching-form.tsx
@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 import { useOrgSwitchingFlowState } from "./useOrgSwitchingFlowState";
-import { CreateFlowOptions } from "./org-switching-flow";
+import { CreateFlowOptions } from "../flow/flow.common";
 import { Authenticating } from "../authenticating";
 import { Error } from "../error";
 import { Success } from "../success";
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index b28f05d9..63e756f7 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -1,13 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useSlashID } from "../../../hooks/use-slash-id";
-import {
-  Flow,
-  createFlow,
-  FlowState,
-  CreateFlowOptions,
-} from "./org-switching-flow";
+import { Flow, createFlow } from "./org-switching-flow";
 import { Handle } from "../../../domain/types";
+import { FlowState, CreateFlowOptions } from "../flow/flow.common";
 
 export function useOrgSwitchingFlowState(opts: CreateFlowOptions) {
   const { recover, sid, __switchOrganizationInContext, user } = useSlashID();
@@ -26,7 +22,7 @@ export function useOrgSwitchingFlowState(opts: CreateFlowOptions) {
       lastUserHandle,
       ...opts,
       logInFn: async () => {
-        return __switchOrganizationInContext({ oid: opts.oid });
+        return __switchOrganizationInContext({ oid: opts.oid! });
       },
       recover,
       cancelFn: () => {

From 9434e553893cdc7d88e0f7150b64de42d2d87e32 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 11 Feb 2025 13:53:26 +0100
Subject: [PATCH 28/31] Refactor auth flow

---
 .../src/components/dynamic-flow/index.tsx     |   2 +-
 .../src/components/dynamic-flow/initial.tsx   |   2 +-
 .../authenticating/authenticating.test.tsx    |   2 +-
 .../authenticating/authenticating.types.ts    |   2 +-
 .../components/form/authenticating/index.tsx  |   2 +-
 .../form/authenticating/password.tsx          |   2 +-
 .../react/src/components/form/error/index.tsx |   2 +-
 packages/react/src/components/form/flow.ts    | 456 ------------------
 .../src/components/form/flow/auth-flow.ts     |  96 ++++
 .../org-switching-flow.ts                     |  13 +-
 packages/react/src/components/form/form.tsx   |   2 +-
 .../src/components/form/initial/index.tsx     |   2 +-
 .../org-switching/useOrgSwitchingFlowState.ts |   2 +-
 .../react/src/components/form/success.tsx     |   2 +-
 .../react/src/components/form/useFlowState.ts |   5 +-
 packages/react/src/dev.tsx                    |   2 +-
 16 files changed, 117 insertions(+), 477 deletions(-)
 delete mode 100644 packages/react/src/components/form/flow.ts
 create mode 100644 packages/react/src/components/form/flow/auth-flow.ts
 rename packages/react/src/components/form/{org-switching => flow}/org-switching-flow.ts (96%)

diff --git a/packages/react/src/components/dynamic-flow/index.tsx b/packages/react/src/components/dynamic-flow/index.tsx
index c4627b8e..0c10e96f 100644
--- a/packages/react/src/components/dynamic-flow/index.tsx
+++ b/packages/react/src/components/dynamic-flow/index.tsx
@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 import { FormProvider } from "../../context/form-context";
 import { useCallback, useRef } from "react";
 import { Handle, LoginOptions } from "../../domain/types";
-import { CreateFlowOptions } from "../form/flow";
+import { CreateFlowOptions } from "../form/flow/flow.common";
 import { useFlowState } from "../form/useFlowState";
 import { AuthenticatingImplementation as Authenticating } from "../form/authenticating";
 import { Success } from "../form/success";
diff --git a/packages/react/src/components/dynamic-flow/initial.tsx b/packages/react/src/components/dynamic-flow/initial.tsx
index 31d25ff9..c59bfae4 100644
--- a/packages/react/src/components/dynamic-flow/initial.tsx
+++ b/packages/react/src/components/dynamic-flow/initial.tsx
@@ -3,7 +3,7 @@ import { Factor } from "@slashid/slashid";
 import { Divider } from "@slashid/react-primitives";
 
 import { FormProvider } from "../../context/form-context";
-import { InitialState } from "../form/flow";
+import { InitialState } from "../form/flow/flow.common";
 import { Logo } from "../form/initial/logo";
 import { Oidc } from "./oidc";
 import { Text } from "../text";
diff --git a/packages/react/src/components/form/authenticating/authenticating.test.tsx b/packages/react/src/components/form/authenticating/authenticating.test.tsx
index eeb0dfa4..2e211ec1 100644
--- a/packages/react/src/components/form/authenticating/authenticating.test.tsx
+++ b/packages/react/src/components/form/authenticating/authenticating.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { AuthenticatingImplementation as Authenticating } from "./index";
-import { AuthenticatingState } from "../flow";
+import { AuthenticatingState } from "../flow/flow.common";
 import {
   TestSlashIDProvider,
   TestTextProvider,
diff --git a/packages/react/src/components/form/authenticating/authenticating.types.ts b/packages/react/src/components/form/authenticating/authenticating.types.ts
index 61671edb..94fbd18c 100644
--- a/packages/react/src/components/form/authenticating/authenticating.types.ts
+++ b/packages/react/src/components/form/authenticating/authenticating.types.ts
@@ -1,4 +1,4 @@
-import { AuthenticatingState } from "../flow";
+import { AuthenticatingState } from "../flow/flow.common";
 
 export type Props = {
   flowState: AuthenticatingState;
diff --git a/packages/react/src/components/form/authenticating/index.tsx b/packages/react/src/components/form/authenticating/index.tsx
index 7f60e5fc..28b5a561 100644
--- a/packages/react/src/components/form/authenticating/index.tsx
+++ b/packages/react/src/components/form/authenticating/index.tsx
@@ -22,7 +22,7 @@ import { Children, useEffect, useRef, useState } from "react";
 import { TOTPState } from "./totp";
 import { Delayed } from "@slashid/react-primitives";
 import { useInternalFormContext } from "../internal-context";
-import { AuthenticatingState } from "../flow";
+import { AuthenticatingState } from "../flow/flow.common";
 import { TIME_MS } from "../types";
 import { Loader } from "./icons";
 import {
diff --git a/packages/react/src/components/form/authenticating/password.tsx b/packages/react/src/components/form/authenticating/password.tsx
index 70cc6868..c1ccb601 100644
--- a/packages/react/src/components/form/authenticating/password.tsx
+++ b/packages/react/src/components/form/authenticating/password.tsx
@@ -21,7 +21,7 @@ import {
 } from "@slashid/react-primitives";
 import { TextConfigKey } from "../../text/constants";
 import { useConfiguration } from "../../../hooks/use-configuration";
-import { AuthenticatingState } from "../flow";
+import { AuthenticatingState } from "../flow/flow.common";
 import { HandleType } from "../../../domain/types";
 import { InvalidPasswordSubmittedEvent } from "@slashid/slashid";
 import {
diff --git a/packages/react/src/components/form/error/index.tsx b/packages/react/src/components/form/error/index.tsx
index 759004e7..9d8aca73 100644
--- a/packages/react/src/components/form/error/index.tsx
+++ b/packages/react/src/components/form/error/index.tsx
@@ -13,7 +13,7 @@ import { clsx } from "clsx";
 import { useConfiguration } from "../../../hooks/use-configuration";
 import { Text } from "../../text";
 import { TextConfigKey } from "../../text/constants";
-import { ErrorState } from "../flow";
+import { ErrorState } from "../flow/flow.common";
 import { useInternalFormContext } from "../internal-context";
 
 import * as styles from "./error.css";
diff --git a/packages/react/src/components/form/flow.ts b/packages/react/src/components/form/flow.ts
deleted file mode 100644
index dba35e6d..00000000
--- a/packages/react/src/components/form/flow.ts
+++ /dev/null
@@ -1,456 +0,0 @@
-import { Utils, Errors, User, ReachablePersonHandle } from "@slashid/slashid";
-import {
-  Cancel,
-  LogIn,
-  LoginConfiguration,
-  Retry,
-  MFA,
-  LoginOptions,
-  Recover,
-  RetryPolicy,
-} from "../../domain/types";
-import { ensureError } from "../../domain/errors";
-import { isFactorRecoverable } from "../../domain/handles";
-import { StoreRecoveryCodesState } from "./store-recovery-codes";
-
-export type AuthnContext = {
-  config: LoginConfiguration;
-  options?: LoginOptions;
-  attempt: number;
-};
-export interface InitialState {
-  status: "initial";
-  logIn: (config: LoginConfiguration, options?: LoginOptions) => void;
-}
-
-export interface AuthenticatingState {
-  status: "authenticating";
-  context: AuthnContext;
-  retry: Retry;
-  cancel: Cancel;
-  updateContext: (context: AuthnContext) => void;
-  recover: () => void;
-  logIn: () => void;
-  setRecoveryCodes: (codes: string[]) => void;
-}
-
-export interface SuccessState {
-  status: "success";
-}
-
-export interface ErrorState {
-  status: "error";
-  context: AuthenticatingState["context"] & {
-    error: Error;
-  };
-  retry: Retry;
-  cancel: Cancel;
-}
-
-interface LoginEvent {
-  type: "sid_login";
-  config: LoginConfiguration;
-  options?: LoginOptions;
-}
-
-interface UpdateAuthnContextEvent {
-  type: "sid_login.update_context";
-  context: AuthnContext;
-}
-
-interface LoginSuccessEvent {
-  type: "sid_login.success";
-  user: User;
-}
-
-interface LoginErrorEvent {
-  type: "sid_login.error";
-  error: Error;
-}
-
-interface CancelEvent {
-  type: "sid_cancel";
-}
-
-interface RetryEvent {
-  type: "sid_retry";
-  context: AuthenticatingState["context"];
-  policy: RetryPolicy;
-}
-
-interface InitEvent {
-  type: "sid_init";
-}
-
-interface StoreRecoveryCodesEvent {
-  type: "sid_storeRecoveryCodes";
-  user: User;
-}
-
-type Event =
-  | InitEvent
-  | LoginEvent
-  | UpdateAuthnContextEvent
-  | LoginSuccessEvent
-  | LoginErrorEvent
-  | RetryEvent
-  | CancelEvent
-  | StoreRecoveryCodesEvent;
-
-type FlowActions = {
-  // a function that will be called when the state is entered
-  entry?: () => void;
-};
-
-export type FlowState = FlowActions &
-  (
-    | InitialState
-    | AuthenticatingState
-    | SuccessState
-    | ErrorState
-    | StoreRecoveryCodesState
-  );
-
-type Observer = (state: FlowState, event: Event) => void;
-type Send = (e: Event) => void;
-
-const createInitialState = (send: Send): InitialState => {
-  return {
-    status: "initial",
-    logIn: (config, options) => {
-      send({ type: "sid_login", config, options });
-    },
-  };
-};
-
-const createAuthenticatingState = (
-  send: Send,
-  context: AuthenticatingState["context"],
-  logInFn: LogIn | MFA,
-  recoverFn: Recover,
-  setRecoveryCodes: (codes: string[]) => void
-): AuthenticatingState => {
-  function performLogin() {
-    return logInFn(context.config, context.options)
-      .then((user) => {
-        if (!user) {
-          send({
-            type: "sid_login.error",
-            error: new Error("User not returned from /id"),
-          });
-          return;
-        }
-
-        if (context.config.factor.method === "totp") {
-          send({
-            type: "sid_storeRecoveryCodes",
-            user,
-          });
-          return;
-        }
-        send({ type: "sid_login.success", user });
-      })
-      .catch((error) => {
-        if (Errors.isFlowCancelledError(error)) {
-          return;
-        }
-        send({ type: "sid_login.error", error });
-      });
-  }
-
-  async function recover() {
-    if (
-      !context.config.handle?.type ||
-      !Utils.isReachablePersonHandleType(context.config.handle.type)
-    ) {
-      send({
-        type: "sid_login.error",
-        error: Errors.createSlashIDError({
-          name: Errors.ERROR_NAMES.recoverNonReachableHandleType,
-          message: "Recovery requires a reachable handle type.",
-          context,
-        }),
-      });
-      return;
-    }
-
-    // not possible at the moment
-    if (!isFactorRecoverable(context.config.factor)) return;
-
-    try {
-      return await recoverFn({
-        factor: context.config.factor,
-        handle: context.config.handle as ReachablePersonHandle,
-      });
-
-      // recover does not authenticate on its own
-      // we still need to wait for login to complete
-    } catch (error) {
-      send({ type: "sid_login.error", error: ensureError(error) });
-    }
-  }
-
-  return {
-    status: "authenticating",
-    context: {
-      attempt: context.attempt,
-      config: context.config,
-      options: context.options,
-    },
-    retry: (policy = "retry") => {
-      send({ type: "sid_retry", context, policy });
-    },
-    recover,
-    cancel: () => {
-      // Cancellation API needs to be exposed from the core SDK
-      send({ type: "sid_cancel" });
-    },
-    logIn: performLogin,
-    setRecoveryCodes,
-    updateContext: (newContext: AuthnContext) => {
-      send({
-        type: "sid_login.update_context",
-        context: newContext,
-      });
-    },
-  };
-};
-
-const createSuccessState = (): SuccessState => {
-  return {
-    status: "success",
-  };
-};
-
-const createErrorState = (
-  send: Send,
-  context: ErrorState["context"]
-): ErrorState => {
-  return {
-    status: "error",
-    context,
-    retry: (policy = "retry") => {
-      send({ type: "sid_retry", context, policy });
-    },
-    cancel: () => {
-      send({ type: "sid_cancel" });
-    },
-  };
-};
-
-const createStoreRecoveryCodesState = (
-  send: Send,
-  recoveryCodes: string[],
-  user: User
-): StoreRecoveryCodesState => {
-  return {
-    status: "storeRecoveryCodes",
-    context: {
-      recoveryCodes,
-    },
-    confirm: () => {
-      send({ type: "sid_login.success", user });
-    },
-  };
-};
-
-export type CreateFlowOptions = {
-  onSuccess?: (user: User) => void;
-  onError?: (error: Error, context: ErrorState["context"]) => void;
-};
-
-type HistoryEntry = {
-  state: FlowState;
-  event: Event;
-};
-
-/**
- * Flow API factory function.
- *
- * Responsible for creating the flow state machine and providing the flow API.
- * Internally it delegates event processing to the underlying state instances.
- *
- * When a transition is requested, this function will create a new state instance and notify subscribers.
- * It will not do any checks to see if the transition is valid as it is the responsibility of the state instances.
- *
- * The Flow API is not symetric - external code can interact with it using the fields and methods of the state object.
- * Internally the state object communicates with the flow using the send function, emitting events and letting the flow API orchestrate the state transitions.
- *
- * @param opts
- * @returns
- */
-export function createFlow(opts: CreateFlowOptions = {}) {
-  let logInFn: undefined | LogIn | MFA = undefined;
-  let recoverFn: undefined | Recover = undefined;
-  let cancelFn: undefined | Cancel = undefined;
-  let recoveryCodes: undefined | string[] = undefined;
-  let observers: Observer[] = [];
-  const send = (event: Event) => {
-    transition(event);
-  };
-
-  let state: FlowState = createInitialState(send);
-  // each history entry contains a state and the event that triggered the transition to that state
-  const history: HistoryEntry[] = [{ state, event: { type: "sid_init" } }];
-
-  const { onSuccess, onError } = opts;
-
-  // notify subscribers every time the state changes
-  function setState(newState: FlowState, changeEvent: Event) {
-    state = newState;
-
-    // keep a history of state transitions for debugging purposes
-    history.push({ state, event: changeEvent });
-
-    observers.forEach((o) => o(state, changeEvent));
-  }
-
-  const setRecoveryCodes = (codes: string[]) => {
-    recoveryCodes = codes;
-  };
-
-  async function transition(e: Event) {
-    switch (e.type) {
-      case "sid_login":
-        // TODO replace with a check for ready state
-        if (!logInFn || !recoverFn) break;
-
-        const loginContext: AuthenticatingState["context"] = {
-          config: e.config,
-          options: e.options,
-          attempt: 1,
-        };
-
-        setState(
-          createAuthenticatingState(
-            send,
-            loginContext,
-            logInFn,
-            recoverFn,
-            setRecoveryCodes
-          ),
-          e
-        );
-        break;
-      case "sid_storeRecoveryCodes":
-        // recovery codes are only stored on register authenticator
-        if (!recoveryCodes) {
-          send({ type: "sid_login.success", user: e.user });
-          break;
-        }
-
-        setState(
-          createStoreRecoveryCodesState(send, recoveryCodes!, e.user),
-          e
-        );
-        break;
-      case "sid_login.update_context":
-        // TODO replace with a check for ready state
-        if (!logInFn || !recoverFn) break;
-
-        const updatedContext: AuthnContext = {
-          config: e.context.config,
-          options: e.context.options,
-          attempt: e.context.attempt,
-        };
-
-        setState(
-          createAuthenticatingState(
-            send,
-            updatedContext,
-            logInFn,
-            recoverFn,
-            setRecoveryCodes
-          ),
-          e
-        );
-        break;
-      case "sid_login.success":
-        // call onSuccess if present
-        if (typeof onSuccess === "function") {
-          onSuccess(e.user);
-        }
-
-        setState(createSuccessState(), e);
-        break;
-      case "sid_login.error":
-        if (state.status !== "authenticating") break;
-
-        const errorContext: ErrorState["context"] = {
-          ...state.context,
-          error: ensureError(e.error),
-        };
-
-        // call onError if present
-        if (typeof onError === "function") {
-          onError(e.error, errorContext);
-        }
-
-        setState(createErrorState(send, errorContext), e);
-        break;
-      case "sid_retry":
-        // TODO replace with a check for ready state
-        if (!logInFn || !recoverFn) break;
-
-        if (typeof cancelFn === "function") {
-          cancelFn();
-        }
-
-        if (e.policy === "reset") {
-          setState(createInitialState(send), e);
-          break;
-        }
-
-        const retryContext: AuthenticatingState["context"] = {
-          config: e.context.config,
-          options: e.context.options,
-          attempt: e.context.attempt + 1,
-        };
-
-        setState(
-          createAuthenticatingState(
-            send,
-            retryContext,
-            logInFn,
-            recoverFn,
-            setRecoveryCodes
-          ),
-          e
-        );
-        break;
-      case "sid_cancel":
-        if (typeof cancelFn === "function") {
-          cancelFn();
-        }
-
-        setState(createInitialState(send), e);
-        break;
-      default:
-        break;
-    }
-  }
-
-  // provide the flow API - interact with the flow using the state object, subscribe and unsubscribe to state changes
-  return {
-    history,
-    unsubscribe: (observer: Observer) => {
-      observers = observers.filter((ob) => ob === observer);
-    },
-    subscribe: (observer: Observer) => {
-      observers.push(observer);
-    },
-    // SDK is instantiated asynchronously, so we need to set the logIn and recover functions when it is ready
-    setLogIn: (fn: LogIn | MFA) => {
-      logInFn = fn;
-    },
-    setRecover: (fn: Recover) => {
-      recoverFn = fn;
-    },
-    setCancel: (fn: Cancel) => {
-      cancelFn = fn;
-    },
-    state,
-  };
-}
-
-export type Flow = ReturnType<typeof createFlow>;
diff --git a/packages/react/src/components/form/flow/auth-flow.ts b/packages/react/src/components/form/flow/auth-flow.ts
new file mode 100644
index 00000000..c413f92b
--- /dev/null
+++ b/packages/react/src/components/form/flow/auth-flow.ts
@@ -0,0 +1,96 @@
+import { Cancel, LogIn, MFA, Recover } from "../../../domain/types";
+import {
+  CreateFlowOptions,
+  FlowConfig,
+  Observer,
+  Event,
+  createInitialState,
+  HistoryEntry,
+  createTransitionFunction,
+  FlowState,
+} from "./flow.common";
+
+const authFlowConfig: FlowConfig = {
+  propagateFlowCancelled: false,
+  resetOnCancel: true,
+};
+
+/**
+ * Flow API factory function.
+ *
+ * Responsible for creating the flow state machine and providing the flow API.
+ * Internally it delegates event processing to the underlying state instances.
+ *
+ * When a transition is requested, this function will create a new state instance and notify subscribers.
+ * It will not do any checks to see if the transition is valid as it is the responsibility of the state instances.
+ *
+ * The Flow API is not symetric - external code can interact with it using the fields and methods of the state object.
+ * Internally the state object communicates with the flow using the send function, emitting events and letting the flow API orchestrate the state transitions.
+ *
+ * @param opts
+ * @returns
+ */
+export function createAuthFlow(opts: CreateFlowOptions = {}) {
+  let state: FlowState;
+  let logInFn: undefined | LogIn | MFA = undefined;
+  let recoverFn: undefined | Recover = undefined;
+  let cancelFn: undefined | Cancel = undefined;
+  let recoveryCodes: undefined | string[] = undefined;
+  let observers: Observer[] = [];
+  const send = (event: Event) => {
+    transition(event, state);
+  };
+
+  state = createInitialState(send);
+  // each history entry contains a state and the event that triggered the transition to that state
+  const history: HistoryEntry[] = [{ state, event: { type: "sid_init" } }];
+
+  // notify subscribers every time the state changes
+  function setState(newState: FlowState, changeEvent: Event) {
+    state = newState;
+
+    // keep a history of state transitions for debugging purposes
+    history.push({ state, event: changeEvent });
+
+    observers.forEach((o) => o(state, changeEvent));
+  }
+
+  const transition = createTransitionFunction({
+    send,
+    setState,
+    getLogInFn: () => logInFn,
+    getRecoverFn: () => recoverFn,
+    getCancelFn: () => cancelFn,
+    onSuccess: opts.onSuccess,
+    onError: opts.onError,
+    getRecoveryCodes: () => recoveryCodes,
+    setRecoveryCodes: (codes) => {
+      recoveryCodes = codes;
+    },
+    config: authFlowConfig,
+  });
+
+  // provide the flow API - interact with the flow using the state object, subscribe and unsubscribe to state changes
+  return {
+    history,
+    unsubscribe: (observer: Observer) => {
+      observers = observers.filter((ob) => ob === observer);
+    },
+    subscribe: (observer: Observer) => {
+      observers.push(observer);
+    },
+    // SDK is instantiated asynchronously, so we need to set the logIn and recover functions when it is ready
+    setLogIn: (fn: LogIn | MFA) => {
+      logInFn = fn;
+    },
+    setRecover: (fn: Recover) => {
+      recoverFn = fn;
+    },
+    setCancel: (fn: Cancel) => {
+      cancelFn = fn;
+    },
+    state,
+  };
+}
+
+export type Flow = ReturnType<typeof createAuthFlow>;
diff --git a/packages/react/src/components/form/org-switching/org-switching-flow.ts b/packages/react/src/components/form/flow/org-switching-flow.ts
similarity index 96%
rename from packages/react/src/components/form/org-switching/org-switching-flow.ts
rename to packages/react/src/components/form/flow/org-switching-flow.ts
index 55fa316c..dff6c563 100644
--- a/packages/react/src/components/form/org-switching/org-switching-flow.ts
+++ b/packages/react/src/components/form/flow/org-switching-flow.ts
@@ -8,9 +8,9 @@ import {
   HistoryEntry,
   createTransitionFunction,
   FlowState,
-} from "../flow/flow.common";
+} from "./flow.common";
 
-const authFlowConfig: FlowConfig = {
+const orgSwitchingFlowConfig: FlowConfig = {
   propagateFlowCancelled: true,
   resetOnCancel: false,
 };
@@ -44,7 +44,8 @@ export function createFlow(opts: CreateFlowOptions) {
   const setRecoveryCodes = (codes: string[]) => {
     recoveryCodes = codes;
   };
-
+  
+  // notify subscribers every time the state changes
   function setState(newState: FlowState, changeEvent: Event) {
     state = newState;
 
@@ -68,14 +69,12 @@ export function createFlow(opts: CreateFlowOptions) {
     logInFn!,
     recoverFn!,
     setRecoveryCodes,
-    authFlowConfig
+    orgSwitchingFlowConfig
   );
 
   // each history entry contains a state and the event that triggered the transition to that state
   const history: HistoryEntry[] = [{ state, event: { type: "sid_init" } }];
 
-  // notify subscribers every time the state changes
-
   const transition = createTransitionFunction({
     send,
     setState,
@@ -88,7 +87,7 @@ export function createFlow(opts: CreateFlowOptions) {
     setRecoveryCodes: (codes) => {
       recoveryCodes = codes;
     },
-    config: authFlowConfig,
+    config: orgSwitchingFlowConfig,
   });
 
   // provide the flow API - interact with the flow using the state object, subscribe and unsubscribe to state changes
diff --git a/packages/react/src/components/form/form.tsx b/packages/react/src/components/form/form.tsx
index 02df244c..d5d0ddc2 100644
--- a/packages/react/src/components/form/form.tsx
+++ b/packages/react/src/components/form/form.tsx
@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 import { useFlowState } from "./useFlowState";
-import { CreateFlowOptions } from "./flow";
+import { CreateFlowOptions } from "./flow/flow.common";
 import { Initial } from "./initial";
 import { Authenticating } from "./authenticating";
 import { Error } from "./error";
diff --git a/packages/react/src/components/form/initial/index.tsx b/packages/react/src/components/form/initial/index.tsx
index 6ee0f11d..1cb7c3e1 100644
--- a/packages/react/src/components/form/initial/index.tsx
+++ b/packages/react/src/components/form/initial/index.tsx
@@ -10,7 +10,7 @@ import {
   LoginOptions,
 } from "../../../domain/types";
 import { useConfiguration } from "../../../hooks/use-configuration";
-import { InitialState } from "../flow";
+import { InitialState } from "../flow/flow.common";
 
 import { Controls } from "./controls";
 import { LogoSlot } from "./logo";
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index 63e756f7..5b3076de 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useSlashID } from "../../../hooks/use-slash-id";
-import { Flow, createFlow } from "./org-switching-flow";
+import { Flow, createFlow } from "../flow/org-switching-flow";
 import { Handle } from "../../../domain/types";
 import { FlowState, CreateFlowOptions } from "../flow/flow.common";
 
diff --git a/packages/react/src/components/form/success.tsx b/packages/react/src/components/form/success.tsx
index 1a196856..f885f7a2 100644
--- a/packages/react/src/components/form/success.tsx
+++ b/packages/react/src/components/form/success.tsx
@@ -1,6 +1,6 @@
 import { Circle } from "@slashid/react-primitives";
 import { Text } from "../text";
-import { SuccessState } from "./flow";
+import { SuccessState } from "./flow/flow.common";
 
 const CheckIcon = () => (
   <Circle variant="primary">
diff --git a/packages/react/src/components/form/useFlowState.ts b/packages/react/src/components/form/useFlowState.ts
index 399d2748..8a96ade2 100644
--- a/packages/react/src/components/form/useFlowState.ts
+++ b/packages/react/src/components/form/useFlowState.ts
@@ -1,11 +1,12 @@
 import { useEffect, useRef, useState } from "react";
 
 import { useSlashID } from "../../hooks/use-slash-id";
-import { Flow, createFlow, FlowState, CreateFlowOptions } from "./flow";
+import { Flow, createAuthFlow } from "./flow/auth-flow";
+import { FlowState, CreateFlowOptions } from "./flow/flow.common";
 
 export function useFlowState(opts: CreateFlowOptions = {}) {
   const { logIn, mfa, recover, user, sdkState, sid } = useSlashID();
-  const flowRef = useRef<Flow>(createFlow(opts));
+  const flowRef = useRef<Flow>(createAuthFlow(opts));
   const [state, setState] = useState<FlowState>(flowRef.current.state);
 
   useEffect(() => {
diff --git a/packages/react/src/dev.tsx b/packages/react/src/dev.tsx
index bf0bcc6f..6edf88fc 100644
--- a/packages/react/src/dev.tsx
+++ b/packages/react/src/dev.tsx
@@ -19,7 +19,7 @@ import {
 } from "./main";
 import { defaultOrganization } from "./middleware/default-organization";
 import { Slot } from "./components/slot";
-import { AuthenticatingState } from "./components/form/flow";
+import { AuthenticatingState } from "./components/form/flow/flow.common";
 import { Authenticating } from "./components/form";
 import { OrgSwitchingForm } from "./components/form/org-switching/org-switching-form";
 

From b7c7b7b62dcad4b92d508e3765c4bd7c50ec59be Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 11 Feb 2025 13:57:29 +0100
Subject: [PATCH 29/31] Use null factor

---
 .../react/src/components/form/flow/org-switching-flow.ts   | 7 +++----
 packages/react/src/domain/handles.ts                       | 4 ++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/form/flow/org-switching-flow.ts b/packages/react/src/components/form/flow/org-switching-flow.ts
index dff6c563..3c862af6 100644
--- a/packages/react/src/components/form/flow/org-switching-flow.ts
+++ b/packages/react/src/components/form/flow/org-switching-flow.ts
@@ -1,3 +1,4 @@
+import { NULL_FACTOR } from "../../../domain/handles";
 import { Cancel, LogIn, MFA, Recover } from "../../../domain/types";
 import {
   CreateFlowOptions,
@@ -44,7 +45,7 @@ export function createFlow(opts: CreateFlowOptions) {
   const setRecoveryCodes = (codes: string[]) => {
     recoveryCodes = codes;
   };
-  
+
   // notify subscribers every time the state changes
   function setState(newState: FlowState, changeEvent: Event) {
     state = newState;
@@ -59,9 +60,7 @@ export function createFlow(opts: CreateFlowOptions) {
     send,
     {
       config: {
-        factor: {
-          method: "email_link",
-        },
+        factor: NULL_FACTOR, // will be replaced by authn context update
         handle: opts.lastUserHandle,
       },
       attempt: 0,
diff --git a/packages/react/src/domain/handles.ts b/packages/react/src/domain/handles.ts
index d4ac2e30..99fd585b 100644
--- a/packages/react/src/domain/handles.ts
+++ b/packages/react/src/domain/handles.ts
@@ -200,3 +200,7 @@ export function parsePhoneNumber(
     }
   }
 }
+
+export const NULL_FACTOR: Factor = {
+  method: "email_link",
+};

From 26f1db942f232614d8a9d90416575c4095815708 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 11 Feb 2025 14:00:12 +0100
Subject: [PATCH 30/31] Rename symbol

---
 packages/react/src/components/form/flow/org-switching-flow.ts | 4 ++--
 .../components/form/org-switching/useOrgSwitchingFlowState.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/form/flow/org-switching-flow.ts b/packages/react/src/components/form/flow/org-switching-flow.ts
index 3c862af6..0b3a2e79 100644
--- a/packages/react/src/components/form/flow/org-switching-flow.ts
+++ b/packages/react/src/components/form/flow/org-switching-flow.ts
@@ -31,7 +31,7 @@ const orgSwitchingFlowConfig: FlowConfig = {
  * @param opts
  * @returns
  */
-export function createFlow(opts: CreateFlowOptions) {
+export function createOrgSwitchingFlow(opts: CreateFlowOptions) {
   let state: FlowState;
   let logInFn: undefined | LogIn | MFA = opts.logInFn;
   let recoverFn: undefined | Recover = opts.recover;
@@ -112,4 +112,4 @@ export function createFlow(opts: CreateFlowOptions) {
   };
 }
 
-export type Flow = ReturnType<typeof createFlow>;
+export type Flow = ReturnType<typeof createOrgSwitchingFlow>;
diff --git a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
index 5b3076de..a76e170b 100644
--- a/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
+++ b/packages/react/src/components/form/org-switching/useOrgSwitchingFlowState.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useSlashID } from "../../../hooks/use-slash-id";
-import { Flow, createFlow } from "../flow/org-switching-flow";
+import { Flow, createOrgSwitchingFlow } from "../flow/org-switching-flow";
 import { Handle } from "../../../domain/types";
 import { FlowState, CreateFlowOptions } from "../flow/flow.common";
 
@@ -18,7 +18,7 @@ export function useOrgSwitchingFlowState(opts: CreateFlowOptions) {
   }, [user]);
 
   const flowRef = useRef<Flow>(
-    createFlow({
+    createOrgSwitchingFlow({
       lastUserHandle,
       ...opts,
       logInFn: async () => {

From 1220cb964dcd13d22a355cd9e76bfd2a8bf1bdb2 Mon Sep 17 00:00:00 2001
From: Kasper Mroz <kasper@slashid.dev>
Date: Tue, 11 Feb 2025 15:57:39 +0100
Subject: [PATCH 31/31] Define handlers per flow

---
 .../src/components/form/flow/auth-flow.ts     |  55 ++--
 .../src/components/form/flow/flow.common.ts   | 249 +++++++++---------
 .../form/flow/org-switching-flow.ts           |  53 ++--
 packages/react/src/mocks/handlers.ts          |   5 +
 4 files changed, 198 insertions(+), 164 deletions(-)

diff --git a/packages/react/src/components/form/flow/auth-flow.ts b/packages/react/src/components/form/flow/auth-flow.ts
index c413f92b..757bd76d 100644
--- a/packages/react/src/components/form/flow/auth-flow.ts
+++ b/packages/react/src/components/form/flow/auth-flow.ts
@@ -1,18 +1,36 @@
 import { Cancel, LogIn, MFA, Recover } from "../../../domain/types";
 import {
   CreateFlowOptions,
-  FlowConfig,
   Observer,
   Event,
   createInitialState,
   HistoryEntry,
   createTransitionFunction,
   FlowState,
+  FlowHandlers,
+  loginHandler,
+  storeRecoveryCodesHandler,
+  loginUpdateContextHandler,
+  loginSuccessHandler,
+  loginErrorHandler,
+  retryHandler,
 } from "./flow.common";
 
-const authFlowConfig: FlowConfig = {
-  propagateFlowCancelled: false,
-  resetOnCancel: true,
+const authFlowHandlers: FlowHandlers = {
+  sid_login: loginHandler,
+  sid_storeRecoveryCodes: storeRecoveryCodesHandler,
+  "sid_login.update_context": loginUpdateContextHandler,
+  "sid_login.success": loginSuccessHandler,
+  "sid_login.error": loginErrorHandler,
+  sid_retry: retryHandler,
+  sid_cancel: (event, state, deps) => {
+    const cancelFn = deps.getCancelFn();
+    if (cancelFn) {
+      cancelFn();
+    }
+
+    deps.setState(createInitialState(deps.send), event);
+  },
 };
 
 /**
@@ -55,20 +73,23 @@ export function createAuthFlow(opts: CreateFlowOptions = {}) {
     observers.forEach((o) => o(state, changeEvent));
   }
 
-  const transition = createTransitionFunction({
-    send,
-    setState,
-    getLogInFn: () => logInFn,
-    getRecoverFn: () => recoverFn,
-    getCancelFn: () => cancelFn,
-    onSuccess: opts.onSuccess,
-    onError: opts.onError,
-    getRecoveryCodes: () => recoveryCodes,
-    setRecoveryCodes: (codes) => {
-      recoveryCodes = codes;
+  const transition = createTransitionFunction(
+    {
+      send,
+      setState,
+      getLogInFn: () => logInFn,
+      getRecoverFn: () => recoverFn,
+      getCancelFn: () => cancelFn,
+      onSuccess: opts.onSuccess,
+      onError: opts.onError,
+      getRecoveryCodes: () => recoveryCodes,
+      setRecoveryCodes: (codes) => {
+        recoveryCodes = codes;
+      },
+      propagateFlowCancelledError: false,
     },
-    config: authFlowConfig,
-  });
+    authFlowHandlers
+  );
 
   // provide the flow API - interact with the flow using the state object, subscribe and unsubscribe to state changes
   return {
diff --git a/packages/react/src/components/form/flow/flow.common.ts b/packages/react/src/components/form/flow/flow.common.ts
index afdd2180..c6530fb2 100644
--- a/packages/react/src/components/form/flow/flow.common.ts
+++ b/packages/react/src/components/form/flow/flow.common.ts
@@ -130,7 +130,7 @@ export const createAuthenticatingState = (
   logInFn: LogIn | MFA,
   recoverFn: Recover,
   setRecoveryCodes: (codes: string[]) => void,
-  config: FlowConfig
+  propagateFlowCancelled: boolean
 ): AuthenticatingState => {
   function performLogin() {
     if (!logInFn) return;
@@ -155,9 +155,10 @@ export const createAuthenticatingState = (
       })
       .catch((error) => {
         if (Errors.isFlowCancelledError(error)) {
-          if (config.propagateFlowCancelled) {
+          if (propagateFlowCancelled) {
             throw error;
           }
+          return;
         }
         send({ type: "sid_login.error", error });
       });
@@ -269,11 +270,6 @@ export type CreateFlowOptions = {
   lastUserHandle?: Handle;
 };
 
-export type FlowConfig = {
-  propagateFlowCancelled: boolean;
-  resetOnCancel: boolean;
-};
-
 type AsyncDependencies = {
   getLogInFn: () => LogIn | MFA | undefined;
   getRecoverFn: () => Recover | undefined;
@@ -290,7 +286,7 @@ type StaticDependencies = {
   ) => void;
   getRecoveryCodes: () => string[] | undefined;
   setRecoveryCodes: (codes: string[]) => void;
-  config: FlowConfig;
+  propagateFlowCancelledError: boolean;
 };
 
 type FlowDependencies = AsyncDependencies & StaticDependencies;
@@ -305,141 +301,136 @@ const isSDKReady = (deps: FlowDependencies): boolean => {
   return !!(deps.getLogInFn() && deps.getRecoverFn());
 };
 
-const HANDLERS: Record<Event["type"], TransitionHandler> = {
-  sid_login: (event, state, deps) => {
-    if (!isSDKReady(deps)) return;
-    const e = event as Event & { type: "sid_login" };
-    const logInFn = deps.getLogInFn()!;
-    const recoverFn = deps.getRecoverFn()!;
-
-    const loginContext: AuthenticatingState["context"] = {
-      config: e.config,
-      options: e.options,
-      attempt: 1,
-    };
-
-    deps.setState(
-      createAuthenticatingState(
-        deps.send,
-        loginContext,
-        logInFn,
-        recoverFn,
-        deps.setRecoveryCodes,
-        deps.config
-      ),
-      event
-    );
-  },
-
-  sid_storeRecoveryCodes: (event, state, deps) => {
-    const e = event as Event & { type: "sid_storeRecoveryCodes" };
-    const codes = deps.getRecoveryCodes();
-
-    if (!codes) {
-      deps.send({ type: "sid_login.success", user: e.user });
-      return;
-    }
+export const loginHandler: TransitionHandler = (event, state, deps) => {
+  if (!isSDKReady(deps)) return;
+  const e = event as Event & { type: "sid_login" };
+  const logInFn = deps.getLogInFn()!;
+  const recoverFn = deps.getRecoverFn()!;
 
-    deps.setState(
-      createStoreRecoveryCodesState(deps.send, codes, e.user),
-      event
-    );
-  },
-
-  "sid_login.update_context": (event, state, deps) => {
-    if (!isSDKReady(deps)) return;
-    const e = event as Event & { type: "sid_login.update_context" };
-    const logInFn = deps.getLogInFn()!;
-    const recoverFn = deps.getRecoverFn()!;
-
-    deps.setState(
-      createAuthenticatingState(
-        deps.send,
-        e.context,
-        logInFn,
-        recoverFn,
-        deps.setRecoveryCodes,
-        deps.config
-      ),
-      event
-    );
-  },
-
-  "sid_login.success": (event, state, deps) => {
-    const e = event as Event & { type: "sid_login.success" };
-
-    if (deps.onSuccess) {
-      deps.onSuccess(e.user);
-    }
+  const loginContext: AuthenticatingState["context"] = {
+    config: e.config,
+    options: e.options,
+    attempt: 1,
+  };
 
-    deps.setState(createSuccessState(), event);
-  },
+  deps.setState(
+    createAuthenticatingState(
+      deps.send,
+      loginContext,
+      logInFn,
+      recoverFn,
+      deps.setRecoveryCodes,
+      deps.propagateFlowCancelledError
+    ),
+    event
+  );
+};
 
-  "sid_login.error": (event, state, deps) => {
-    if (state.status !== "authenticating") return;
-    const e = event as Event & { type: "sid_login.error" };
+export const storeRecoveryCodesHandler: TransitionHandler = (
+  event,
+  state,
+  deps
+) => {
+  const e = event as Event & { type: "sid_storeRecoveryCodes" };
+  const codes = deps.getRecoveryCodes();
+
+  if (!codes) {
+    deps.send({ type: "sid_login.success", user: e.user });
+    return;
+  }
 
-    const errorContext = {
-      ...state.context,
-      error: ensureError(e.error),
-    };
+  deps.setState(createStoreRecoveryCodesState(deps.send, codes, e.user), event);
+};
 
-    if (deps.onError) {
-      deps.onError(e.error, errorContext);
-    }
+export const loginUpdateContextHandler: TransitionHandler = (
+  event,
+  state,
+  deps
+) => {
+  if (!isSDKReady(deps)) return;
+  const e = event as Event & { type: "sid_login.update_context" };
+  const logInFn = deps.getLogInFn()!;
+  const recoverFn = deps.getRecoverFn()!;
+
+  deps.setState(
+    createAuthenticatingState(
+      deps.send,
+      e.context,
+      logInFn,
+      recoverFn,
+      deps.setRecoveryCodes,
+      deps.propagateFlowCancelledError
+    ),
+    event
+  );
+};
 
-    deps.setState(createErrorState(deps.send, errorContext), event);
-  },
+export const loginSuccessHandler: TransitionHandler = (event, state, deps) => {
+  const e = event as Event & { type: "sid_login.success" };
 
-  sid_retry: (event, state, deps) => {
-    if (!isSDKReady(deps)) return;
-    const e = event as Event & { type: "sid_retry" };
-    const logInFn = deps.getLogInFn()!;
-    const recoverFn = deps.getRecoverFn()!;
-    const cancelFn = deps.getCancelFn();
+  if (deps.onSuccess) {
+    deps.onSuccess(e.user);
+  }
 
-    if (cancelFn) {
-      cancelFn();
-    }
+  deps.setState(createSuccessState(), event);
+};
 
-    if (e.policy === "reset") {
-      deps.setState(createInitialState(deps.send), event);
-      return;
-    }
+export const loginErrorHandler: TransitionHandler = (event, state, deps) => {
+  if (state.status !== "authenticating") return;
+  const e = event as Event & { type: "sid_login.error" };
 
-    deps.setState(
-      createAuthenticatingState(
-        deps.send,
-        {
-          ...e.context,
-          attempt: e.context.attempt + 1,
-        },
-        logInFn,
-        recoverFn,
-        deps.setRecoveryCodes,
-        deps.config
-      ),
-      event
-    );
-  },
-
-  sid_cancel: (event, state, deps) => {
-    const cancelFn = deps.getCancelFn();
-    if (cancelFn) {
-      cancelFn();
-    }
+  const errorContext = {
+    ...state.context,
+    error: ensureError(e.error),
+  };
 
-    if (deps.config.resetOnCancel) {
-      deps.setState(createInitialState(deps.send), event);
-    }
-  },
+  if (deps.onError) {
+    deps.onError(e.error, errorContext);
+  }
+
+  deps.setState(createErrorState(deps.send, errorContext), event);
+};
+
+export const retryHandler: TransitionHandler = (event, state, deps) => {
+  if (!isSDKReady(deps)) return;
+  const e = event as Event & { type: "sid_retry" };
+  const logInFn = deps.getLogInFn()!;
+  const recoverFn = deps.getRecoverFn()!;
+  const cancelFn = deps.getCancelFn();
+
+  if (cancelFn) {
+    cancelFn();
+  }
+
+  if (e.policy === "reset") {
+    deps.setState(createInitialState(deps.send), event);
+    return;
+  }
+
+  deps.setState(
+    createAuthenticatingState(
+      deps.send,
+      {
+        ...e.context,
+        attempt: e.context.attempt + 1,
+      },
+      logInFn,
+      recoverFn,
+      deps.setRecoveryCodes,
+      deps.propagateFlowCancelledError
+    ),
+    event
+  );
+};
 
-  sid_init: () => {},
-} as const;
+export type FlowHandlers = Partial<Record<Event["type"], TransitionHandler>>;
 
-export function createTransitionFunction(deps: FlowDependencies) {
+export function createTransitionFunction(
+  deps: FlowDependencies,
+  handlers: FlowHandlers
+) {
   return function transition(event: Event, state: FlowState) {
-    const handler = HANDLERS[event.type];
+    const handler = handlers[event.type];
     if (handler) {
       handler(event, state, deps);
     }
diff --git a/packages/react/src/components/form/flow/org-switching-flow.ts b/packages/react/src/components/form/flow/org-switching-flow.ts
index 0b3a2e79..8c503bec 100644
--- a/packages/react/src/components/form/flow/org-switching-flow.ts
+++ b/packages/react/src/components/form/flow/org-switching-flow.ts
@@ -2,18 +2,32 @@ import { NULL_FACTOR } from "../../../domain/handles";
 import { Cancel, LogIn, MFA, Recover } from "../../../domain/types";
 import {
   CreateFlowOptions,
-  FlowConfig,
   Observer,
   Event,
   createAuthenticatingState,
   HistoryEntry,
   createTransitionFunction,
   FlowState,
+  FlowHandlers,
+  storeRecoveryCodesHandler,
+  loginUpdateContextHandler,
+  loginSuccessHandler,
+  loginErrorHandler,
+  retryHandler,
 } from "./flow.common";
 
-const orgSwitchingFlowConfig: FlowConfig = {
-  propagateFlowCancelled: true,
-  resetOnCancel: false,
+const orgSwitchingFlowHandlers: FlowHandlers = {
+  sid_storeRecoveryCodes: storeRecoveryCodesHandler,
+  "sid_login.update_context": loginUpdateContextHandler,
+  "sid_login.success": loginSuccessHandler,
+  "sid_login.error": loginErrorHandler,
+  sid_retry: retryHandler,
+  sid_cancel: (event, state, deps) => {
+    const cancelFn = deps.getCancelFn();
+    if (cancelFn) {
+      cancelFn();
+    }
+  },
 };
 
 /**
@@ -68,26 +82,29 @@ export function createOrgSwitchingFlow(opts: CreateFlowOptions) {
     logInFn!,
     recoverFn!,
     setRecoveryCodes,
-    orgSwitchingFlowConfig
+    true // propagateFlowCancelledError
   );
 
   // each history entry contains a state and the event that triggered the transition to that state
   const history: HistoryEntry[] = [{ state, event: { type: "sid_init" } }];
 
-  const transition = createTransitionFunction({
-    send,
-    setState,
-    getLogInFn: () => logInFn,
-    getRecoverFn: () => recoverFn,
-    getCancelFn: () => cancelFn,
-    onSuccess: opts.onSuccess,
-    onError: opts.onError,
-    getRecoveryCodes: () => recoveryCodes,
-    setRecoveryCodes: (codes) => {
-      recoveryCodes = codes;
+  const transition = createTransitionFunction(
+    {
+      send,
+      setState,
+      getLogInFn: () => logInFn,
+      getRecoverFn: () => recoverFn,
+      getCancelFn: () => cancelFn,
+      onSuccess: opts.onSuccess,
+      onError: opts.onError,
+      getRecoveryCodes: () => recoveryCodes,
+      setRecoveryCodes: (codes) => {
+        recoveryCodes = codes;
+      },
+      propagateFlowCancelledError: true,
     },
-    config: orgSwitchingFlowConfig,
-  });
+    orgSwitchingFlowHandlers
+  );
 
   // provide the flow API - interact with the flow using the state object, subscribe and unsubscribe to state changes
   return {
diff --git a/packages/react/src/mocks/handlers.ts b/packages/react/src/mocks/handlers.ts
index 1ca4c94e..055a5626 100644
--- a/packages/react/src/mocks/handlers.ts
+++ b/packages/react/src/mocks/handlers.ts
@@ -92,6 +92,11 @@ export const handlers = [
       return res(ctx.status(200), ctx.json({ result: { valid: true } }));
     })
   ),
+  ...[route, routeProduction, routeCustom].map((r) =>
+    rest.post(r("/token/revoke"), (_, res, ctx) => {
+      return res(ctx.status(200), ctx.json({}));
+    })
+  ),
   ...[route, routeProduction, routeCustom].map((r) =>
     rest.post(r("/actions/sdk"), (_, res, ctx) => {
       return res(ctx.status(200), ctx.json({}));