Authentication & Security
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Authentication & Security system in the Boda-Cris project is designed to protect the administrative capabilities of the wedding invitation platform. It primarily controls access to the "Panel de Administración," where organizers manage guest lists, event content, and theme configurations. The system employs a PIN-based authentication mechanism managed through a React Context API to ensure that only authorized users can modify the invitation's data.
Beyond application-level access control, the project implements infrastructure-level security headers and routing rules. These measures protect the Single Page Application (SPA) from common web vulnerabilities such as clickjacking and cross-site scripting (XSS) while ensuring consistent routing across client-side navigation.
Sources: src/pages/AdminPage.jsx:10-14, src/context/AuthContext.jsx:1-5, netlify.toml:19-25
Authentication Architecture
AuthContext Provider
The core of the authentication logic resides in the AuthContext. This provider maintains the isAuthenticated state across the entire application component tree. It utilizes sessionStorage to persist the authentication status for the duration of the browser session, allowing administrators to refresh the page without losing access.
Sources: src/context/AuthContext.jsx:5-30, src/main.jsx:12-20
The diagram above illustrates how the AuthProvider wraps the application and manages the internal state synchronized with sessionStorage.
Sources: src/context/AuthContext.jsx:7-13, src/main.jsx:11-25
PIN-Based Validation
The system uses a simple but effective PIN-based login mechanism. Access is granted by comparing the user-provided input against a predefined ADMIN_PIN.
| Function | Parameter | Logic | Return |
|---|---|---|---|
login | pin (string) | pin === ADMIN_PIN | Boolean |
logout | N/A | Sets state to false and clears sessionStorage | Void |
Sources: src/context/AuthContext.jsx:17-28
Access Control Implementation
Protected Admin Routes
The AdminPage component acts as a high-level gatekeeper. It checks the isAuthenticated status provided by the useAuth hook. If the user is not authenticated, the application short-circuits to render the AdminLogin component instead of the administrative dashboard.
Sources: src/pages/AdminPage.jsx:10-14
This sequence shows the conditional rendering logic used to protect administrative views.
Sources: src/pages/AdminPage.jsx:10-14, src/context/AuthContext.jsx:17-21
Infrastructure Security
Netlify Security Headers
The project configuration includes specific security headers applied to all routes. These headers are defined in the netlify.toml file to mitigate various web-based attacks.
| Header | Value | Purpose |
|---|---|---|
X-Frame-Options | DENY | Prevents Clickjacking by disallowing the site to be rendered in an iFrame. |
X-XSS-Protection | 1; mode=block | Enables browser-side XSS filtering and blocks the page if an attack is detected. |
X-Content-Type-Options | nosniff | Prevents the browser from interpreting files as a different MIME type than declared. |
Referrer-Policy | strict-origin-when-cross-origin | Controls how much referrer information is included with requests. |
Sources: netlify.toml:19-25
SPA Routing & Redirects
To maintain security and functionality for the React Single Page Application, a catch-all redirect rule is implemented. This ensures that any direct navigation or page refresh on a sub-route (like /admin) is handled by the main index.html, where client-side routing can take over.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Sources: netlify.toml:13-17
Conclusion
Authentication and security in the Boda-Cris repository are handled through a combination of application-level state management and infrastructure-level header configuration. By leveraging React Context for session-based PIN validation and Netlify for protocol-level security, the system provides a secure environment for managing sensitive wedding invitation data.
Sources: src/context/AuthContext.jsx, netlify.toml