From de5956476b26b65256f74b6379deae6c9fc7b752 Mon Sep 17 00:00:00 2001
From: vsxd <sun.xd@hotmail.com>
Date: Fri, 13 Mar 2026 14:48:01 +0800
Subject: [PATCH] Sync header auth state after login

---
 web/src/features/auth/use-local-auth.ts | 14 ++++++++++++--
 web/src/shared/components/user-menu.tsx |  7 +++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/src/features/auth/use-local-auth.ts b/web/src/features/auth/use-local-auth.ts
index c17c5bd6..f92e7906 100644
--- a/web/src/features/auth/use-local-auth.ts
+++ b/web/src/features/auth/use-local-auth.ts
@@ -1,15 +1,25 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { authApi } from '@/api/client'
-import type { LocalLoginRequest, LocalRegisterRequest } from '@/api/types'
+import type { LocalLoginRequest, LocalRegisterRequest, User } from '@/api/types'
 
 export function useLocalLogin() {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (request: LocalLoginRequest) => authApi.localLogin(request),
+    onSuccess: (user) => {
+      queryClient.setQueryData<User | null>(['auth', 'me'], user)
+    },
   })
 }
 
 export function useLocalRegister() {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (request: LocalRegisterRequest) => authApi.localRegister(request),
+    onSuccess: (user) => {
+      queryClient.setQueryData<User | null>(['auth', 'me'], user)
+    },
   })
 }
diff --git a/web/src/shared/components/user-menu.tsx b/web/src/shared/components/user-menu.tsx
index 05fbbb4c..9ad5f534 100644
--- a/web/src/shared/components/user-menu.tsx
+++ b/web/src/shared/components/user-menu.tsx
@@ -1,5 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Link, useNavigate } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { authApi } from '@/api/client'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,6 +23,7 @@ interface UserMenuProps {
 export function UserMenu({ user }: UserMenuProps) {
   const { t } = useTranslation()
   const navigate = useNavigate()
+  const queryClient = useQueryClient()
 
   const hasRole = (role: string) => user.platformRoles?.includes(role) ?? false
   const isReviewer = hasRole('SKILL_ADMIN') || hasRole('NAMESPACE_ADMIN') || hasRole('SUPER_ADMIN')
@@ -30,9 +33,9 @@ export function UserMenu({ user }: UserMenuProps) {
 
   const handleLogout = async () => {
     try {
-      await fetch('/api/auth/logout', { method: 'POST' })
+      await authApi.logout()
+      queryClient.setQueryData(['auth', 'me'], null)
       navigate({ to: '/' })
-      window.location.reload()
     } catch (error) {
       console.error('Logout failed:', error)
     }