diff --git a/app/logout/page.tsx b/app/logout/page.tsx
index b570ce4..0cd2006 100644
--- a/app/logout/page.tsx
+++ b/app/logout/page.tsx
@@ -2,14 +2,57 @@
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuthToken } from "@/hooks/use-auth-token";
+import { socketService } from "@/services/socketService";
+import { apiSlice } from "@/states/apiSlice";
+import { useDispatch } from "react-redux";
const LogoutPage = () => {
const router = useRouter();
const { removeToken } = useAuthToken();
+ const dispatch = useDispatch();
+
useEffect(() => {
- removeToken();
- router.replace("/");
- }, [router, removeToken]);
+ const performLogout = () => {
+ try {
+ // 1. Clear authentication tokens
+ removeToken();
+
+ // 2. Force disconnect socket (this will also clear chat state)
+ socketService.forceDisconnect();
+
+ // 3. Clear Redux RTK Query cache
+ dispatch(apiSlice.util.resetApiState());
+
+ // 4. Clear sessionStorage (transfer data, etc.)
+ sessionStorage.clear();
+
+ // 5. Clear specific localStorage items while preserving theme and sidebar preferences
+ const preservedItems = {
+ theme: localStorage.getItem('theme'),
+ sidebarExpanded: localStorage.getItem('sidebarExpanded'),
+ };
+
+ // Clear all localStorage
+ localStorage.clear();
+
+ // Restore preserved items
+ if (preservedItems.theme) {
+ localStorage.setItem('theme', preservedItems.theme);
+ }
+ if (preservedItems.sidebarExpanded) {
+ localStorage.setItem('sidebarExpanded', preservedItems.sidebarExpanded);
+ }
+ } catch (error) {
+ console.error('Error during logout:', error);
+ }
+
+ // 6. Immediate redirect using window.location for guaranteed navigation
+ window.location.href = "/";
+ };
+
+ performLogout();
+ }, []); // Empty deps - only run once on mount
+
return null;
};
diff --git a/components/Header.tsx b/components/Header.tsx
index a54deac..c33e258 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -13,6 +13,9 @@ import NotificationBell from "./notifications/NotificationBell";
import { useAuthToken } from "@/hooks/use-auth-token";
import { Button } from "./ui/button";
import { useTheme } from "@/context/ThemeContext";
+import { socketService } from "@/services/socketService";
+import { apiSlice } from "@/states/apiSlice";
+import { useDispatch } from "react-redux";
export const Header = () => {
@@ -26,8 +29,9 @@ export const Header = () => {
const router = useRouter();
const notifications = useNotifications();
- const { getToken } = useAuthToken();
+ const { getToken, removeToken } = useAuthToken();
const { theme, toggleTheme } = useTheme();
+ const dispatch = useDispatch();
// Try to get chat context, but don't fail if it's not available
let chat;
@@ -130,6 +134,54 @@ export const Header = () => {
setIsBalanceVisible(!isBalanceVisible);
};
+ const handleLogout = () => {
+ setIsDropdownOpen(false);
+
+ try {
+ // 1. Clear authentication tokens
+ removeToken();
+
+ // 2. Clear chat state if available
+ if (chat?.clearChatState) {
+ chat.clearChatState();
+ }
+
+ // 3. Clear notification state if available
+ if (notifications?.clearNotificationState) {
+ notifications.clearNotificationState();
+ }
+
+ // 4. Force disconnect socket
+ socketService.forceDisconnect();
+
+ // 5. Clear Redux RTK Query cache
+ dispatch(apiSlice.util.resetApiState());
+
+ // 6. Clear sessionStorage
+ sessionStorage.clear();
+
+ // 7. Clear localStorage (preserve theme and sidebar)
+ const preservedItems = {
+ theme: localStorage.getItem('theme'),
+ sidebarExpanded: localStorage.getItem('sidebarExpanded'),
+ };
+
+ localStorage.clear();
+
+ if (preservedItems.theme) {
+ localStorage.setItem('theme', preservedItems.theme);
+ }
+ if (preservedItems.sidebarExpanded) {
+ localStorage.setItem('sidebarExpanded', preservedItems.sidebarExpanded);
+ }
+ } catch (error) {
+ console.error('Error during logout:', error);
+ }
+
+ // 8. Force hard redirect to home (bypasses middleware returnUrl)
+ window.location.replace("/");
+ };
+
const handleNavigation = (path: string) => {
setIsDropdownOpen(false);
router.push(path);
@@ -244,7 +296,7 @@ export const Header = () => {