fixed typescript adn added logout

.cursor/rules/rules.mdc

@@ -32,7 +32,7 @@ src/app/
 ## Code Patterns
 
 ### Components
-- Use functional components with `React.FC<PropsType>`
+- Use functional components with plain arrow functions (avoid `React.FC` due to local React type limitations)
 - Always type props with interfaces or types
 - Use Tailwind CSS for styling (avoid custom CSS files)
 - Keep components presentational - pass data via props
@@ -43,11 +43,124 @@ type MyComponentProps = {
   count?: number;
 };
 
-const MyComponent: React.FC<MyComponentProps> = ({ title, count = 0 }) => {
+const MyComponent = ({ title, count = 0 }: MyComponentProps) => {
   return <div>{title}: {count}</div>;
 };
 ```
 
+### Authentication & State Management
+- Use `useAuth` hook for reactive authentication state instead of static `isUserRegistered()` calls
+- Always use `setUserIdAndNotify()` when logging in/registering to ensure immediate UI updates
+- Never call `isUserRegistered()` directly in components - use the `useAuth` hook instead
+- Authentication state should be reactive across all components
+- Use custom hooks for any state that needs to be shared across multiple components
+
+```typescript
+// src/app/hooks/useAuth.ts - Reactive authentication hook
+import { useState, useEffect } from 'react';
+import { isUserRegistered } from '../utils/index.ts';
+
+export const useAuth = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(isUserRegistered());
+
+  useEffect(() => {
+    const checkAuth = () => setIsAuthenticated(isUserRegistered());
+
+    // Listen for auth changes
+    window.addEventListener('storage', (e) => {
+      if (e.key === 'user_id') checkAuth();
+    });
+    window.addEventListener('authChange', checkAuth);
+
+    return () => {
+      window.removeEventListener('storage', checkAuth);
+      window.removeEventListener('authChange', checkAuth);
+    };
+  }, []);
+
+  return { isAuthenticated };
+};
+
+// Usage in components
+const MyComponent = () => {
+  const { isAuthenticated } = useAuth();
+  // Component will re-render when authentication state changes
+};
+
+// When setting user authentication, use the notifying version
+import { setUserIdAndNotify } from '../utils/index.ts';
+setUserIdAndNotify(user.id); // Triggers immediate UI updates
+
+// When logging out, use the notifying version
+import { logoutAndNotify } from '../utils/index.ts';
+logoutAndNotify(); // Clears user data and triggers immediate UI updates
+```
+
+### Route Protection
+- Use `ProtectedRoute` component in `components/common/` for authentication-based routing
+- Always type `children` as optional (`children?: any`) for route wrapper components
+- Wrap protected content in React Fragment (`<>{children}</>`) when returning children
+
+```typescript
+// src/app/components/common/ProtectedRoute.tsx
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { isUserRegistered } from '../../utils/index.ts';
+
+type ProtectedRouteProps = {
+  children?: any;  // Optional children prop for JSX content
+};
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const isAuthenticated = isUserRegistered();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;  // Wrap in fragment for proper React element return
+};
+
+export default ProtectedRoute;
+```
+
+```typescript
+// Usage in App.tsx routing
+<Route
+  path="/protected"
+  element={
+    <ProtectedRoute>
+      <ProtectedPage />
+    </ProtectedRoute>
+  }
+/>
+```
+
+### React & TypeScript Typing Constraints (Local Setup)
+
+- **React component types**
+  - ❌ Avoid `React.FC`, `ReactNode`, and React-specific event types (`FormEvent`, `ChangeEvent`, etc.) – they are not available in this project's React type setup and will cause errors like "Namespace 'react' has no exported member 'FC'".
+  - ✅ Prefer plain arrow components with explicitly typed props:
+    - `type Props = { ... }`
+    - `const Component = (props: Props) => { ... }`
+  - For `children` props:
+    - **Route wrapper components** (like `ProtectedRoute`): Use `children?: any` (optional)
+    - **Regular components**: Use `children: any` (required) or omit if not needed
+
+- **Hooks and generics**
+  - ❌ Do **not** pass generic type parameters to React hooks such as `useState` (e.g., `useState<string>()` or `useState<MyType>()`). This triggers “Expected 0 type arguments, but got 1.”
+  - ✅ Let hooks infer types from initial values, and when generics are needed:
+    - Use a type assertion on the initial state:
+      - `const [state, setState] = useState({ ... } as MyStateType);`
+    - Or, for tuple-like state:
+      - `const [value, setValue] = useState(() => initialValue) as [MyType, (next: MyType | ((prev: MyType) => MyType)) => void];`
+
+- **Error boundary**
+  - The only class component should be `ErrorBoundary`, and it should:
+    - Import only `Component` from React (no `ErrorInfo`, `ReactNode`).
+    - Extend `Component` without generic parameters: `class ErrorBoundary extends Component { ... }`.
+    - Declare its `state` field explicitly with a typed object (e.g., `state = { hasError: false, error: null }`).
+
 ### API Calls
 - Use `api-wrapper.ts` for direct API calls
 - Use `useApi` hook for components needing loading/error states
@@ -93,7 +206,13 @@ import type { Debate } from '../types/debater.types.ts';
 
 ## Conventions
 
-1. **Imports**: 
+1. **Authentication**:
+   - Use `setUserIdAndNotify()` for login/registration (immediate UI updates)
+   - Use `logoutAndNotify()` for logout (immediate UI updates)
+   - Use `setUserId()` only for background operations or initialization
+   - Always use `useAuth()` hook in components instead of `isUserRegistered()`
+
+2. **Imports**: 
    - Use relative paths from `src/`
    - **ALWAYS include explicit file extensions** in imports:
      - Use `.tsx` for React components (e.g., `import Component from './Component.tsx'`)
@@ -114,11 +233,7 @@ import type { Debate } from '../types/debater.types.ts';
 - ❌ Don't create custom CSS files - use Tailwind
 - ❌ Don't commit `.env*` files (except `.env.example`)
 - ❌ Don't skip TypeScript types
-- ❌ **Don't omit file extensions in imports** - Always include `.ts` or `.tsx` extensions
-  - ❌ Bad: `import Component from './Component'`
-  - ✅ Good: `import Component from './Component.tsx'`
-  - ❌ Bad: `export * from './user.utils'`
-  - ✅ Good: `export * from './user.utils.ts'`
+- ❌ Don't call `isUserRegistered()` directly in components - use `useAuth()` hook instead
 
 ## When Adding New Features
 

.gitignore

@@ -87,3 +87,5 @@ dist
 # Temporary folders
 tmp/
 temp/
+QWEN.md
+.qwen/rules.md

src/app/App.tsx

@@ -4,11 +4,12 @@ import MainLayout from './layouts/MainLayout.tsx';
 import HomePage from './pages/HomePage.tsx';
 import AnalysisPage from './pages/AnalysisPage.tsx';
 import ChatPage from './pages/ChatPage.tsx';
-import { isUserRegistered } from './utils/index.ts';
+import ProtectedRoute from './components/common/ProtectedRoute.tsx';
+import { useAuth } from './hooks/index.ts';
 
-const App: React.FC = () => {
-  // Check if user is already registered
-  const userRegistered = isUserRegistered();
+const App = () => {
+  // Use reactive authentication state
+  const { isAuthenticated } = useAuth();
 
   return (
     <BrowserRouter>
@@ -17,15 +18,29 @@ const App: React.FC = () => {
           <Route
             path="/"
             element={
-              userRegistered ? (
+              isAuthenticated ? (
                 <Navigate to="/analysis" replace />
               ) : (
                 <HomePage />
               )
             }
           />
-          <Route path="/analysis" element={<AnalysisPage />} />
-          <Route path="/chat" element={<ChatPage />} />
+          <Route
+            path="/analysis"
+            element={
+              <ProtectedRoute>
+                <AnalysisPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/chat"
+            element={
+              <ProtectedRoute>
+                <ChatPage />
+              </ProtectedRoute>
+            }
+          />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </MainLayout>

src/app/components/analysis/StanceDistributionChart.tsx

@@ -11,7 +11,7 @@ const COLORS = {
   CON: '#ef4444', // red-500
 };
 
-const StanceDistributionChart: React.FC<StanceDistributionChartProps> = ({ stats }) => {
+const StanceDistributionChart = ({ stats }: StanceDistributionChartProps) => {
   const data = [
     { name: 'PRO', value: stats.pro, percentage: stats.proPercentage },
     { name: 'CON', value: stats.con, percentage: stats.conPercentage },

src/app/components/analysis/TimeSeriesChart.tsx

@@ -6,7 +6,7 @@ type TimeSeriesChartProps = {
   data: TimeStats[];
 };
 
-const TimeSeriesChart: React.FC<TimeSeriesChartProps> = ({ data }) => {
+const TimeSeriesChart = ({ data }: TimeSeriesChartProps) => {
   // Format date for display
   const chartData = data.map((item) => ({
     ...item,

src/app/components/analysis/TopicFrequencyChart.tsx

@@ -6,7 +6,7 @@ type TopicFrequencyChartProps = {
   data: TopicFrequency[];
 };
 
-const TopicFrequencyChart: React.FC<TopicFrequencyChartProps> = ({ data }) => {
+const TopicFrequencyChart = ({ data }: TopicFrequencyChartProps) => {
   // Truncate long topic names for display
   const chartData = data.map((item) => ({
     ...item,

src/app/components/chat/ChatInput.tsx

@@ -6,14 +6,11 @@ type ChatInputProps = {
   placeholder?: string;
 };
 
-const ChatInput: React.FC<ChatInputProps> = ({
-  onSubmit,
-  placeholder = 'Ask a follow-up...',
-}) => {
+const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputProps) => {
   const [input, setInput] = useState('');
   const [isRecording, setIsRecording] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: any) => {
     e.preventDefault();
     if (input.trim()) {
       if (onSubmit) {
@@ -41,7 +38,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
     setInput('When speech to text feature ?');
   };
 
-  const WaveAnimation: React.FC = () => {
+  const WaveAnimation = () => {
     const [animationKey, setAnimationKey] = useState(0);
 
     useEffect(() => {

src/app/components/common/ErrorBoundary.tsx

@@ -1,29 +1,18 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-
-type Props = {
-  children: ReactNode;
-};
+import React, { Component } from 'react';
 
 type State = {
   hasError: boolean;
   error: Error | null;
 };
 
-/**
- * Error Boundary component - catches React errors and displays fallback UI
- * Note: Error boundaries must be class components (React limitation)
- */
-class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
+class ErrorBoundary extends Component {
+  state: State = { hasError: false, error: null };
 
   static getDerivedStateFromError(error: Error): State {
     return { hasError: true, error };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+  componentDidCatch(error: Error, errorInfo: any) {
     console.error('ErrorBoundary caught an error:', error, errorInfo);
   }
 

src/app/components/common/Loading.tsx

@@ -8,7 +8,7 @@ type LoadingProps = {
 /**
  * Loading spinner component
  */
-const Loading: React.FC<LoadingProps> = ({ size = 'md', text }) => {
+const Loading = ({ size = 'md', text }: LoadingProps) => {
   const sizeClasses = {
     sm: 'h-4 w-4',
     md: 'h-8 w-8',

src/app/components/common/ProtectedRoute.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { isUserRegistered } from '../../utils/index.ts';
+
+type ProtectedRouteProps = {
+  children?: any;
+};
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const isAuthenticated = isUserRegistered();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;

src/app/components/common/ThemeToggle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from '../../hooks/useTheme.ts';
 
-const ThemeToggle: React.FC = () => {
+const ThemeToggle = () => {
   const { theme, toggleTheme } = useTheme();
 
   return (

src/app/components/navigation/Navigation.tsx

@@ -1,34 +1,41 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { useAuth } from '../../hooks/index.ts';
+
+const Navigation = () => {
+  const { isAuthenticated } = useAuth();
 
-const Navigation: React.FC = () => {
   return (
     <nav className="fixed top-4 left-1/2 transform -translate-x-1/2 z-40">
       <div className="flex items-center gap-2">
-        <NavLink
-          to="/analysis"
-          className={({ isActive }) =>
-            `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
-              isActive
-                ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
-                : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
-            }`
-          }
-        >
-          Analysis
-        </NavLink>
-        <NavLink
-          to="/chat"
-          className={({ isActive }) =>
-            `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
-              isActive
-                ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
-                : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
-            }`
-          }
-        >
-          Chatbot
-        </NavLink>
+        {isAuthenticated && (
+          <>
+            <NavLink
+              to="/analysis"
+              className={({ isActive }) =>
+                `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
+                  isActive
+                    ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
+                    : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
+                }`
+              }
+            >
+              Analysis
+            </NavLink>
+            <NavLink
+              to="/chat"
+              className={({ isActive }) =>
+                `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
+                  isActive
+                    ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
+                    : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
+                }`
+              }
+            >
+              Chatbot
+            </NavLink>
+          </>
+        )}
       </div>
     </nav>
   );

src/app/hooks/index.ts

@@ -5,4 +5,5 @@
 export { default as useApi } from './useApi.ts';
 export { useApi as useApiHook } from './useApi.ts';
 export { useTheme } from './useTheme.ts';
+export { useAuth } from './useAuth.ts';
 

src/app/hooks/useApi.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import api from '../services/api-wrapper';
+import api from '../services/api-wrapper.ts';
 import type { ApiError } from '../types/api.types';
 
 type UseApiState<T> = {
@@ -26,11 +26,11 @@ export function useApi<T>(
   url: string,
   options: UseApiOptions = { immediate: true }
 ): UseApiState<T> & { execute: () => Promise<void>; refetch: () => Promise<void> } {
-  const [state, setState] = useState<UseApiState<T>>({
+  const [state, setState] = useState({
     data: null,
     loading: options.immediate ?? true,
     error: null,
-  });
+  } as UseApiState<T>);
 
   const execute = async () => {
     setState((prev) => ({ ...prev, loading: true, error: null }));

src/app/hooks/useAuth.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import { isUserRegistered } from '../utils/index.ts';
+
+/**
+ * Custom hook for reactive authentication state
+ * Provides current authentication status and updates when it changes
+ */
+export const useAuth = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(isUserRegistered());
+
+  useEffect(() => {
+    // Check authentication status on mount and when storage changes
+    const checkAuth = () => {
+      setIsAuthenticated(isUserRegistered());
+    };
+
+    // Listen for storage changes (when user_id is set/cleared)
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === 'user_id') {
+        checkAuth();
+      }
+    };
+
+    // Listen for custom auth events (for immediate updates after login/logout)
+    const handleAuthChange = () => {
+      checkAuth();
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    window.addEventListener('authChange', handleAuthChange);
+
+    // Initial check
+    checkAuth();
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('authChange', handleAuthChange);
+    };
+  }, []);
+
+  return { isAuthenticated };
+};

src/app/hooks/useTheme.ts

@@ -5,14 +5,14 @@ type Theme = 'light' | 'dark';
 const THEME_STORAGE_KEY = 'app-theme';
 
 export const useTheme = () => {
-  const [theme, setTheme] = useState<Theme>(() => {
+  const [theme, setTheme] = useState(() => {
     // Get theme from localStorage or default to 'dark'
     if (typeof window !== 'undefined') {
       const stored = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null;
       return stored || 'dark';
     }
     return 'dark';
-  });
+  }) as [Theme, (value: Theme | ((prev: Theme) => Theme)) => void];
 
   useEffect(() => {
     // Apply theme to document

src/app/layouts/MainLayout.tsx

@@ -1,14 +1,24 @@
 import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTheme } from '../hooks/useTheme.ts';
+import { useAuth } from '../hooks/index.ts';
+import { logoutAndNotify } from '../utils/index.ts';
 import ThemeToggle from '../components/common/ThemeToggle.tsx';
 import Navigation from '../components/navigation/Navigation.tsx';
 
 type MainLayoutProps = {
-  children: React.ReactNode;
+  children?: any;
 };
 
-const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
+const MainLayout = ({ children }: MainLayoutProps) => {
   const { theme } = useTheme();
+  const { isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logoutAndNotify();
+    navigate('/');
+  };
 
   useEffect(() => {
     // Ensure theme is applied on mount
@@ -23,7 +33,15 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   return (
     <div className="min-h-screen bg-white dark:bg-black transition-colors duration-200 relative">
       <Navigation />
-      <div className="fixed top-4 right-4 z-50">
+      <div className="fixed top-4 right-4 z-50 flex items-center gap-2">
+        {isAuthenticated && (
+          <button
+            onClick={handleLogout}
+            className="px-3 py-2 text-sm font-medium rounded-lg bg-red-500 hover:bg-red-600 text-white transition-all duration-200 hover:scale-105"
+          >
+            Logout
+          </button>
+        )}
         <ThemeToggle />
       </div>
       {children}

src/app/pages/AnalysisPage.tsx

@@ -17,19 +17,19 @@ import TopicFrequencyChart from '../components/analysis/TopicFrequencyChart.tsx'
 import TimeSeriesChart from '../components/analysis/TimeSeriesChart.tsx';
 import Loading from '../components/common/Loading.tsx';
 
-const AnalysisPage: React.FC = () => {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [headers, setHeaders] = useState<string[]>(['id', 'argument']);
-  const [rows, setRows] = useState<CsvRow[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [isAnalyzing, setIsAnalyzing] = useState<boolean>(false);
-  const [analysisResults, setAnalysisResults] = useState<AnalysisResult[]>([]);
+const AnalysisPage = () => {
+  const [selectedFile, setSelectedFile] = useState(null as File | null);
+  const [headers, setHeaders] = useState(['id', 'argument'] as string[]);
+  const [rows, setRows] = useState([] as CsvRow[]);
+  const [error, setError] = useState(null as string | null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [analysisResults, setAnalysisResults] = useState([] as AnalysisResult[]);
   
   // User's historical analysis data
-  const [userAnalysisData, setUserAnalysisData] = useState<AnalysisResult[]>([]);
-  const [isLoadingStats, setIsLoadingStats] = useState<boolean>(true);
-  const [isRefreshingStats, setIsRefreshingStats] = useState<boolean>(false);
-  const [statsError, setStatsError] = useState<string | null>(null);
+  const [userAnalysisData, setUserAnalysisData] = useState([] as AnalysisResult[]);
+  const [isLoadingStats, setIsLoadingStats] = useState(true);
+  const [isRefreshingStats, setIsRefreshingStats] = useState(false);
+  const [statsError, setStatsError] = useState(null as string | null);
 
   const fileName = useMemo(
     () => selectedFile?.name ?? 'Select a CSV file with arguments',
@@ -101,7 +101,7 @@ const AnalysisPage: React.FC = () => {
     [userAnalysisData]
   );
 
-  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (event: any) => {
     const file = event.target.files?.[0] ?? null;
     setSelectedFile(file);
     setError(null);

src/app/pages/ChatPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ChatInput from '../components/chat/ChatInput.tsx';
 
-const ChatPage: React.FC = () => {
+const ChatPage = () => {
   const handleMessageSubmit = (message: string) => {
     console.log('Message submitted:', message);
     // TODO: Implement chat message handling

src/app/pages/HomePage.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { registerUser } from '../services/user.service.ts';
-import { getOrCreateUniqueId, setUserId, formatError } from '../utils/index.ts';
+import { getOrCreateUniqueId, setUserIdAndNotify, formatError } from '../utils/index.ts';
 import Loading from '../components/common/Loading.tsx';
 
-const HomePage: React.FC = () => {
-  const [name, setName] = useState<string>('');
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
+const HomePage = () => {
+  const [name, setName] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null as string | null);
   const navigate = useNavigate();
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: any) => {
     e.preventDefault();
     await registerAndNavigate(name.trim() || null);
   };
@@ -30,8 +30,8 @@ const HomePage: React.FC = () => {
         name: userName,
       });
 
-      // Store user_id for future API calls
-      setUserId(user.id);
+      // Store user_id for future API calls and notify components of auth change
+      setUserIdAndNotify(user.id);
 
       // Navigate to analysis page
       navigate('/analysis');

src/app/utils/user.utils.ts

@@ -34,6 +34,26 @@ export function setUserId(userId: string): void {
   localStorage.setItem(USER_ID_KEY, userId);
 }
 
+/**
+ * Set user ID and notify components of authentication change
+ * Use this when logging in or registering to ensure immediate UI updates
+ */
+export function setUserIdAndNotify(userId: string): void {
+  setUserId(userId);
+  // Dispatch custom event to immediately update all components using useAuth hook
+  window.dispatchEvent(new CustomEvent('authChange'));
+}
+
+/**
+ * Logout user by clearing data and notifying components
+ * Use this when logging out to ensure immediate UI updates
+ */
+export function logoutAndNotify(): void {
+  clearUserData();
+  // Dispatch custom event to immediately update all components using useAuth hook
+  window.dispatchEvent(new CustomEvent('authChange'));
+}
+
 /**
  * Clear user data from localStorage
  */