Add extra safeguard for double-invoke

Author: Ephem

packages/ui/src/mosaic/features/reverification/__tests__/use-reverification-with-state.test.tsx

@@ -95,6 +95,56 @@ describe('useReverificationWithState', () => {
     expect(result.current[1].isActive).toBe(false);
   });
 
+  it('cancels an overlapping challenge and preserves the active challenge', () => {
+    const { result } = renderHook(() => useReverificationWithState(fetcher));
+    const firstComplete = vi.fn();
+    const firstCancel = vi.fn();
+    const secondComplete = vi.fn();
+    const secondCancel = vi.fn();
+
+    act(() => {
+      capturedOnNeeds?.({ complete: firstComplete, cancel: firstCancel, level: 'first_factor' });
+      capturedOnNeeds?.({ complete: secondComplete, cancel: secondCancel, level: 'multi_factor' });
+    });
+
+    expect(secondCancel).toHaveBeenCalledOnce();
+    expect(result.current[1]).toMatchObject({ isActive: true, level: 'first_factor' });
+
+    act(() => {
+      const [, state] = result.current;
+      if (state.isActive) {
+        state.complete();
+      }
+    });
+
+    expect(firstComplete).toHaveBeenCalledOnce();
+    expect(firstCancel).not.toHaveBeenCalled();
+    expect(secondComplete).not.toHaveBeenCalled();
+  });
+
+  it('allows another challenge after the active challenge settles', () => {
+    const { result } = renderHook(() => useReverificationWithState(fetcher));
+    const firstComplete = vi.fn();
+    const secondCancel = vi.fn();
+
+    act(() => {
+      capturedOnNeeds?.({ complete: firstComplete, cancel: vi.fn(), level: 'first_factor' });
+    });
+    act(() => {
+      const [, state] = result.current;
+      if (state.isActive) {
+        state.complete();
+      }
+    });
+    act(() => {
+      capturedOnNeeds?.({ complete: vi.fn(), cancel: secondCancel, level: 'multi_factor' });
+    });
+
+    expect(firstComplete).toHaveBeenCalledOnce();
+    expect(secondCancel).not.toHaveBeenCalled();
+    expect(result.current[1]).toMatchObject({ isActive: true, level: 'multi_factor' });
+  });
+
   it('cancels when the session changes after reverification opens', async () => {
     const { result, rerender } = renderHook(() => useReverificationWithState(fetcher));
     const cancel = vi.fn();

packages/ui/src/mosaic/features/reverification/use-reverification-with-state.ts

@@ -25,32 +25,43 @@ export function useReverificationWithState<F extends Fetcher>(
   const { session } = useSession();
   const [reverificationState, setReverificationState] = useState<ReverificationProps>({ isActive: false });
   const openedSessionId = useRef<string | null>(null);
-  const cancelOnUnmountRef = useRef<(() => void) | undefined>(undefined);
+  const activeCancelRef = useRef<(() => void) | undefined>(undefined);
 
   const wrapped = useReverification(fetcher, {
     ...options,
     onNeedsReverification: ({ complete, cancel, level }) => {
+      // If another Reverification is already in progress for this specific
+      // wrapped action, cancel this new one immediately and keep the old one.
+      // This is an extra safeguard for something that likely never happens.
+      if (activeCancelRef.current) {
+        cancel();
+        return;
+      }
+
       openedSessionId.current = session?.id ?? null;
+      activeCancelRef.current = cancel;
+
+      const settle = (callback: () => void) => {
+        if (activeCancelRef.current !== cancel) {
+          return;
+        }
+        activeCancelRef.current = undefined;
+        setReverificationState({ isActive: false });
+        callback();
+      };
+
       setReverificationState({
         isActive: true,
         level,
-        complete: () => {
-          setReverificationState({ isActive: false });
-          complete();
-        },
-        cancel: () => {
-          setReverificationState({ isActive: false });
-          cancel();
-        },
+        complete: () => settle(complete),
+        cancel: () => settle(cancel),
       });
     },
   });
 
   // Cancel if the session changes mid-flight
   const { isActive, cancel } = reverificationState;
   useEffect(() => {
-    cancelOnUnmountRef.current = isActive ? cancel : undefined;
-
     if (!isActive) {
       openedSessionId.current = null;
       return;
@@ -74,7 +85,9 @@ export function useReverificationWithState<F extends Fetcher>(
 
   useEffect(() => {
     return () => {
-      cancelOnUnmountRef.current?.();
+      const cancel = activeCancelRef.current;
+      activeCancelRef.current = undefined;
+      cancel?.();
     };
   }, []);