hotfix(frontend): clear cache account on logout

Author: 0ubbe

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/AccountMenu.tsx

@@ -3,29 +3,32 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/__legacy__/ui/popover";
-import Link from "next/link";
-import * as React from "react";
-import { getAccountMenuOptionIcon, MenuItemGroup } from "../../helpers";
-import { AccountLogoutOption } from "./components/AccountLogoutOption";
-import { PublishAgentModal } from "@/components/contextual/PublishAgentModal/PublishAgentModal";
+import { Skeleton } from "@/components/__legacy__/ui/skeleton";
 import Avatar, {
   AvatarFallback,
   AvatarImage,
 } from "@/components/atoms/Avatar/Avatar";
+import { PublishAgentModal } from "@/components/contextual/PublishAgentModal/PublishAgentModal";
+import Link from "next/link";
+import * as React from "react";
+import { getAccountMenuOptionIcon, MenuItemGroup } from "../../helpers";
+import { AccountLogoutOption } from "./components/AccountLogoutOption";
 
 interface Props {
   userName?: string;
   userEmail?: string;
   avatarSrc?: string;
   hideNavBarUsername?: boolean;
   menuItemGroups: MenuItemGroup[];
+  isLoading?: boolean;
 }
 
 export function AccountMenu({
   userName,
   userEmail,
   avatarSrc,
   menuItemGroups,
+  isLoading = false,
 }: Props) {
   const popupId = React.useId();
 
@@ -63,15 +66,24 @@ export function AccountMenu({
             </AvatarFallback>
           </Avatar>
           <div className="relative flex h-[47px] w-[173px] flex-col items-start justify-center gap-1">
-            <div className="max-w-[10.5rem] truncate font-sans text-base font-semibold leading-none text-white dark:text-neutral-200">
-              {userName}
-            </div>
-            <div
-              data-testid="account-menu-user-email"
-              className="max-w-[10.5rem] truncate font-sans text-base font-normal leading-none text-white dark:text-neutral-400"
-            >
-              {userEmail}
-            </div>
+            {isLoading || !userName || !userEmail ? (
+              <>
+                <Skeleton className="h-4 w-24 bg-white/40" />
+                <Skeleton className="h-4 w-32 bg-white/40" />
+              </>
+            ) : (
+              <>
+                <div className="max-w-[10.5rem] truncate font-sans text-base font-semibold leading-none text-white dark:text-neutral-200">
+                  {userName}
+                </div>
+                <div
+                  data-testid="account-menu-user-email"
+                  className="max-w-[10.5rem] truncate font-sans text-base font-normal leading-none text-white dark:text-neutral-400"
+                >
+                  {userEmail}
+                </div>
+              </>
+            )}
           </div>
         </div>
 

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/AccountLogoutOption.tsx

@@ -28,7 +28,9 @@ export function AccountLogoutOption() {
         variant: "destructive",
       });
     } finally {
-      setIsLoggingOut(false);
+      setTimeout(() => {
+        setIsLoggingOut(false);
+      }, 3000);
     }
   }
 

autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarView.tsx

@@ -26,12 +26,19 @@ export function NavbarView({ isLoggedIn, previewBranchName }: NavbarViewProps) {
   const dynamicMenuItems = getAccountMenuItems(user?.role);
   const isChatEnabled = useGetFlag(Flag.CHAT);
 
-  const { data: profile } = useGetV2GetUserProfile({
-    query: {
-      select: (res) => (res.status === 200 ? res.data : null),
-      enabled: isLoggedIn,
+  const { data: profile, isLoading: isProfileLoading } = useGetV2GetUserProfile(
+    {
+      query: {
+        select: (res) => (res.status === 200 ? res.data : null),
+        enabled: isLoggedIn && !!user,
+        // Include user ID in query key to ensure cache invalidation when user changes
+        queryKey: ["/api/store/profile", user?.id],
+      },
     },
-  });
+  );
+
+  const { isUserLoading } = useSupabase();
+  const isLoadingProfile = isProfileLoading || isUserLoading;
 
   const linksWithChat = useMemo(() => {
     const chatLink = { name: "Chat", href: "/chat" };
@@ -84,6 +91,7 @@ export function NavbarView({ isLoggedIn, previewBranchName }: NavbarViewProps) {
                   userEmail={profile?.name}
                   avatarSrc={profile?.avatar_url ?? ""}
                   menuItemGroups={dynamicMenuItems}
+                  isLoading={isLoadingProfile}
                 />
               </div>
             </div>

autogpt_platform/frontend/src/lib/supabase/hooks/helpers.ts

@@ -51,9 +51,11 @@ export async function fetchUser(): Promise<FetchUserResult> {
     const { user, error } = await getCurrentUser();
 
     if (error || !user) {
+      // Only mark as loaded if we got an explicit error (not just no user)
+      // This allows retrying when cookies aren't ready yet after login
       return {
         user: null,
-        hasLoadedUser: true,
+        hasLoadedUser: !!error, // Only true if there was an error, not just no user
         isUserLoading: false,
       };
     }
@@ -68,7 +70,7 @@ export async function fetchUser(): Promise<FetchUserResult> {
     console.error("Get user error:", error);
     return {
       user: null,
-      hasLoadedUser: true,
+      hasLoadedUser: true, // Error means we tried and failed, so mark as loaded
       isUserLoading: false,
     };
   }

autogpt_platform/frontend/src/lib/supabase/hooks/useSupabaseStore.ts

@@ -140,6 +140,13 @@ export const useSupabaseStore = create<SupabaseStoreState>((set, get) => {
 
     broadcastLogout();
 
+    // Clear React Query cache to prevent stale data from old user
+    if (typeof window !== "undefined") {
+      const { getQueryClient } = await import("@/lib/react-query/queryClient");
+      const queryClient = getQueryClient();
+      queryClient.clear();
+    }
+
     set({
       user: null,
       hasLoadedUser: false,