(Implement-Protected-Route-HOC

[shamoo53]

🚀 PR: Implement Protected Route HOC

🧭 Overview

This PR introduces a Protected Route Higher-Order Component (HOC) to secure authenticated pages in the application. It ensures only authorized users can access protected routes while providing a smooth user experience with redirects and loading states.

---

🎯 Problem

Currently, routes are not consistently protected, leading to:

• Unauthorized access to restricted pages
• Poor user experience when authentication state is unclear
• No centralized way to enforce authentication and role-based access

---

💡 Solution

• Create a reusable ProtectedRoute HOC to wrap secured pages
• Validate user authentication using JWT tokens
• Enforce token expiration checks
• Implement role-based access control (RBAC)
• Redirect unauthenticated users to login while preserving intended destination

---

🛠 Scope of Work

🔐 Authentication Handling

• Implemented JWT token validation
• Verified token expiration before granting access
• Handled invalid or missing tokens

🔁 Redirect Logic

• Redirect unauthenticated users to login page
• Store intended destination and redirect after successful login

⏳ Loading State

• Added loading indicator during authentication checks
• Prevented UI flicker or unauthorized content exposure

🛡 Role-Based Access Control

• Enabled role-based restrictions for protected routes
• Allowed configuration of permitted roles per page

🧩 HOC Implementation

• Created /lib/auth/ProtectedRoute.tsx
• Wrapped protected pages with the HOC for consistent enforcement

---

📊 Acceptance Criteria

• ✔️ Unauthenticated users are redirected to login
• ✔️ Users return to their intended page after login
• ✔️ Loading state is displayed during authentication checks
• ✔️ Role-based access restrictions are enforced

---

🧪 Testing

• Tested authentication flow with valid and invalid tokens
• Verified redirect behavior before and after login
• Tested role-based access scenarios
• Ensured loading state behaves correctly

---

📚 Documentation

• Added usage examples for wrapping protected routes
• Documented role-based configuration options
• Provided guidelines for integrating authentication checks

---

🏁 Summary

This PR delivers a robust and reusable route protection mechanism, improving application security and user experience by centralizing authentication and authorization logic.
Closes #40

[drips-wave]

@shamoo53 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits