Skip to content

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 user object 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 admin role for all administrative paths.

Changes Made

Core Authentication & Routing

  • Modified AuthContext.tsx: Added setUser(null) to clearAuthToken to prevent stale user data.
  • Modified ProtectedRoute.tsx: Introduced allowedRoles prop 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:

  1. Stale Session: The logout function cleared the token but left the user object in state. New logins (especially on fast redirects) could reference the old user's role.
  2. 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 user to null on logout, we force the application to re-fetch or re-validate the identity immediately.
  • By adding allowedRoles to 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

  1. Pull this branch: fixing_the_redirection_in_volunteer_login
  2. 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
Edited by Bikkumalla Sai Krishna

Merge request reports

Loading