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

* refactor(frontend): remove locale layout dynamic auth and move header auth client-side

* fix(frontend): prevent stale auth responses in useAuth and remove redundant dashboard dynamic layout

Author: ViktorSvertoka

frontend/app/[locale]/layout.tsx

@@ -13,10 +13,8 @@ import { CookieBanner } from '@/components/shared/CookieBanner';
 import Footer from '@/components/shared/Footer';
 import { ScrollWatcher } from '@/components/shared/ScrollWatcher';
 import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import { AuthProvider } from '@/hooks/useAuth';
 import { locales } from '@/i18n/config';
-import { getCurrentUser } from '@/lib/auth';
-
-export const dynamic = 'force-dynamic';
 
 const getCachedBlogCategories = unstable_cache(
   async () =>
@@ -41,22 +39,18 @@ export default async function LocaleLayout({
 
   if (!locales.includes(locale as any)) notFound();
 
-  const messages = await getMessages({ locale });
-  const user = await getCurrentUser();
-  const blogCategories = await getCachedBlogCategories();
+  const [messages, blogCategories] = await Promise.all([
+    getMessages({ locale }),
+    getCachedBlogCategories(),
+  ]);
 
-  const userExists = Boolean(user);
   const enableAdmin =
     (
       process.env.ENABLE_ADMIN_API ??
       process.env.NEXT_PUBLIC_ENABLE_ADMIN ??
       ''
     ).toLowerCase() === 'true';
 
-  const isAdmin = user?.role === 'admin';
-  const showAdminNavLink = Boolean(user) && isAdmin && enableAdmin;
-  const userId = user?.id ?? null;
-
   return (
     <NextIntlClientProvider messages={messages}>
       <ThemeProvider
@@ -65,20 +59,19 @@ export default async function LocaleLayout({
         enableSystem
         disableTransitionOnChange
       >
-        <AppChrome
-          userExists={userExists}
-          userId={userId}
-          showAdminLink={showAdminNavLink}
-          blogCategories={blogCategories}
-        >
-          <MainSwitcher
-            userExists={userExists}
-            showAdminLink={showAdminNavLink}
+        <AuthProvider>
+          <AppChrome
+            enableAdminFeature={enableAdmin}
             blogCategories={blogCategories}
           >
-            {children}
-          </MainSwitcher>
-        </AppChrome>
+            <MainSwitcher
+              enableAdminFeature={enableAdmin}
+              blogCategories={blogCategories}
+            >
+              {children}
+            </MainSwitcher>
+          </AppChrome>
+        </AuthProvider>
 
         <Footer />
         <Toaster position="top-right" richColors expand />

frontend/app/api/auth/me/route.ts

@@ -6,5 +6,14 @@ import { getCurrentUser } from '@/lib/auth';
 
 export async function GET() {
   const user = await getCurrentUser();
-  return NextResponse.json({ user }, { status: 200 });
+  const payload = user
+    ? { id: user.id, role: user.role, username: user.username }
+    : null;
+
+  return NextResponse.json(payload, {
+    status: 200,
+    headers: {
+      'Cache-Control': 'no-store',
+    },
+  });
 }

frontend/components/header/AppChrome.tsx

@@ -5,25 +5,24 @@ import React from 'react';
 
 import { UnifiedHeader } from '@/components/header/UnifiedHeader';
 import { CartProvider } from '@/components/shop/CartProvider';
+import { useAuth } from '@/hooks/useAuth';
 
 type AppChromeProps = {
-  userExists: boolean;
-  userId?: string | null;
-  showAdminLink?: boolean;
+  enableAdminFeature?: boolean;
   blogCategories?: Array<{ _id: string; title: string }>;
   children: React.ReactNode;
 };
 
 export function AppChrome({
-  userExists,
-  userId = null,
-  showAdminLink = false,
+  enableAdminFeature = false,
   blogCategories = [],
   children,
 }: AppChromeProps) {
+  const { userExists, userId, isAdmin } = useAuth();
   const segments = useSelectedLayoutSegments();
   const isShop = segments.includes('shop');
   const isBlog = segments.includes('blog');
+  const showAdminLink = userExists && isAdmin && enableAdminFeature;
 
   if (isShop) {
     return (

frontend/components/header/MainSwitcher.tsx

@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
 import type { ReactNode } from 'react';
 
 import { UnifiedHeader } from '@/components/header/UnifiedHeader';
+import { useAuth } from '@/hooks/useAuth';
 import { locales } from '@/i18n/config';
 
 function isShopPath(pathname: string): boolean {
@@ -52,20 +53,20 @@ function isLeaderboardPath(pathname: string): boolean {
 
 type MainSwitcherProps = {
   children: ReactNode;
-  userExists: boolean;
-  showAdminLink?: boolean;
+  enableAdminFeature?: boolean;
   blogCategories?: Array<{ _id: string; title: string }>;
 };
 
 export function MainSwitcher({
   children,
-  userExists,
-  showAdminLink = false,
+  enableAdminFeature = false,
   blogCategories = [],
 }: MainSwitcherProps) {
+  const { userExists, isAdmin } = useAuth();
   const pathname = usePathname();
   const isQa = isQaPath(pathname);
   const isHome = isHomePath(pathname);
+  const showAdminLink = userExists && isAdmin && enableAdminFeature;
 
   if (isShopPath(pathname)) return <>{children}</>;
 

frontend/components/q&a/AIWordHelper.tsx

@@ -194,7 +194,7 @@ export default function AIWordHelper({
       try {
         const response = await fetch('/api/auth/me');
         const data = await response.json();
-        setIsAuthenticated(Boolean(data.user));
+        setIsAuthenticated(Boolean(data?.id));
       } catch {
         setIsAuthenticated(false);
       } finally {

frontend/hooks/useAuth.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+type AuthApiUser = {
+  id: string;
+  role: 'user' | 'admin';
+  username: string;
+} | null;
+
+type AuthContextValue = {
+  user: AuthApiUser;
+  userExists: boolean;
+  userId: string | null;
+  isAdmin: boolean;
+  username: string | null;
+  loading: boolean;
+  refresh: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+async function fetchAuth(signal?: AbortSignal): Promise<AuthApiUser> {
+  const response = await fetch('/api/auth/me', {
+    method: 'GET',
+    cache: 'no-store',
+    credentials: 'include',
+    signal,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch auth state: ${response.status}`);
+  }
+
+  return (await response.json()) as AuthApiUser;
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthApiUser>(null);
+  const [loading, setLoading] = useState(true);
+  const latestRequestIdRef = useRef(0);
+
+  const runAuthRequest = useCallback(async (signal?: AbortSignal) => {
+    const requestId = ++latestRequestIdRef.current;
+    setLoading(true);
+
+    try {
+      const nextUser = await fetchAuth(signal);
+
+      if (latestRequestIdRef.current !== requestId) {
+        return;
+      }
+
+      setUser(nextUser);
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        return;
+      }
+
+      if (latestRequestIdRef.current !== requestId) {
+        return;
+      }
+
+      setUser(null);
+    } finally {
+      if (latestRequestIdRef.current === requestId) {
+        setLoading(false);
+      }
+    }
+  }, []);
+
+  const refresh = useCallback(async () => {
+    await runAuthRequest();
+  }, [runAuthRequest]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    void runAuthRequest(controller.signal);
+
+    return () => {
+      controller.abort();
+    };
+  }, [runAuthRequest]);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      user,
+      userExists: Boolean(user),
+      userId: user?.id ?? null,
+      isAdmin: user?.role === 'admin',
+      username: user?.username ?? null,
+      loading,
+      refresh,
+    }),
+    [user, loading, refresh]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return context;
+}