The login system authenticates users against a local JSON file and stores session data in localStorage. Different user roles receive different access levels and are redirected to appropriate pages.
Admin Credentials
The application uses a static user database located at /workspace/source/public/data/users.json.
Available Users
These are example credentials for development only. In production, implement proper authentication with hashed passwords and secure token management.
Authentication Flow
The authentication is handled by AuthContext (/workspace/source/src/context/AuthContext.jsx:31-71).
When the login form is submitted:
const handleSubmit = async (e) => {
e.preventDefault();
let validationErrors = {};
if (!email) validationErrors.email = 'Email es requerido';
if (!password) validationErrors.password = 'Password es requerido';
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
return;
}
// ... authentication logic
}
Step 2: User Validation
The system fetches the users.json file and validates credentials:
const res = await fetch('data/users.json');
const users = await res.json();
const foundUser = users.find(
(user) => user.email === email && user.password === password
);
if (!foundUser) {
setErrors({ email: 'credenciales invalidas' });
}
/workspace/source/src/context/AuthContext.jsx:42-52
Step 3: Session Storage
On successful authentication:
setRole(foundUser.role);
setIsAuth(true);
localStorage.setItem('isAuth', true);
localStorage.setItem('role', foundUser.role);
/workspace/source/src/context/AuthContext.jsx:54-57
Step 4: Role-Based Redirect
Users are redirected based on their role:
if (foundUser.role === 'admin') {
navigate('/admin');
}
/adminRedirects to the home page /workspace/source/src/context/AuthContext.jsx:59-65
Persistent Sessions
On application load, the system checks for existing sessions:
useEffect(() => {
const isAuthenticated = localStorage.getItem('isAuth') === 'true'
const userRole = localStorage.getItem('role') || '';
if (isAuthenticated && userRole === 'admin') {
setIsAuth(true)
setRole(userRole)
navigate('/admin')
}
else if (isAuthenticated && userRole === 'cliente') {
setIsAuth(true)
setRole(userRole)
navigate('/')
}
}, [])
/workspace/source/src/context/AuthContext.jsx:14-28
This ensures users remain logged in across page refreshes.
Logout Functionality
Admins can logout from the admin panel:
<button className="navButton" onClick={() => {
setIsAuth(false);
navigate('/');
localStorage.removeItem('isAuth');
}}>
<i className="fa-solid fa-right-from-bracket"></i>
</button>
/workspace/source/src/layout/Admin.jsx:28-34
The logout only removes the isAuth key from localStorage. Consider also removing the role key for complete session cleanup.
Error Handling
The authentication system handles two types of errors:
- Validation errors: Missing email or password
- Authentication errors: Invalid credentials
- Network errors: Failed to fetch users.json
catch (err) {
console.error('Error fetching users:', err);
setErrors({ email: 'Algo salió mal. Por favor, inténtalo de nuevo más tarde.' });
}
/workspace/source/src/context/AuthContext.jsx:67-70