fix(auth): resolve logout 404 redirect and clean storage cache #83#96
Conversation
|
@palakgoda is attempting to deploy a commit to the Shiv Raj Singh's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review limit reached
Next review available in: 22 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughBoth Navbar.jsx and AppContext.jsx update their logout handlers to use React Router's useNavigate for redirecting to "/" instead of window.location.href. Toast notifications and state-clearing order are adjusted, and error handling for failed backend logout calls is modified. ChangesLogout Flow Fix
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant AppContext
participant AuthAPI
User->>Navbar: Click Logout
Navbar->>AppContext: call logoutUser()
AppContext->>AppContext: toast.success("Logged out successfully")
AppContext->>AppContext: navigate('/')
AppContext->>AuthAPI: POST /api/auth/logout
alt request succeeds
AuthAPI-->>AppContext: 200 OK
else request fails
AuthAPI-->>AppContext: error
AppContext->>AppContext: toast.error(message)
end
AppContext->>AppContext: clear userData, setIsLoggedin(false)
AppContext->>AppContext: setIsLoggingOut(false)
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@client/src/components/Navbar.jsx`:
- Around line 142-153: The logout handler in Navbar’s logout flow only clears
userData, so ProtectedRoute can still treat the user as logged in. Update the
same handler to also reset isLoggedin, ideally by using the shared logoutUser
flow if available, so auth state is cleared consistently. Also move the success
toast out of the finally path so it only runs after a successful logout request,
not when the request fails.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 879f24d9-1c45-49e2-ab74-b5cbdd263af4
⛔ Files ignored due to path filters (1)
client/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
client/src/components/Navbar.jsxclient/src/context/AppContext.jsx
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
🎉 Thank you for your contribution! Your pull request has been successfully merged. We appreciate your effort in improving MeetOnMemory, @palakgoda! |
|
@palakgoda Thank you for your contribution and for the time you invested in improving the logout workflow! 🚀 I really appreciate the effort you put into understanding the root cause and implementing a more robust solution. Your implementation not only fixes the 404 redirect issue but also improves the overall logout experience by handling client-side state cleanup, using React Router navigation instead of hard page reloads, and ensuring the application behaves gracefully even when the backend logout request cannot be completed. I also appreciate that you followed the repository's contribution workflow by claiming the issue before working on it and kept the implementation aligned with the intended scope. Thank you for being responsive throughout the review process and for incorporating the requested improvements. Everything looks good now, and I'm happy to merge this contribution! 🎉 Your work has made MeetOnMemory a little better for everyone. I hope to see more of your contributions in the future, and if you enjoy the project, consider giving the repository a ⭐. Happy coding! 💙 |
Pull Request
Description
The Root Cause
The 404 page error and layout crashes during the logout sequence were caused by a race condition between two competing operations:
window.location.href), which forced a harsh window reload. This interrupted the single-page application (SPA) execution flow, causing components to unmount violently before global toast handlers or state contexts could complete their execution cycle.The Fix
To ensure a graceful, secure user experience, we restructured the execution sequence in
client/src/components/Navbar.jsx:window.location.hrefmethod for React Router's nativeuseNavigatehook targeting the public root route (/).finallyblock to trigger the success notification and change the active route before completely dropping the authentication profile hooks. This safely clears out of protected routes before the layout's guard system triggers.try/catchconfiguration. This prevents local port synchronization issues or backend connectivity errors from crashing the frontend UI, allowing client state cleanup to finish successfully.Type of Change
Related Issue
Closes #83
Testing
Describe the testing performed.
Screenshots
Checklist
Summary by CodeRabbit