📝 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.
🔍 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
- Navigate to the
LegalSummariser landing page.
- Click on "Sign Up" and complete the account creation process.
- Observe the header navigation links after being redirected or staying on the page.
- Note that the authentication buttons are still present.
💡 Potential Root Causes
- Client-Side State Delay: The
AuthContext is not being updated immediately after the API response.
- 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.
- 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
I am currently debugging the authentication context to ensure the UI updates instantly upon session creation.
📝 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.
🔍 Behavior
🛠️ Technical Context
Navbar.tsxorHeader.js🧪 Steps to Reproduce
LegalSummariserlanding page.💡 Potential Root Causes
AuthContextis not being updated immediately after the API response.localStorageorCookiesafter the login action.✅ Proposed Action Plan
useEffecthook in the Header component to listen for changes in the Auth state.AuthProvider(Context API) to provide a globalisLoggedInboolean.{isLoggedIn ? <UserMenu /> : <LoginLinks />}I am currently debugging the authentication context to ensure the UI updates instantly upon session creation.