fix: handle log out error screen (#1698)

If you clicked log out, it would trigger the errorr boundary, saying "Unauthenticated", this fixes that.

Author: jonathanlab

apps/code/src/renderer/App.tsx

@@ -143,6 +143,9 @@ function App() {
     if (!wasInMainApp.current && isInMainApp && isDarkMode) {
       setShowTransition(true);
     }
+    if (!isAuthenticated) {
+      setShowTransition(false);
+    }
     wasInMainApp.current = isInMainApp;
   }, [isAuthenticated, hasCompletedOnboarding, isDarkMode]);
 
@@ -214,9 +217,15 @@ function App() {
     );
   };
 
+  const content = renderContent();
+
   return (
     <ErrorBoundary name="App">
-      <AnimatePresence mode="wait">{renderContent()}</AnimatePresence>
+      {isAuthenticated ? (
+        <AnimatePresence mode="wait">{content}</AnimatePresence>
+      ) : (
+        content
+      )}
       <LoginTransition
         isAnimating={showTransition}
         isDarkMode={isDarkMode}

apps/code/src/renderer/features/auth/hooks/authMutations.ts

@@ -77,15 +77,16 @@ export function useLogoutMutation() {
       track(ANALYTICS_EVENTS.USER_LOGGED_OUT);
       resetSessionService();
 
-      const state = await trpcClient.auth.logout.mutate();
-      return { state, previousState };
+      return { previousState };
     },
     onSuccess: async ({ previousState }) => {
-      await refreshAuthStateQuery();
       clearAuthScopedQueries();
       useAuthUiStateStore.getState().setStaleRegion(previousState.cloudRegion);
       useNavigationStore.getState().navigateToTaskInput();
       useOnboardingStore.getState().resetSelections();
+
+      await trpcClient.auth.logout.mutate();
+      await refreshAuthStateQuery();
     },
   });
 }

apps/code/src/renderer/features/auth/stores/authStore.test.ts

@@ -192,4 +192,28 @@ describe("authStore", () => {
       exact: true,
     });
   });
+
+  it("clears auth state immediately on logout before the auth service responds", async () => {
+    mockGetState.query.mockResolvedValue(authenticatedState);
+    let resolveLogout!: () => void;
+    mockLogout.mutate.mockImplementation(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveLogout = () => resolve(undefined);
+        }),
+    );
+
+    await useAuthStore.getState().checkCodeAccess();
+
+    const logoutPromise = useAuthStore.getState().logout();
+    await Promise.resolve();
+
+    expect(useAuthStore.getState().isAuthenticated).toBe(false);
+    expect(useAuthStore.getState().client).toBeNull();
+    expect(useAuthStore.getState().projectId).toBeNull();
+    expect(useAuthStore.getState().needsScopeReauth).toBe(false);
+
+    resolveLogout();
+    await logoutPromise;
+  });
 });

apps/code/src/renderer/features/auth/stores/authStore.ts

@@ -243,9 +243,6 @@ export const useAuthStore = create<AuthStoreState>((set) => ({
     sessionResetCallback?.();
     useSeatStore.getState().reset();
     useSettingsDialogStore.getState().close();
-    clearAuthenticatedRendererState({ clearAllQueries: true });
-    await trpcClient.auth.logout.mutate();
-    useNavigationStore.getState().navigateToTaskInput();
 
     set((state) => ({
       ...state,
@@ -263,5 +260,9 @@ export const useAuthStore = create<AuthStoreState>((set) => ({
     inFlightAuthSync = null;
     inFlightAuthSyncKey = null;
     lastCompletedAuthSyncKey = null;
+
+    clearAuthenticatedRendererState({ clearAllQueries: true });
+    useNavigationStore.getState().navigateToTaskInput();
+    await trpcClient.auth.logout.mutate();
   },
 }));