Skip to content

# 🐛 Bug Report: Header Nav-Links Persistent After Authentication #41

Description

@ayushsin9h

📝 Description

A UI/UX bug where the "Sign Up", "Login" and "Create Account" buttons remain visible in the navigation header even after a user has successfully created an account or logged in. The application fails to conditionally render the "Profile" or "Dashboard" links based on the active user session.

Image

🔍 Behavior

  • Actual Behavior: Upon successful login/signup, the user remains on the landing page (or dashboard) with "Login" and "Sign Up" still visible in the navbar and "Create Account" is still visible in the home page
  • Expected Behavior: The navbar should detect the presence of an active JWT or session cookie and replace the "Login/Sign Up" buttons with a "Logout" button or a user profile icon and the "Create Account" should be "Contact Us"

🛠️ Technical Context

  • Frontend: Next.js (App Router/Pages Router)
  • Auth Management: JWT (JSON Web Tokens) / Context API / Zustand / Redux
  • Affected Component: Navbar.tsx or Header.js

🧪 Steps to Reproduce

  1. Navigate to the LegalSummariser landing page.
  2. Click on "Sign Up" and complete the account creation process.
  3. Observe the header navigation links after being redirected or staying on the page.
  4. Note that the authentication buttons are still present.

💡 Potential Root Causes

  1. Client-Side State Delay: The AuthContext is not being updated immediately after the API response.
  2. Local Storage Sync: The application is checking for a token on initial load but not listening for changes in localStorage or Cookies after the login action.
  3. SSR vs CSR Mismatch: Next.js might be pre-rendering the static "Logged Out" version of the header and not re-hydrating it correctly on the client side.

✅ Proposed Action Plan

  • Implement a useEffect hook in the Header component to listen for changes in the Auth state.
  • Wrap the application in an AuthProvider (Context API) to provide a global isLoggedIn boolean.
  • Add conditional rendering logic:
    {isLoggedIn ? <UserMenu /> : <LoginLinks />}

I am currently debugging the authentication context to ensure the UI updates instantly upon session creation.

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions