Route Guard & Protected Routes (React Router)

[meetjakasaniya]

Description
Implement a PrivateRoute (or RequireAuth) wrapper that blocks unauthenticated access to protected pages (dashboard, project pages). Redirect unauthenticated users to /login and optionally show a return-to url.

Suggested files

• frontend/src/components/Auth/RequireAuth.jsx
• Update frontend/src/App.jsx or router setup to use RequireAuth.

Example RequireAuth (React Router v6)

import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';

export default function RequireAuth({ children }) {
const { isAuthenticated, loading } = useAuth();
const location = useLocation();

if (loading) return

Loading...

;
if (!isAuthenticated) return <Navigate to="/login" state={{ from: location }} replace />;
return children;
}

Acceptance criteria

• Protected routes redirect unauthenticated users to login.
• After login, user is redirected to originally requested page.
• Public routes (login/register) are not accessible when already authenticated (optional redirect to dashboard).

Testing checklist

• Navigate to /dashboard without token -> redirected to /login.
• After login from redirect, user lands back on original page.
• While token is valid, user can access protected pages.

[meetjakasaniya]

Comment Just "I want to take this" if u want this issue to be assigned to yourself. The assignment is First Come First Serve(FCFS).

[Bhumika2906]

I want to take this