Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/betovildoza/tiendaetca/llms.txt

Use this file to discover all available pages before exploring further.

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