feat(routes): bounce logged-in users away from auth pages#33
Conversation
Hitting /login, /register, or /forgot-password while already authenticated is a dead end — redirect to /. Mirrors ProtectedRoute with the opposite predicate. Co-authored-by: David Nguyen <hoangson091104@gmail.com>
hoangsonww
added
bug
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
✅ Deploy Preview for budget-management-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-project-automation
Bot
moved this to Done
in Budget Management API Project Board
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a GuestRoute component to protect guest-only routes such as login, registration, and forgot-password, redirecting authenticated users to a default path. Feedback was provided to improve the GuestRoute implementation by making it reactive to authentication state changes using a useEffect hook and the onAuthChange utility, rather than relying on a static initial check.
| import React from 'react'; | ||
| import { Navigate } from 'react-router-dom'; | ||
| import { isLoggedIn } from '../services/auth'; | ||
|
|
||
| function GuestRoute({ children, redirectTo = '/' }) { | ||
| if (isLoggedIn()) { | ||
| return <Navigate to={redirectTo} replace />; | ||
| } | ||
| return children; | ||
| } | ||
|
|
||
| export default GuestRoute; |
There was a problem hiding this comment.
The current implementation of GuestRoute is static and only checks the authentication status during the initial render. This means the component won't automatically react if the authentication state changes (for example, if a user logs out in another tab or if the session expires) unless a manual refresh or navigation occurs. Since auth.js provides an onAuthChange utility, it is recommended to use it within a useEffect hook to make the component reactive to authentication state transitions.
import React, { useState, useEffect } from 'react';
import { Navigate } from 'react-router-dom';
import { isLoggedIn, onAuthChange } from '../services/auth';
function GuestRoute({ children, redirectTo = '/' }) {
const [authenticated, setAuthenticated] = useState(isLoggedIn());
useEffect(() => {
// Subscribe to auth changes to ensure the component reacts to login/logout events
return onAuthChange(() => {
setAuthenticated(isLoggedIn());
});
}, []);
if (authenticated) {
return <Navigate to={redirectTo} replace />;
}
return children;
}
export default GuestRoute;
✅ Deploy Preview for budget-management-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR introduces a GuestRoute wrapper to prevent authenticated users from accessing guest-only authentication pages (login, registration, forgot password), improving routing correctness and UX consistency.
Changes:
- Added
frontend/src/components/GuestRoute.jsto redirect authenticated users away from guest-only routes. - Updated
frontend/src/App.jsto wrap/login,/register, and/forgot-passwordroutes withGuestRoute. - Integrated the new component into the app’s route configuration via import and usage.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/components/GuestRoute.js | Adds a guest-only route guard that redirects when isLoggedIn() is true. |
| frontend/src/App.js | Applies GuestRoute to auth-related routes to bounce authenticated users away from guest pages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Route | ||
| path="/login" | ||
| element={ | ||
| <GuestRoute> | ||
| <Login /> | ||
| </GuestRoute> | ||
| } | ||
| /> |
This pull request introduces a new
GuestRoutecomponent to ensure that only unauthenticated users can access the login, registration, and forgot password pages. This helps prevent logged-in users from accessing pages meant for guests, improving both security and user experience. The main changes are the creation of theGuestRoutecomponent and its integration into the routing logic.Authentication and Routing Improvements:
GuestRoutecomponent infrontend/src/components/GuestRoute.jsthat redirects authenticated users away from guest-only routes.frontend/src/App.jsto wrap the/login,/register, and/forgot-passwordroutes withGuestRoute, ensuring only unauthenticated users can access these pages. [1] [2]GuestRoutecomponent intofrontend/src/App.js.