Overview
Trazea uses Supabase authentication with role-based access control (RBAC). The authentication system provides hooks for login, logout, password management, and OAuth providers.
useLogin
Core authentication hook for managing user sessions.
import { useLogin } from '@/features/auth-login';
const {
login,
logout,
resetPassword,
updatePassword,
loginWithGoogle,
isLoading,
isGoogleLoading
} = useLogin();
Methods
login
(email: string, password: string) => Promise<void>
Authenticates user with email and password. Signs out the current user and clears session data. resetPassword
(email: string) => Promise<void>
Sends password recovery email to user. updatePassword
(password: string) => Promise<void>
Updates user password (requires authenticated session).await updatePassword('newSecurePassword123');
Initiates OAuth login flow with Google provider. State
Loading state for email/password operations
Loading state for Google OAuth operations
useUserStore
Zustand store for managing user session and permissions.
import { useUserStore } from '@/entities/user';
const sessionData = useUserStore((state) => state.sessionData);
const currentLocation = useUserStore((state) => state.currentLocation);
const hasPermission = useUserStore((state) => state.hasPermission);
Store State
Current user session including role and permissions
Selected warehouse/location context
Store Actions
setSessionData
(data: SessionData | null) => void
Sets user session data
setCurrentLocation
(location: UserLocation | null) => void
Sets active warehouse location
Clears all user session data
hasPermission
(permission: string) => boolean
Checks if user has specific permission
hasRole
(roleName: string) => boolean
Checks if user has specific role
Checks menu-specific permissionsconst canEdit = checkMenuPermission('inventario', 'edit_register');
Returns whether user is approved
Returns whether user is active
useSupabaseAuthListener
Auth state change listener hook.
import { useSupabaseAuthListener } from '@/entities/user';
// Initialize in app root
useSupabaseAuthListener();
- Session initialization on page load
- Password recovery events
- Sign out events
- Token refresh
Types
SessionData
interface SessionData {
user: UserData;
locations: UserLocation[] | null;
}
interface UserData {
id: string;
email: string;
nombre?: string;
activo: boolean;
aprobado: boolean;
role: Role;
locations?: UserLocation[];
}
interface UserLocation {
id_localizacion: string;
nombre: string;
}
AppPermissions
interface AppPermissions {
menu: {
registros: MenuPermissions;
repuestos: MenuPermissions;
solicitudes: MenuPermissions;
inventario: MenuPermissions;
};
inventory?: {
edit_product: boolean;
create_product: boolean;
delete_product: boolean;
view_cost_price: boolean;
};
}
interface MenuPermissions {
show_view: boolean;
edit_register?: boolean;
create_register?: boolean;
}
Example Usage
import { useLogin } from '@/features/auth-login';
import { useUserStore } from '@/entities/user';
function LoginPage() {
const { login, isLoading } = useLogin();
const canViewInventory = useUserStore((state) =>
state.checkMenuPermission('inventario', 'show_view')
);
const handleLogin = async (email: string, password: string) => {
await login(email, password);
if (canViewInventory) {
navigate('/inventario');
}
};
return (
<form onSubmit={(e) => {
e.preventDefault();
handleLogin(email, password);
}}>
{/* Form fields */}
</form>
);
}
