Skip to content

[FEATURE] Web Navbar Auth-State Split and Guest Avatar Behavior #173

Description

@erinc00

Primary Objective

Implement a clear auth-aware navbar behavior on web so authenticated and guest users see appropriate navigation, avatar/menu state, and protected-route behavior without affecting existing integrated backend/auth flows.

Motivation

Current navbar presentation is close to authenticated UX in all cases, which can confuse guest users and expose navigation paths that should be reserved for logged-in users.
Separating guest vs authenticated behavior improves usability, reduces access confusion, and aligns frontend behavior with expected auth boundaries.

Scope

  • Web frontend only web.
  • Navbar rendering and user-menu behavior by auth state.
  • Guest avatar/icon behavior.
    -Protected-route redirect behavior for guest users.
    -Keep current authenticated logout/menu behavior intact.
  • No backend endpoint/schema changes.

Feature Details

Authenticated Navbar Behavior:

  • Show authenticated navigation set (Profile / Privacy / Security and current user menu behavior).
  • Keep existing initials/avatar behavior for logged-in users.
  • Keep existing logout flow unchanged.

Guest Navbar Behavior:

  • Show guest-safe navigation only.
  • Replace initials/avatar with a generic user icon when user is not authenticated.
  • Hide authenticated-only actions for guests.

Protected Page Handling:

  • Redirect unauthenticated users from protected pages (e.g., profile/security) to login.
  • Support optional return path (returnTo) for post-login navigation recovery.

Auth Source of Truth:

  • Use existing auth helper flow consistently.
  • Avoid ad-hoc localStorage key checks for auth decisions.

Regression Safety:

  • Preserve behavior of already integrated homepage/news/legal/footer flows.
  • Preserve existing token clear + redirect logout semantics.

Acceptance Criteria

  • Code implemented
  • Unit tests passed
  • Documentation updated

Notes

This issue is intentionally limited to auth-state UI behavior and routing guards on web.
No broad visual redesign is required.
If needed, implementation can be split into two commits:

  • feat: split navbar guest/auth states
  • fix: guard protected routes for guest users

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions