fix: page redirection in the volunteer login
Overview
This MR addresses a critical authentication and routing bug where users with different roles (e.g., Volunteers) were incorrectly redirected to Admin-only pages after a previous Admin session had ended. It ensures proper session cleanup and implements robust role-based access control (RBAC) at the routing layer.
What does this MR do and why?
The primary motivation was to prevent unauthorized access and stop stale session data from interfering with user redirection. Previously, the application only checked if a user was authenticated, not if they had the correct role for the destination path.
Approach:
-
Immediate State Clearing: Ensured that the
userobject is wiped from memory as soon as a logout occurs. - Declarative Route Guarding: Enhanced the ProtectedRoute component to handle role verification.
-
Strict Admin Access: Modified the main routing table to explicitly require the
adminrole for all administrative paths.
Changes Made
Core Authentication & Routing
-
Modified AuthContext.tsx: Added
setUser(null)toclearAuthTokento prevent stale user data. -
Modified ProtectedRoute.tsx: Introduced
allowedRolesprop to enforce RBAC and redirect unauthorized users to the dashboard. -
Modified App.tsx: Applied role restrictions to all
/admin/*routes.
Tests & Documentation
- Modified VolunteerRegisterPage.test.tsx: Updated submit button labels to "Complete Registration" to match source code and translations.
-
Modified
CHANGELOG.md: Updated to reflect the bug fix.
Technical Details
Root Cause:
-
Stale Session: The
logoutfunction cleared the token but left theuserobject in state. New logins (especially on fast redirects) could reference the old user's role. -
Permissive Guards: ProtectedRoute only checked
isAuthenticated. Any logged-in user could access a URL intended for admins if they knew the path.
Fix Details:
- By resetting
usertonullon logout, we force the application to re-fetch or re-validate the identity immediately. - By adding
allowedRolesto ProtectedRoute, we move authorization logic from individual pages to the router, making it centralized and harder to bypass.
Type of Change
-
🐛 Bug fix (non-breaking change that fixes an issue) -
✨ New feature (non-breaking change that adds functionality) -
💥 Breaking change (fix or feature that would cause existing functionality to change) -
📝 Documentation update -
🎨 UI/UX improvement -
♻ ️ Refactor (no functional changes) -
⚡ Performance improvement -
🧪 Test update -
🔧 Configuration change
Related Issues / References
- Fixes: Stale session redirection bug for Volunteers.
Screenshots or Screen Recordings
| Before | After |
|---|---|
| Volunteer redirected to Admin "Create Camp" page | Volunteer redirected to root Dashboard (/) |
How to Set Up and Validate Locally
- Pull this branch:
fixing_the_redirection_in_volunteer_login - Run development server:
npm run dev
Step 1: Log in as an Admin. Step 2: Navigate to an admin page like /admin/medical-camps. Step 3: Click Logout. Step 4: Log in as a Volunteer. Expected: You should be placed on the volunteer dashboard. If you try to manually visit /admin/medical-camps, you should be kicked back to /.
Testing Done
-
Manual testing completed (Admin -> Logout -> Volunteer login flow). -
Unit tests updated and passing.
Test Cases Covered:
| Scenario | Expected Result | Status |
|---|---|---|
| Admin logout | User state is null | |
| Volunteer hits Admin URL | Redirected to / | |
| Registration submit | "Complete Registration" label found | |
| Full Test Suite | 1312 / 1312 passed |
Code Quality Checklist
-
Code follows project conventions -
No console.log() or debugger statements -
TypeScript types are properly defined -
i18n check passed -
ESLint and Prettier checks pass
Documentation
-
CHANGELOG.md updated