(SP: 2) [Frontend] Reduce auth overhead and sync auth state across tabs (#372)

* 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

* feat(frontend): sync auth state across tabs via BroadcastChannel

Author: ViktorSvertoka

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

@@ -2,13 +2,11 @@ import 'server-only';
 
 import { NextResponse } from 'next/server';
 
-import { getCurrentUser } from '@/lib/auth';
+import { getAuthSession } from '@/lib/auth';
 
 export async function GET() {
-  const user = await getCurrentUser();
-  const payload = user
-    ? { id: user.id, role: user.role, username: user.username }
-    : null;
+  const session = await getAuthSession();
+  const payload = session ? { id: session.id, role: session.role } : null;
 
   return NextResponse.json(payload, {
     status: 200,

frontend/components/auth/LoginForm.tsx

@@ -11,6 +11,7 @@ import { EmailField } from '@/components/auth/fields/EmailField';
 import { PasswordField } from '@/components/auth/fields/PasswordField';
 import { Button } from '@/components/ui/button';
 import { Link } from '@/i18n/routing';
+import { broadcastAuthUpdated } from '@/lib/auth-sync';
 
 type LoginFormProps = {
   locale: string;
@@ -59,6 +60,7 @@ export function LoginForm({ locale, returnTo }: LoginFormProps) {
         return;
       }
 
+      broadcastAuthUpdated();
       window.location.href = returnTo || `/${locale}/dashboard`;
     } catch (err) {
       console.error('Login request failed:', err);

frontend/components/auth/SignupForm.tsx

@@ -22,6 +22,7 @@ import {
   PASSWORD_MIN_LEN,
   PASSWORD_POLICY_REGEX,
 } from '@/lib/auth/signup-constraints';
+import { broadcastAuthUpdated } from '@/lib/auth-sync';
 
 type SignupFormProps = {
   locale: string;
@@ -173,6 +174,7 @@ export function SignupForm({ locale, returnTo }: SignupFormProps) {
         return;
       }
 
+      broadcastAuthUpdated();
       window.location.href = returnTo || `/${locale}/dashboard`;
     } catch {
       setError(t('errors.networkError'));

frontend/components/q&a/AIWordHelper.tsx

@@ -19,6 +19,7 @@ import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import { useAuth } from '@/hooks/useAuth';
 import { Link } from '@/i18n/routing';
 import {
   getCachedExplanation,
@@ -160,8 +161,8 @@ export default function AIWordHelper({
   );
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
-  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+  const { userExists, loading: isCheckingAuth } = useAuth();
+  const isAuthenticated = userExists;
   const [rateLimitState, setRateLimitState] = useState<RateLimitState>({
     isRateLimited: false,
     resetIn: 0,
@@ -186,25 +187,6 @@ export default function AIWordHelper({
 
   const modalRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const checkAuth = async () => {
-      setIsCheckingAuth(true);
-      try {
-        const response = await fetch('/api/auth/me');
-        const data = await response.json();
-        setIsAuthenticated(Boolean(data?.id));
-      } catch {
-        setIsAuthenticated(false);
-      } finally {
-        setIsCheckingAuth(false);
-      }
-    };
-
-    checkAuth();
-  }, [isOpen]);
-
   useEffect(() => {
     if (isOpen) {
       setPosition({ x: 0, y: 0 });

frontend/hooks/useAuth.tsx

@@ -11,23 +11,28 @@ import {
   useState,
 } from 'react';
 
+import { subscribeToAuthUpdates } from '@/lib/auth-sync';
+
 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);
+let authUserCache: AuthApiUser | undefined;
+let authUserCacheAt = 0;
+let inFlightAuthPromise: Promise<AuthApiUser> | null = null;
+
+const AUTH_CACHE_TTL_MS = 60_000;
 
 async function fetchAuth(signal?: AbortSignal): Promise<AuthApiUser> {
   const response = await fetch('/api/auth/me', {
@@ -44,22 +49,49 @@ async function fetchAuth(signal?: AbortSignal): Promise<AuthApiUser> {
   return (await response.json()) as AuthApiUser;
 }
 
+function isCacheFresh(): boolean {
+  if (authUserCache === undefined) return false;
+  return Date.now() - authUserCacheAt < AUTH_CACHE_TTL_MS;
+}
+
+function fetchAuthDeduped(): Promise<AuthApiUser> {
+  if (inFlightAuthPromise) {
+    return inFlightAuthPromise;
+  }
+
+  inFlightAuthPromise = fetchAuth().finally(() => {
+    inFlightAuthPromise = null;
+  });
+
+  return inFlightAuthPromise;
+}
+
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<AuthApiUser>(null);
-  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState<AuthApiUser>(authUserCache ?? null);
+  const [loading, setLoading] = useState(authUserCache === undefined);
   const latestRequestIdRef = useRef(0);
 
-  const runAuthRequest = useCallback(async (signal?: AbortSignal) => {
+  const runAuthRequest = useCallback(async (options?: { force?: boolean }) => {
+    const force = options?.force ?? false;
+
+    if (!force && isCacheFresh()) {
+      setUser(authUserCache ?? null);
+      setLoading(false);
+      return;
+    }
+
     const requestId = ++latestRequestIdRef.current;
-    setLoading(true);
+    setLoading(authUserCache === undefined || force);
 
     try {
-      const nextUser = await fetchAuth(signal);
+      const nextUser = await fetchAuthDeduped();
 
       if (latestRequestIdRef.current !== requestId) {
         return;
       }
 
+      authUserCache = nextUser;
+      authUserCacheAt = Date.now();
       setUser(nextUser);
     } catch (error) {
       if (error instanceof DOMException && error.name === 'AbortError') {
@@ -70,6 +102,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         return;
       }
 
+      authUserCache = null;
+      authUserCacheAt = Date.now();
       setUser(null);
     } finally {
       if (latestRequestIdRef.current === requestId) {
@@ -79,26 +113,36 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const refresh = useCallback(async () => {
-    await runAuthRequest();
+    await runAuthRequest({ force: true });
   }, [runAuthRequest]);
 
   useEffect(() => {
-    const controller = new AbortController();
+    void runAuthRequest();
+  }, [runAuthRequest]);
 
-    void runAuthRequest(controller.signal);
+  useEffect(() => {
+    const handleFocus = () => {
+      void runAuthRequest();
+    };
 
+    window.addEventListener('focus', handleFocus);
     return () => {
-      controller.abort();
+      window.removeEventListener('focus', handleFocus);
     };
   }, [runAuthRequest]);
 
+  useEffect(() => {
+    return subscribeToAuthUpdates(() => {
+      void runAuthRequest({ force: true });
+    });
+  }, [runAuthRequest]);
+
   const value = useMemo<AuthContextValue>(
     () => ({
       user,
       userExists: Boolean(user),
       userId: user?.id ?? null,
       isAdmin: user?.role === 'admin',
-      username: user?.username ?? null,
       loading,
       refresh,
     }),

frontend/lib/auth-sync.ts

@@ -0,0 +1,38 @@
+'use client';
+
+const AUTH_CHANNEL_NAME = 'devlovers-auth-sync';
+const AUTH_UPDATED_EVENT = 'AUTH_UPDATED';
+
+type AuthSyncMessage = {
+  type: typeof AUTH_UPDATED_EVENT;
+};
+
+export function broadcastAuthUpdated() {
+  if (typeof window === 'undefined' || !('BroadcastChannel' in window)) {
+    return;
+  }
+
+  const channel = new BroadcastChannel(AUTH_CHANNEL_NAME);
+  const message: AuthSyncMessage = { type: AUTH_UPDATED_EVENT };
+  channel.postMessage(message);
+  channel.close();
+}
+
+export function subscribeToAuthUpdates(onUpdate: () => void): () => void {
+  if (typeof window === 'undefined' || !('BroadcastChannel' in window)) {
+    return () => {};
+  }
+
+  const channel = new BroadcastChannel(AUTH_CHANNEL_NAME);
+
+  channel.onmessage = event => {
+    const message = event.data as AuthSyncMessage | undefined;
+    if (message?.type === AUTH_UPDATED_EVENT) {
+      onUpdate();
+    }
+  };
+
+  return () => {
+    channel.close();
+  };
+}

frontend/lib/auth.ts

@@ -32,6 +32,12 @@ export type AuthUser = {
   username: string;
 };
 
+export type AuthSession = {
+  id: string;
+  email: string;
+  role: 'user' | 'admin';
+};
+
 export function signAuthToken(payload: AuthTokenPayload): string {
   return jwt.sign(payload, AUTH_SECRET, {
     expiresIn: AUTH_TOKEN_MAX_AGE,
@@ -89,7 +95,7 @@ export async function clearAuthCookie() {
   cookieStore.delete(AUTH_COOKIE_NAME);
 }
 
-export async function getCurrentUser(): Promise<AuthUser | null> {
+export async function getAuthSession(): Promise<AuthSession | null> {
   const cookieStore = await cookies();
   const token = cookieStore.get(AUTH_COOKIE_NAME)?.value;
   if (!token) {
@@ -101,6 +107,19 @@ export async function getCurrentUser(): Promise<AuthUser | null> {
     return null;
   }
 
+  return {
+    id: payload.userId,
+    email: payload.email,
+    role: payload.role,
+  };
+}
+
+export async function getCurrentUser(): Promise<AuthUser | null> {
+  const payload = await getAuthSession();
+  if (!payload) {
+    return null;
+  }
+
   const result = await db
     .select({
       id: users.id,
@@ -109,7 +128,7 @@ export async function getCurrentUser(): Promise<AuthUser | null> {
       username: users.name,
     })
     .from(users)
-    .where(eq(users.id, payload.userId))
+    .where(eq(users.id, payload.id))
     .limit(1);
 
   if (result.length === 0) {

frontend/lib/logout.ts

@@ -1,8 +1,12 @@
 'use client';
 
+import { broadcastAuthUpdated } from '@/lib/auth-sync';
+
 export async function logout() {
   await fetch('/api/auth/logout', {
     method: 'POST',
     credentials: 'same-origin',
   });
+
+  broadcastAuthUpdated();
 }