salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 0: Fix token race condition causing logout after login

Browse Source 
- Updated getAuthToken/getRefreshToken to read from Zustand store first (faster, no parsing delay)
- Added token existence check before making API calls in AppLayout
- Added retry mechanism with 100ms delay to wait for Zustand persist to write token
- Made 403 error handler smarter - only logout if token actually exists (prevents false logouts)
- Fixes issue where user gets logged out immediately after successful login
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-16 19:22:45 +00:00
parent b20fab8ec1
commit 1d39f3f00a
2 changed files with 88 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/layout/AppLayout.tsx
View File

@@ -26,39 +26,60 @@ const LayoutContent: React.FC = () => {
// Initialize site store on mount - only once, but only if authenticated
useEffect(() => {
// Only load sites if user is authenticated
// Only load sites if user is authenticated AND has a token
if (!isAuthenticated) return;
if (!hasLoadedSite.current && !isLoadingSite.current) {
hasLoadedSite.current = true;
isLoadingSite.current = true;
trackLoading('site-loading', true);
// Add timeout to prevent infinite loading
// Match API timeout (30s) + buffer for network delays
const timeoutId = setTimeout(() => {
if (isLoadingSite.current) {
console.error('AppLayout: Site loading timeout after 35 seconds');
trackLoading('site-loading', false);
isLoadingSite.current = false;
addError(new Error('Site loading timeout - check network connection'), 'AppLayout.loadActiveSite');
}
}, 35000); // 35 seconds to match API timeout (30s) + buffer
loadActiveSite()
.catch((error) => {
// Don't log 403 errors as they're expected when not authenticated
if (error.status !== 403) {
console.error('AppLayout: Error loading active site:', error);
addError(error, 'AppLayout.loadActiveSite');
// Check if token exists - if not, wait a bit for Zustand persist to write it
const checkTokenAndLoad = () => {
const authState = useAuthStore.getState();
if (!authState?.token) {
// Token not available yet - wait a bit and retry (Zustand persist might still be writing)
setTimeout(() => {
const retryAuthState = useAuthStore.getState();
if (retryAuthState?.token && !hasLoadedSite.current && !isLoadingSite.current) {
loadSites();
}
})
.finally(() => {
clearTimeout(timeoutId);
trackLoading('site-loading', false);
isLoadingSite.current = false;
});
}
}, 100); // Wait 100ms for persist to write
return;
}
loadSites();
};
const loadSites = () => {
if (!hasLoadedSite.current && !isLoadingSite.current) {
hasLoadedSite.current = true;
isLoadingSite.current = true;
trackLoading('site-loading', true);
// Add timeout to prevent infinite loading
// Match API timeout (30s) + buffer for network delays
const timeoutId = setTimeout(() => {
if (isLoadingSite.current) {
console.error('AppLayout: Site loading timeout after 35 seconds');
trackLoading('site-loading', false);
isLoadingSite.current = false;
addError(new Error('Site loading timeout - check network connection'), 'AppLayout.loadActiveSite');
}
}, 35000); // 35 seconds to match API timeout (30s) + buffer
loadActiveSite()
.catch((error) => {
// Don't log 403 errors as they're expected when not authenticated
if (error.status !== 403) {
console.error('AppLayout: Error loading active site:', error);
addError(error, 'AppLayout.loadActiveSite');
}
})
.finally(() => {
clearTimeout(timeoutId);
trackLoading('site-loading', false);
isLoadingSite.current = false;
});
}
};
checkTokenAndLoad();
}, [isAuthenticated]); // Run when authentication state changes
// Load sectors when active site changes (by ID, not object reference)
@@ -120,6 +141,19 @@ const LayoutContent: React.FC = () => {
// Throttle: only refresh if last refresh was more than 30 seconds ago (unless forced)
if (!force && now - lastUserRefresh.current < 30000) return;
// Check if token exists before making API call
const authState = useAuthStore.getState();
if (!authState?.token) {
// Token not available yet - wait a bit for Zustand persist to write it
setTimeout(() => {
const retryAuthState = useAuthStore.getState();
if (retryAuthState?.token && retryAuthState?.isAuthenticated) {
refreshUserData(force);
}
}, 100); // Wait 100ms for persist to write
return;
}
try {
lastUserRefresh.current = now;
await refreshUser();