fix(react): fix stale SSR state during cross-tab sign-out

Author: bratsos

integration/tests/transitions.test.ts

@@ -189,4 +189,44 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('transitio
       .expect(u.po.page.getByTestId('fetcher-result'))
       .toHaveText(`Fetched value: ${fakeOrganization.organization.id}`);
   });
+
+  /*
+    This test verifies that when a user signs out in one browser tab, other tabs detect the sign-out
+    and redirect to the sign-in page without hanging. This tests the fix for the cross-tab sign-out bug
+    where useAuthBase would return stale initialState instead of undefined during the sign-out transition.
+
+    The expected behavior is:
+    1. Tab 1 and Tab 2 are both authenticated and viewing a protected page
+    2. User signs out in Tab 2
+    3. Tab 1 should detect the sign-out via BroadcastChannel
+    4. Tab 1 should redirect to sign-in (not hang with stale session data)
+  */
+  test('should redirect background tabs to sign-in when user signs out in another tab', async ({ page, context }) => {
+    const u1 = createTestUtils({ app, page, context });
+
+    await u1.po.signIn.goTo();
+    await u1.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u1.po.expect.toBeSignedIn();
+
+    await u1.po.page.goToRelative('/protected');
+    await u1.po.expect.toBeSignedIn();
+
+    const page2 = await context.newPage();
+    const u2 = createTestUtils({ app, page: page2, context });
+
+    await u2.po.page.goToRelative('/');
+    await u2.po.expect.toBeSignedIn();
+
+    await u2.po.userButton.waitForMounted();
+    await u2.po.userButton.toggleTrigger();
+    await u2.po.userButton.waitForPopover();
+    await u2.po.userButton.triggerSignOut();
+
+    await u2.po.expect.toBeSignedOut();
+
+    await test.expect(page).toHaveURL(/.*sign-in.*/);
+    await u1.po.expect.toBeSignedOut();
+
+    await page2.close();
+  });
 });

packages/react/src/hooks/useAuthBase.tsx

@@ -46,11 +46,20 @@ export function useAuthBase(): AuthStateValue {
   const state = useSyncExternalStore(
     useCallback(callback => clerk.addListener(callback, { skipInitialEmit: true }), [clerk]),
     useCallback(() => {
-      if (!clerk.loaded || !clerk.__internal_lastEmittedResources) {
+      const loaded = clerk.loaded;
+      const hasResources = !!clerk.__internal_lastEmittedResources;
+
+      if (!loaded && !hasResources) {
         return getInitialState();
       }
 
-      return clerk.__internal_lastEmittedResources;
+      // Once clerk is loaded or we have resources, never fall back to initialState
+      // because initialState is a frozen SSR snapshot that can contain stale auth data
+      if (hasResources) {
+        return clerk.__internal_lastEmittedResources;
+      }
+
+      return undefined;
     }, [clerk, getInitialState]),
     getInitialState,
   );