Protected Routes

How route protection and role-based access control work in Tienda ETCA

The application uses the RutaProtegida component to restrict access to certain routes based on authentication status and user roles.

RutaProtegida Component

The route protection component is located at /workspace/source/src/auth/RutaProtegida.jsx and implements a simple but effective access control system.

Component Structure

function RutaProtegida({ isAuthenticated, children, role, requeridRole }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  if (requeridRole && role !== requeridRole) {
    return <Navigate to="/" replace />;
  }
  return children;
}

Reference: /workspace/source/src/auth/RutaProtegida.jsx:4-12

How It Works

The component performs two levels of validation:

Level 1: Authentication Check

1. Check if user is authenticated

   If isAuthenticated is false, the user is redirected to /login

   if (!isAuthenticated) {
     return <Navigate to="/login" replace />;
   }
   
2. Allow authenticated users

   If authenticated, proceed to the next validation level

Level 2: Role-Based Access

1. Check if role is required

   If requeridRole is specified, validate the user’s role

   if (requeridRole && role !== requeridRole) {
     return <Navigate to="/" replace />;
   }
   
2. Validate role match

   If the user’s role doesn’t match requeridRole, redirect to home page

3. Grant access

   If role matches (or no role required), render the protected content

   return children;
   

Props

isAuthenticated · boolean · required

Whether the user is currently authenticated

children · React.ReactNode · required

The protected component/content to render if access is granted

role · string

The current user’s role (e.g., “admin” or “cliente”)

requeridRole · string

The role required to access this route (e.g., “admin”)

Usage Example

Protecting the admin route:

<RutaProtegida 
  isAuthenticated={isAuthenticated} 
  role={role} 
  requeridRole="admin"
>
  <Admin />
</RutaProtegida>

This ensures:

1. User must be logged in
2. User must have the “admin” role
3. Otherwise, redirect appropriately

Access Flow Diagram

Integration with Auth System

The RutaProtegida component works in conjunction with AuthContext:

1. User logs in

   AuthContext validates credentials and sets:

   • isAuthenticated to true
   • role to user’s role from users.json
   • Stores both in localStorage
2. Route protection activated

   When user navigates to a protected route, RutaProtegida checks:

   • Authentication status from AuthContext
   • User role from AuthContext
3. Access decision

   Based on validation results:

   • Grant access and render protected content
   • Redirect to login if not authenticated
   • Redirect to home if wrong role

Common Scenarios

Anonymous user tries to access admin panel

Result: Redirected to /login

Reason: isAuthenticated is false

Client user tries to access admin panel

Result: Redirected to / (home page)

Reason: role is “cliente” but requeridRole is “admin”

Admin user accesses admin panel

Result: Access granted

Reason: isAuthenticated is true and role matches requeridRole

Authenticated user accesses unprotected route

Result: Access granted

Reason: No requeridRole specified, only authentication required

Security Considerations

This is a client-side route protection mechanism. It prevents UI access but does not provide server-side security.

What it protects

• UI routes and components
• User experience flow
• Prevents accidental access

What it doesn't protect

• API endpoints (needs backend auth)
• Direct data access
• Malicious users with dev tools

For production applications, always implement:

• Server-side authentication
• API endpoint protection
• Token-based authentication (JWT)
• Secure password hashing

Persistence Across Refreshes

The protection system maintains state across page refreshes by checking localStorage:

// In AuthContext
useEffect(() => {
  const isAuthenticated = localStorage.getItem('isAuth') === 'true'
  const userRole = localStorage.getItem('role') || '';

  if (isAuthenticated && userRole === 'admin') {
    setIsAuth(true)
    setRole(userRole)
    navigate('/admin')
  }
}, [])

This ensures users remain logged in and maintain proper access levels even after page refreshes.