(SP: 2) [Frontend] Remove [locale] layout force-dynamic and move auth to client-side

[ViktorSvertoka]

What changed

• Removed `force-dynamic` and server auth read from `app/[locale]/layout.tsx`
• Added client auth state layer: `hooks/useAuth.tsx` + `AuthProvider`
• Updated header flow (`AppChrome`, `MainSwitcher`) to consume `useAuth()`
• Updated `/api/auth/me` response shape and cache headers (`no-store`)
• Kept dashboard explicitly dynamic via `app/[locale]/dashboard/layout.tsx`
• Adjusted `AIWordHelper` to new `/api/auth/me` payload

Why

This unblocks static/ISR rendering for locale pages while preserving dynamic behavior for user-specific dashboard routes.

Validation

• Targeted ESLint on changed files passed
• Full repo typecheck has unrelated pre-existing test errors

Closes #369

Summary by CodeRabbit

• New Features

  • Added authentication context provider to centralize user authentication state management throughout the application.

• Refactor

  • Admin feature access is now managed through environment-based feature flags for more flexible control.
  • Streamlined authentication API response to return only essential user information.
  • Improved component authentication handling by leveraging context instead of prop-based passing.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ignored	Preview	Feb 26, 2026 0:03am

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	19b35c1
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69a0367b09625e00080ed379
😎 Deploy Preview	https://deploy-preview-370--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a988902 and 19b35c1.

📒 Files selected for processing (1)

• frontend/hooks/useAuth.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/hooks/useAuth.tsx

---

📝 Walkthrough

Walkthrough

This PR moves authentication from server-side evaluation in the layout (accessing user/cookies) to client-side via a new AuthProvider and useAuth hook. The server layout is simplified to remove getCurrentUser() calls, enabling static/ISR rendering. Header components now derive auth state from the client-side hook instead of receiving it as props. The API endpoint /api/auth/me is streamlined to return only id, role, and username.

Changes

Cohort / File(s)	Summary
New auth context and hook frontend/hooks/useAuth.tsx	Introduces AuthProvider component that fetches user from /api/auth/me on mount with abort handling, and useAuth hook that exposes user, userExists, userId, isAdmin, username, loading, and refresh derived from the context.
Auth API endpoint frontend/app/api/auth/me/route.ts	Simplified response to return only { id, role, username } instead of full user object; added Cache-Control: no-store header; returns null when no user exists.
Layout and component prop updates frontend/app/[locale]/layout.tsx, frontend/components/header/AppChrome.tsx, frontend/components/header/MainSwitcher.tsx	Removed user-based props (userExists, userId, showAdminLink) and replaced with enableAdminFeature flag; added AuthProvider wrapper; components now use useAuth hook to derive auth state internally instead of receiving via props.
Auth state consumption updates frontend/components/q&a/AIWordHelper.tsx	Updated authentication check to derive auth status from data?.id instead of data.user, reflecting new API response structure.

Sequence Diagram(s)

sequenceDiagram
    participant App as React App
    participant AP as AuthProvider
    participant API as /api/auth/me
    participant Ctx as AuthContext
    participant Comp as Header Components

    App->>AP: Render with AuthProvider wrapper
    AP->>AP: useEffect on mount
    AP->>API: POST/GET request with AbortController
    API-->>AP: { id, role, username } or null
    AP->>Ctx: Update user state & memoize derived fields
    Ctx-->>Comp: Provide userExists, userId, isAdmin, loading, refresh
    Comp->>Comp: useAuth() hook consumes context
    Comp-->>App: Render with auth-derived showAdminLink conditional

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat(dashboard): explained terms card, layout fixes, support link #294 — Also modifies MainSwitcher.tsx with dashboard-route detection and layout changes
• (SP: 1) [Frontend] Fix UI Q&A spacing, accordion borders, and button backgrounds #171 — Also modifies MainSwitcher.tsx to add QA-path detection and rendering logic
• ref: header separating shop and main header and removing footer #59 — Also modifies app/[locale]/layout.tsx and admin-feature flag handling in header components

Suggested labels

refactor

Suggested reviewers

• AM1007

Poem

🐰 From server to client, our auth takes flight,
No more force-dynamic, static feels right!
With AuthProvider wrapped 'round the tree,
Context flows gently, isAdmin and me,
Static rendering hops into the light! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: removing force-dynamic from the locale layout and moving authentication to client-side.
Linked Issues check	✅ Passed	All coding requirements from #369 are met: getCurrentUser() removed from layout [#369], useAuth/AuthProvider implemented [#369], /api/auth/me updated with no-store headers [#369], header components refactored to use client-side auth [#369], and linting completed [#369].
Out of Scope Changes check	✅ Passed	All changes align with issue #369 objectives: layout changes, auth provider implementation, header refactoring, API endpoint updates, and dashboard dynamic layout handling are all in scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch perf/layout-auth-client-side-dynamic-removal

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/hooks/useAuth.tsx`:
- Around line 50-84: The refresh and initial load (functions refresh and
loadAuth) can complete out of order and overwrite newer state; implement a
"latest-request-wins" token to ignore stale responses: add a scoped incrementing
requestId (or symbol) that you capture before calling fetchAuth in both refresh
and loadAuth, pass the same AbortSignal for cancellation as needed, then only
call setUser or setLoading(false) if the captured requestId matches the current
latestRequestId; update both refresh and loadAuth to check this token before
mutating state so slower earlier requests cannot overwrite newer results.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 006b39b and a988902.

📒 Files selected for processing (7)

• frontend/app/[locale]/dashboard/layout.tsx
• frontend/app/[locale]/layout.tsx
• frontend/app/api/auth/me/route.ts
• frontend/components/header/AppChrome.tsx
• frontend/components/header/MainSwitcher.tsx
• frontend/components/q&a/AIWordHelper.tsx
• frontend/hooks/useAuth.tsx