Login and Session Fixes

src/context/AuthContext.js

@@ -1,5 +1,6 @@
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import axios from 'axios';
+import api from '../utils/api';
 
 const AuthContext = createContext();
 
@@ -68,11 +69,11 @@ export const AuthProvider = ({ children }) => {
         fullUrl: `${API_URL}/api/auth/login`
       });
 
-      const response = await axios.post(
-        `${API_URL}/api/auth/login`,
+      // Use api instance for retry logic
+      const response = await api.post(
+        '/auth/login',
         { email, password },
         {
-          timeout: 30000, // 30 second timeout
           headers: {
             'Content-Type': 'application/json'
           }
@@ -87,11 +88,19 @@ export const AuthProvider = ({ children }) => {
 
       const { access_token, user: userData } = response.data;
 
-      // Store token first
-      localStorage.setItem('token', access_token);
-      console.log('[AuthContext] Token stored in localStorage');
+      if (!access_token || !userData) {
+        throw new Error('Invalid response from server - missing token or user data');
+      }
 
-      // Update state
+      // Store token FIRST and verify it was stored
+      localStorage.setItem('token', access_token);
+      const storedToken = localStorage.getItem('token');
+      if (storedToken !== access_token) {
+        throw new Error('Failed to store token in localStorage');
+      }
+      console.log('[AuthContext] Token stored and verified in localStorage');
+
+      // Update state in correct order
       setToken(access_token);
       setUser(userData);
       console.log('[AuthContext] User state updated:', {
@@ -99,22 +108,21 @@ export const AuthProvider = ({ children }) => {
         role: userData.role
       });
 
-      // Fetch user permissions (don't let this fail the login)
-      // Use setTimeout to defer permission fetching slightly
-      setTimeout(async () => {
-        try {
-          console.log('[AuthContext] Fetching permissions...');
-          await fetchPermissions(access_token);
-          console.log('[AuthContext] Permissions fetched successfully');
-        } catch (error) {
-          console.error('[AuthContext] Failed to fetch permissions (non-critical):', {
-            message: error.message,
-            response: error.response?.data,
-            status: error.response?.status
-          });
-          // Don't throw - permissions can be fetched later if needed
-        }
-      }, 100); // Small delay to ensure state is settled
+      // Fetch permissions immediately and WAIT for it (but don't fail login if it fails)
+      try {
+        console.log('[AuthContext] Fetching permissions...');
+        await fetchPermissions(access_token);
+        console.log('[AuthContext] Permissions fetched successfully');
+      } catch (permError) {
+        console.error('[AuthContext] Failed to fetch permissions (non-critical):', {
+          message: permError.message,
+          response: permError.response?.data,
+          status: permError.response?.status
+        });
+        // Set empty permissions array so hasPermission doesn't break
+        setPermissions([]);
+        // Don't throw - login succeeded even if permissions failed
+      }
 
       return userData;
     } catch (error) {
@@ -131,6 +139,12 @@ export const AuthProvider = ({ children }) => {
         }
       });
 
+      // Clear any partial state
+      localStorage.removeItem('token');
+      setToken(null);
+      setUser(null);
+      setPermissions([]);
+
       // Re-throw to let Login component handle the error
       throw error;
     }