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

[ViktorSvertoka]

Summary

This PR optimizes client auth state handling to reduce host/DB load and remove auth UI flicker during locale switches and multi-tab usage.

Summary by CodeRabbit

New Features

• Authentication state now automatically synchronizes across all browser tabs and windows for consistent session management.
• Implemented client-side caching for authentication requests to reduce unnecessary API calls and improve performance.

Updates

• Refined the authentication response structure for enhanced consistency and reliability.

[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 1:17pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR implements cross-tab authentication state synchronization and optimizes auth fetching by introducing client-side caching with TTL, request deduplication, and a BroadcastChannel-based sync mechanism. The auth/me endpoint payload is simplified to omit username. Components now trigger broadcasts on auth state changes.

Changes

Cohort / File(s)	Summary
API & Core Auth Logic frontend/app/api/auth/me/route.ts, frontend/lib/auth.ts	Changed auth endpoint to use new getAuthSession() helper; removed username from response payload. Introduced AuthSession type and getAuthSession() function to standardize session data shape.
Auth Hook Optimization frontend/hooks/useAuth.tsx	Major refactor: added client-side caching with TTL, deduplicates in-flight auth requests, replaced AbortController with focus-based refresh, subscribes to external auth updates, and removed username from exposed user data.
Cross-Tab Synchronization frontend/lib/auth-sync.ts	New utility module exposing broadcastAuthUpdated() and subscribeToAuthUpdates() functions using BroadcastChannel for coordinating auth state changes across browser tabs.
Component Auth Integration frontend/components/auth/LoginForm.tsx, frontend/components/auth/SignupForm.tsx, frontend/components/q&a/AIWordHelper.tsx	LoginForm and SignupForm now invoke broadcastAuthUpdated() post-login/signup. AIWordHelper replaces per-instance API call with useAuth hook for centralized auth status.
Logout Integration frontend/lib/logout.ts	Added broadcastAuthUpdated() call after logout request to trigger cross-tab sync.

Sequence Diagram(s)

sequenceDiagram
    participant Tab1 as User Tab 1
    participant API as Auth API
    participant BC as BroadcastChannel
    participant Tab2 as User Tab 2
    participant Hook as useAuth Hook

    Note over Tab1,Tab2: Cross-Tab Auth Sync Flow

    Tab1->>API: POST /login (credentials)
    API-->>Tab1: auth token
    Tab1->>Tab1: LoginForm calls broadcastAuthUpdated()
    Tab1->>BC: Post AUTH_UPDATED event
    
    Note over Tab2: Receives broadcast
    Tab2->>BC: subscribeToAuthUpdates triggered
    Tab2->>Hook: Force refresh auth state
    Hook->>API: GET /api/auth/me
    API-->>Hook: Return cached session {id,role}
    Hook->>Hook: Update cache + timestamp
    Hook-->>Tab2: Context updated, components re-render

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• (SP:2) [Frontend] refactor: modularize auth pages and unify layout, fields, and banners #159: Introduces LoginForm and SignupForm components that are now integrated with the auth-sync broadcasting mechanism in this PR.
• (SP: 2) [Frontend] Remove [locale] layout force-dynamic and move auth to client-side #370: Overlaps on auth surface changes including auth/me endpoint payload, useAuth hook refactoring, and component consumption patterns.

Suggested labels

performance

Suggested reviewers

• AM1007

Poem

🐰 Hops through tabs with glee,
Auth broadcasts sync with care,
Cache and dedupe so free,
Sessions floating everywhere,
Cross-tab magic in the air! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objectives: reducing auth overhead and syncing auth state across tabs, which are the core focuses of the changes.

_{✏️ 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 bug/fix

---

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]

🧹 Nitpick comments (3)

frontend/lib/auth.ts (1)

117-131: Consider renaming variable for clarity.

The variable payload at line 118 is actually an AuthSession object, not a raw token payload. Consider renaming to session for clarity:

 export async function getCurrentUser(): Promise<AuthUser | null> {
-  const payload = await getAuthSession();
-  if (!payload) {
+  const session = await getAuthSession();
+  if (!session) {
     return null;
   }

   const result = await db
     .select({
       id: users.id,
       email: users.email,
       role: users.role,
       username: users.name,
     })
     .from(users)
-    .where(eq(users.id, payload.id))
+    .where(eq(users.id, session.id))
     .limit(1);

🤖 Prompt for AI Agents

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

In `@frontend/lib/auth.ts` around lines 117 - 131, In getCurrentUser(), rename the
local variable payload (the result of getAuthSession()) to session to accurately
reflect its type; update the declaration and all subsequent references in the
function (including the where(eq(users.id, payload.id)) check) to use
session.id, and ensure any related imports/usages in getCurrentUser remain
consistent (identify via function name getCurrentUser and call to
getAuthSession).

frontend/hooks/useAuth.tsx (2)

96-107: Error state is cached for the full TTL.

When an error occurs, authUserCache is set to null (not undefined), which means isCacheFresh() will return true for the next 60 seconds. This prevents automatic recovery from transient errors during that window—though explicit refresh() calls and cross-tab broadcasts will still bypass the cache via force: true.

If faster recovery from transient errors is desired, consider either:

• Using a shorter TTL for error states, or
• Setting authUserCache = undefined on error to allow immediate retry

Current behavior is acceptable if the intent is to prevent hammering the server after errors.

🤖 Prompt for AI Agents

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

In `@frontend/hooks/useAuth.tsx` around lines 96 - 107, The error case currently
sets authUserCache = null and authUserCacheAt = Date.now(), which makes
isCacheFresh() treat the error state as fresh for the full TTL and blocks
automatic retries; change the error handling in the catch block of useAuth (the
section that checks DOMException/AbortError, latestRequestIdRef.current vs
requestId, then sets authUserCache/authUserCacheAt and calls setUser) to instead
set authUserCache = undefined (or alternatively set a much shorter
authUserCacheAt TTL) so that isCacheFresh() will not block immediate retry
attempts (while still keeping explicit refresh() and force:true behavior
intact).

---

57-67: Unused AbortError handling.

fetchAuthDeduped() doesn't pass an AbortSignal to fetchAuth(), so the AbortError handling at lines 97-99 is effectively dead code. Either:

• Remove the abort handling since requests are no longer cancellable, or
• Add abort support to fetchAuthDeduped if cancellation is desired

Option 1: Remove dead code

     } catch (error) {
-      if (error instanceof DOMException && error.name === 'AbortError') {
-        return;
-      }
-
       if (latestRequestIdRef.current !== requestId) {
         return;
       }

Also applies to: 97-99

🤖 Prompt for AI Agents

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

In `@frontend/hooks/useAuth.tsx` around lines 57 - 67, The deduping helper
fetchAuthDeduped currently calls fetchAuth() with no AbortSignal, so the
AbortError handling in the surrounding auth flow (e.g., the try/catch that
checks for AbortError) is ineffective; either remove that dead AbortError branch
or make fetchAuthDeduped support cancellation by accepting an AbortSignal and
forwarding it into fetchAuth (and ensuring inFlightAuthPromise is cleared on
finally/abort). Update the function signature fetchAuthDeduped(signal?:
AbortSignal) and call fetchAuth({ signal }) (or remove the AbortError catch
where fetchAuthDeduped is used) so the abort path becomes meaningful and
inFlightAuthPromise lifecycle remains correct.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@frontend/hooks/useAuth.tsx`:
- Around line 96-107: The error case currently sets authUserCache = null and
authUserCacheAt = Date.now(), which makes isCacheFresh() treat the error state
as fresh for the full TTL and blocks automatic retries; change the error
handling in the catch block of useAuth (the section that checks
DOMException/AbortError, latestRequestIdRef.current vs requestId, then sets
authUserCache/authUserCacheAt and calls setUser) to instead set authUserCache =
undefined (or alternatively set a much shorter authUserCacheAt TTL) so that
isCacheFresh() will not block immediate retry attempts (while still keeping
explicit refresh() and force:true behavior intact).
- Around line 57-67: The deduping helper fetchAuthDeduped currently calls
fetchAuth() with no AbortSignal, so the AbortError handling in the surrounding
auth flow (e.g., the try/catch that checks for AbortError) is ineffective;
either remove that dead AbortError branch or make fetchAuthDeduped support
cancellation by accepting an AbortSignal and forwarding it into fetchAuth (and
ensuring inFlightAuthPromise is cleared on finally/abort). Update the function
signature fetchAuthDeduped(signal?: AbortSignal) and call fetchAuth({ signal })
(or remove the AbortError catch where fetchAuthDeduped is used) so the abort
path becomes meaningful and inFlightAuthPromise lifecycle remains correct.

In `@frontend/lib/auth.ts`:
- Around line 117-131: In getCurrentUser(), rename the local variable payload
(the result of getAuthSession()) to session to accurately reflect its type;
update the declaration and all subsequent references in the function (including
the where(eq(users.id, payload.id)) check) to use session.id, and ensure any
related imports/usages in getCurrentUser remain consistent (identify via
function name getCurrentUser and call to getAuthSession).

---

ℹ️ 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 6e3526f and 7696147.

📒 Files selected for processing (8)

• frontend/app/api/auth/me/route.ts
• frontend/components/auth/LoginForm.tsx
• frontend/components/auth/SignupForm.tsx
• frontend/components/q&a/AIWordHelper.tsx
• frontend/hooks/useAuth.tsx
• frontend/lib/auth-sync.ts
• frontend/lib/auth.ts
• frontend/lib/logout.ts