fix: resolve login persistence bug and aggressive logout on network blips
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m58s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m58s
- Updated Login.tsx to automatically redirect users to the dashboard if a valid token is already present in localStorage. - Refactored getUserById to properly throw server/network errors instead of silently returning undefined. - Updated AuthGuard in App.tsx to gracefully handle network errors without destroying the user's valid localStorage tokens.
This commit is contained in:
22
App.tsx
22
App.tsx
@@ -35,15 +35,27 @@ const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const fetchedUser = await getUserById(storedUserId);
|
const fetchedUser = await getUserById(storedUserId);
|
||||||
if (fetchedUser && fetchedUser.status === 'active') {
|
if (fetchedUser) {
|
||||||
setUser(fetchedUser);
|
if (fetchedUser.status === 'active') {
|
||||||
|
setUser(fetchedUser);
|
||||||
|
} else {
|
||||||
|
// User explicitly marked inactive or deleted
|
||||||
|
logout();
|
||||||
|
setUser(null);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
|
// If fetchedUser is undefined but didn't throw, it usually means a 401/403/404 (invalid token or user missing).
|
||||||
|
// However, to be safe against random failures, we should only clear if we are sure it's invalid.
|
||||||
|
// For now, if the token is completely rejected, we log out.
|
||||||
logout();
|
logout();
|
||||||
setUser(null);
|
setUser(null);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Auth check failed", err);
|
console.error("Auth check failed (network/server error):", err);
|
||||||
logout();
|
// DO NOT logout() here. If the server is offline or restarting,
|
||||||
|
// we shouldn't wipe the user's local storage tokens.
|
||||||
|
// We just leave the user as null, which will redirect them to login,
|
||||||
|
// but their tokens remain so they can auto-login when the server is back.
|
||||||
setUser(null);
|
setUser(null);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
@@ -53,7 +65,7 @@ const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({
|
|||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <div className="flex h-screen items-center justify-center bg-slate-50 text-slate-400">Carregando...</div>;
|
return <div className="flex h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-400">Carregando...</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!user) {
|
if (!user) {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { useNavigate, Link } from 'react-router-dom';
|
import { useNavigate, Link } from 'react-router-dom';
|
||||||
import { Hexagon, Lock, Mail, ArrowRight, Loader2, Eye, EyeOff, AlertCircle } from 'lucide-react';
|
import { Hexagon, Lock, Mail, ArrowRight, Loader2, Eye, EyeOff, AlertCircle } from 'lucide-react';
|
||||||
import { login, logout } from '../services/dataService';
|
import { login, logout } from '../services/dataService';
|
||||||
@@ -12,6 +12,16 @@ export const Login: React.FC = () => {
|
|||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
const [emailError, setEmailError] = useState('');
|
const [emailError, setEmailError] = useState('');
|
||||||
|
|
||||||
|
// Auto-redirect if already logged in
|
||||||
|
useEffect(() => {
|
||||||
|
const token = localStorage.getItem('ctms_token');
|
||||||
|
const userId = localStorage.getItem('ctms_user_id');
|
||||||
|
if (token && userId && token !== 'undefined' && token !== 'null') {
|
||||||
|
// Opt to send them to root, AuthGuard will handle role-based routing
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
}, [navigate]);
|
||||||
|
|
||||||
const validateEmail = (val: string) => {
|
const validateEmail = (val: string) => {
|
||||||
setEmail(val);
|
setEmail(val);
|
||||||
if (!val) {
|
if (!val) {
|
||||||
|
|||||||
@@ -280,16 +280,20 @@ export const getUserById = async (id: string): Promise<User | undefined> => {
|
|||||||
const response = await fetch(`${API_URL}/users/${id}`, {
|
const response = await fetch(`${API_URL}/users/${id}`, {
|
||||||
headers: getHeaders()
|
headers: getHeaders()
|
||||||
});
|
});
|
||||||
if (!response.ok) return undefined;
|
if (!response.ok) {
|
||||||
|
if (response.status === 401 || response.status === 403 || response.status === 404) {
|
||||||
|
return undefined; // Invalid user or token
|
||||||
|
}
|
||||||
|
throw new Error(`Server error: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
const contentType = response.headers.get("content-type");
|
const contentType = response.headers.get("content-type");
|
||||||
if (contentType && contentType.indexOf("application/json") !== -1) {
|
if (contentType && contentType.indexOf("application/json") !== -1) {
|
||||||
return await response.json();
|
return await response.json();
|
||||||
}
|
}
|
||||||
return undefined;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("API Error (getUserById):", error);
|
console.error("API Error (getUserById):", error);
|
||||||
return undefined;
|
throw error; // Rethrow so AuthGuard catches it and doesn't wipe tokens
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user