fix admin sign out button, show user email in directory if there is no name

Author: YashK2005

frontend/src/APIClients/authAPIClient.ts

@@ -19,6 +19,7 @@ import {
 } from '../utils/LocalStorageUtils';
 import { signInWithEmailAndPassword, applyActionCode, checkActionCode } from 'firebase/auth';
 import { auth } from '@/config/firebase';
+import { clearAuthCache } from '@/hooks/useAuthGuard';
 
 // Validation helper
 const validateEmail = (email: string): boolean => {
@@ -158,6 +159,7 @@ export const logout = async (): Promise<boolean> => {
   } finally {
     // Always clear localStorage and sign out from Firebase regardless of backend API success/failure
     localStorage.removeItem(AUTHENTICATED_USER_KEY);
+    clearAuthCache();
     try {
       await firebaseSignOut(auth);
     } catch (firebaseError) {

frontend/src/components/admin/AdminHeader.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import { FiFolder, FiLoader, FiLogOut } from 'react-icons/fi';
 import { LabelSmall } from '@/components/ui/text-styles';
 import { COLORS, shadow } from '@/constants/colors';
+import { logout } from '@/APIClients/authAPIClient';
 
 export const AdminHeader: React.FC = () => {
   const router = useRouter();
@@ -17,6 +18,10 @@ export const AdminHeader: React.FC = () => {
     router.push('/admin/directory');
   };
 
+  const handleSignOut = async () => {
+    await logout();
+  };
+
   return (
     <Box
       w="full"
@@ -62,7 +67,14 @@ export const AdminHeader: React.FC = () => {
             <FiLoader size="16px" color={COLORS.gray700} />
             <LabelSmall color={COLORS.gray700}>Progress Tracker</LabelSmall>
           </Flex>
-          <Flex align="center" gap="8px" cursor="pointer">
+          <Flex
+            align="center"
+            gap="8px"
+            cursor="pointer"
+            onClick={handleSignOut}
+            _hover={{ opacity: 0.7 }}
+            transition="opacity 0.2s"
+          >
             <FiLogOut size="16px" color={COLORS.gray700} />
             <LabelSmall color={COLORS.gray700}>Sign Out</LabelSmall>
           </Flex>

frontend/src/pages/admin/directory.tsx

@@ -484,7 +484,7 @@ export default function Directory() {
                             _hover={{ color: COLORS.veniceBlue }}
                             onClick={() => router.push(`/admin/users/${user.id}`)}
                           >
-                            {displayName}
+                            {displayName || user.email}
                           </Text>
                         </Table.Cell>
                         <Table.Cell py={1.5} verticalAlign="middle">