Skip to main content
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

Result: Redirected to /loginReason: isAuthenticated is false
Result: Redirected to / (home page)Reason: role is “cliente” but requeridRole is “admin”
Result: Access grantedReason: isAuthenticated is true and role matches requeridRole
Result: Access grantedReason: 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us