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

- 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:
Cauê Faleiros
2026-03-17 15:40:13 -03:00
parent f884f6dc3c
commit 22a1228a60
3 changed files with 36 additions and 10 deletions

20
App.tsx
View File

@@ -35,15 +35,27 @@ const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({
try {
const fetchedUser = await getUserById(storedUserId);
if (fetchedUser && fetchedUser.status === 'active') {
if (fetchedUser) {
if (fetchedUser.status === 'active') {
setUser(fetchedUser);
} else {
// User explicitly marked inactive or deleted
logout();
setUser(null);
}
} 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();
setUser(null);
}
} catch (err) {
console.error("Auth check failed", err);
logout();
console.error("Auth check failed (network/server error):", err);
// 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);
} finally {
setLoading(false);
@@ -53,7 +65,7 @@ const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({
}, [location.pathname]);
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) {

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Hexagon, Lock, Mail, ArrowRight, Loader2, Eye, EyeOff, AlertCircle } from 'lucide-react';
import { login, logout } from '../services/dataService';
@@ -12,6 +12,16 @@ export const Login: React.FC = () => {
const [error, setError] = 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) => {
setEmail(val);
if (!val) {

View File

@@ -280,16 +280,20 @@ export const getUserById = async (id: string): Promise<User | undefined> => {
const response = await fetch(`${API_URL}/users/${id}`, {
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");
if (contentType && contentType.indexOf("application/json") !== -1) {
return await response.json();
}
return undefined;
} catch (error) {
console.error("API Error (getUserById):", error);
return undefined;
throw error; // Rethrow so AuthGuard catches it and doesn't wipe tokens
}
};