create-tigra 2.7.1 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tigra",
-    "version": "2.7.1",
+    "version": "2.8.0",
   "type": "module",
   "description": "Create a production-ready full-stack app with Next.js 16 + Fastify 5 + Prisma + Redis",
   "bin": {

package/template/_claude/rules/client/03-data-and-state.md

@@ -25,12 +25,15 @@
 Defaults in `app/providers.tsx`:
 
 ```typescript
-staleTime: 5 * 60 * 1000    // 5 min
-gcTime: 10 * 60 * 1000      // 10 min
-refetchOnWindowFocus: false
+staleTime: 30 * 1000         // 30s — short enough that back-navigation refetches
+gcTime: 5 * 60 * 1000        // 5 min
+refetchOnWindowFocus: true   // catch cross-tab edits
+refetchOnMount: true         // always refetch stale data on mount
 retry: 1
 ```
 
+**Why these values matter**: With a long `staleTime` (e.g. 5 min) and `refetchOnWindowFocus: false`, navigating back to a list page after editing a record on another page will show stale data until the user hard-refreshes. Keep `staleTime` short and let invalidation + remount refetch do their job.
+
 ### Query Key Factory Pattern
 
 ```typescript
@@ -45,9 +48,35 @@ export const itemKeys = {
 
 ### Mutations
 
-On success: invalidate related queries, show toast, navigate if needed.
+On success:
+1. **`queryClient.invalidateQueries({ queryKey: ... })`** — refreshes any client-fetched data (React Query).
+2. **`router.refresh()`** — refreshes any Server-Component-rendered data on the next route the user navigates to. Without this, the Next.js Router Cache will serve stale RSC payloads on back-navigation, and your edit will not appear until a hard refresh.
+3. Show a toast.
+4. Navigate if needed.
+
 On error: `toast.error(getErrorMessage(error))`.
 
+**Always call both `invalidateQueries` AND `router.refresh()`** unless you are 100% certain no Server Component on any reachable route reads the mutated data. The two caches are independent — invalidating one does not touch the other.
+
+```typescript
+const router = useRouter();
+const queryClient = useQueryClient();
+
+const mutation = useMutation({
+  mutationFn: (data) => itemService.updateItem(id, data),
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: itemKeys.all });
+    router.refresh();
+    toast.success('Item updated');
+  },
+  onError: (error) => toast.error(getErrorMessage(error)),
+});
+```
+
+### Next.js Router Cache
+
+`next.config.ts` sets `experimental.staleTimes: { dynamic: 0, static: 0 }` to disable client-side Router Cache reuse. **Never raise these values** — doing so reintroduces the back-navigation stale-data bug across every page that uses Server Components for data fetching.
+
 ---
 
 ## Redux
@@ -61,7 +90,17 @@ State shape:
 { user: IUser | null; isAuthenticated: boolean; isInitializing: boolean; isLoggingOut: boolean }
 ```
 
-**Not persisted to localStorage** — auth state is hydrated on page load by `AuthInitializer` calling `getMe()`. Tokens are stored in httpOnly cookies (not accessible from JS).
+**Not persisted to localStorage** — auth state is hydrated by `AuthInitializer`, which calls the `useCurrentUser()` hook. `useCurrentUser()` is a React Query wrapper around `authService.getMe()` that syncs the result into Redux via a side effect. Tokens are stored in httpOnly cookies (not accessible from JS).
+
+**Refreshing the current user**: any mutation that changes the logged-in user's own data (profile update, role change, avatar upload, email verification, subscription change, etc.) MUST invalidate the auth query so Redux picks up the new values:
+
+```typescript
+import { authKeys } from '@/features/auth/hooks/useCurrentUser';
+
+queryClient.invalidateQueries({ queryKey: authKeys.me() });
+```
+
+Without this, Redux will hold the stale snapshot from initial page load until the next window-focus refetch (30s staleTime), or until logout/hard refresh. Never write directly to the auth slice from outside the auth feature — always go through invalidation.
 
 ---
 

package/template/_claude/rules/client/05-security.md

@@ -37,7 +37,7 @@ X-XSS-Protection: 1; mode=block
 default-src 'self';
 script-src 'self' 'unsafe-eval' 'unsafe-inline';
 style-src 'self' 'unsafe-inline';
-img-src 'self' blob: data: https:;
+img-src 'self' blob: data: https: ${apiOrigin};
 font-src 'self';
 object-src 'none';
 base-uri 'self';

package/template/_claude/skills/clean-ui/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: clean-ui
+description: Remove the starter welcome page UI and replace with a blank canvas, preserving all client-side functionality (auth, hooks, services, store, middleware, utils)
+---
+
+The user wants to remove the starter/welcome UI from the scaffolded client and start with a blank page.
+
+## What this skill does
+
+Replaces the demo welcome page (`src/app/page.tsx`) with the absolute bare minimum — just a centered "Ready to build." text. **Nothing else is touched** — all functional infrastructure remains intact.
+
+## What gets replaced
+
+| File | Action | Reason |
+|------|--------|--------|
+| `src/app/page.tsx` | **Replace** with blank canvas | Remove ALL demo content — hero, ambient glow, GitHub links, buttons, everything |
+
+## What is NOT touched (preserved as-is)
+
+- `src/components/layout/` — Header, Footer, MainLayout
+- `src/app/layout.tsx` — root layout with providers
+- `src/app/providers.tsx` — Redux, React Query, themes, AuthInitializer
+- `src/app/error.tsx`, `src/app/not-found.tsx`, `src/app/loading.tsx`
+- `src/middleware.ts` — route protection
+- `src/features/auth/**` — entire auth system
+- `src/components/common/**` — ThemeToggle, EmptyState, LoadingSpinner, etc.
+- `src/components/ui/**` — all shadcn/ui components
+- `src/hooks/**`, `src/store/**`, `src/lib/**`, `src/styles/**`
+- All config files
+
+## Steps
+
+1. Read `src/app/page.tsx` to confirm it exists.
+2. Replace its contents with the clean page below. Use the **exact** template — do not add anything.
+3. Confirm to the user what was done.
+
+## Clean page template
+
+Replace `src/app/page.tsx` with **exactly** this — no additions, no modifications:
+
+```tsx
+import type React from 'react';
+
+export default function HomePage(): React.ReactElement {
+  return (
+    <main className="flex min-h-dvh items-center justify-center">
+      <p className="text-sm text-muted-foreground">Ready to build.</p>
+    </main>
+  );
+}
+```
+
+**CRITICAL**: Do NOT add anything beyond what is in the template above. No heading, no links, no buttons, no metadata, no imports beyond React. The entire point is a blank canvas.
+
+## Response format
+
+After completing, respond with:
+
+```
+Starter UI cleaned. `src/app/page.tsx` is now a blank canvas.
+
+Everything else is untouched — auth, hooks, services, store, middleware, components, and design system are all intact.
+```

package/template/_claude/skills/theme/SKILL.md

@@ -0,0 +1,109 @@
+---
+name: theme
+description: Change the color palette in the client theme file. Only swaps HEX values — never touches variable names, file structure, or conventions.
+argument-hint: "[color description or specific HEX values]"
+---
+
+# Theme Palette Changer
+
+The user wants to change the color palette. Their input: **$ARGUMENTS**
+
+## Your ONLY job
+
+Replace HEX color values in `src/styles/themes/default.css` (or the equivalent theme file in the active project's client directory). That's it.
+
+## What you MUST NOT do
+
+- **DO NOT** rename, add, or remove any CSS variable names (e.g., `--primary`, `--background`, `--muted`)
+- **DO NOT** change the file structure, move files, or create new files
+- **DO NOT** touch `globals.css`, components, or any other file
+- **DO NOT** change `--radius` or any non-color value
+- **DO NOT** convert HEX to OKLCH, HSL, or any other format — stay in HEX
+- **DO NOT** remove the `.dark` selector or the `:root` selector
+- **DO NOT** remove or rewrite comments unless updating the palette description at the top
+- **DO NOT** change `rgba()` values to HEX — keep `rgba()` where it already exists (e.g., dark mode `--border`, `--input`)
+- **DO NOT** touch any code outside the theme file — no components, no Tailwind config, no globals
+
+## Before making changes — ask these questions if not answered
+
+You MUST gather enough information before editing. If the user's input doesn't cover these, ask BEFORE making any changes:
+
+### Required information
+
+1. **Primary/brand color** — What is the main accent color? (at minimum, you need this)
+
+### Clarifying questions (ask if not addressed)
+
+2. **Dark mode** — one of:
+   - "Will you provide dark mode colors yourself, or should I generate them from your palette?"
+   - Skip if user explicitly says "light mode only" or provides both sets
+
+3. **Palette vibe/mood** — if the user only gave a single color or vague description:
+   - "What's the mood? (e.g., warm, cool, corporate, playful, minimal, luxury)"
+   - This helps you pick complementary background, muted, secondary, and accent colors
+
+4. **Background preference** — if not obvious from context:
+   - "Do you want a light cream/warm background, a cool/gray background, or pure white?"
+
+5. **Destructive/success/warning/info** — if the user provides a full custom palette but skips these:
+   - "Should I keep the current red/green/amber/blue for status colors, or adjust them to match your new palette?"
+
+### When you have enough
+
+- User gives a full palette with explicit HEX values for most tokens → just apply them, generate any missing ones
+- User gives a brand color + mood → generate a cohesive palette and present it for approval before applying
+- User gives a full set of colors for both light and dark → apply directly
+
+## How to apply changes
+
+1. **Read** the current `default.css` theme file first
+2. **Locate** the correct theme file:
+   - In a scaffolded project: `client/src/styles/themes/default.css`
+   - In the template: `template/client/src/styles/themes/default.css`
+   - Check which one exists in the current working directory
+3. **Present** your proposed palette to the user in a readable table BEFORE editing:
+
+   | Token | Current | New (Light) | New (Dark) |
+   |-------|---------|-------------|------------|
+   | --background | #f4f3ee | #... | #... |
+   | --primary | #c15f3c | #... | #... |
+   | ... | ... | ... | ... |
+
+4. **Wait for user approval** — do not edit until they confirm
+5. **Edit** the file using the Edit tool — only change HEX values
+6. **Update** the comment block at the top to reflect the new palette name/vibe (e.g., "Ocean blue palette" instead of "Claude-inspired warm palette")
+7. **Confirm** what was changed in a brief summary
+
+## Palette generation guidelines
+
+When generating colors from a brand color, follow these principles:
+
+- **Background**: Very desaturated, light tint of the brand hue (light mode) / very dark shade (dark mode)
+- **Foreground**: Near-black with a hint of the brand hue (light mode) / near-white (dark mode)
+- **Primary**: The brand color itself (light) / slightly lighter/more vibrant version (dark)
+- **Primary-foreground**: White or near-white for contrast against primary
+- **Secondary/muted/accent**: Desaturated, low-contrast versions of the brand palette
+- **Card/popover**: White or very slight tint (light) / slightly elevated dark shade (dark)
+- **Border/input**: Very subtle, low-contrast separator colors
+- **Ring**: Same as primary (focus ring should match brand)
+- **Destructive**: Red family (#e7000b light / #ff6467 dark) — adjust warmth/coolness to match palette
+- **Success**: Green family — adjust to match palette temperature
+- **Warning**: Amber/yellow family — adjust to match palette temperature
+- **Info**: Blue family — adjust to match palette temperature
+- **Chart colors**: 5 distinct, harmonious colors for data visualization
+- **Sidebar**: Slightly different shade than main background for visual separation
+
+### Dark mode rules
+
+- Increase brightness of the primary color (not just invert)
+- Background should be very dark (not pure black) with a hint of the brand hue
+- Borders use `rgba()` for subtle transparency — keep this pattern
+- Foreground colors should be off-white, not pure #ffffff
+- Reduce contrast slightly compared to light mode to reduce eye strain
+
+## Edge cases
+
+- If user says "make it blue" → ask for a specific shade or suggest 3 options (e.g., ocean #0066cc, royal #4169e1, navy #1a237e)
+- If user provides only RGB or HSL → convert to HEX yourself, don't ask them to convert
+- If user wants to keep some colors and change others → only change the ones they specified
+- If the theme file doesn't exist → tell the user to scaffold the project first, don't create the file

package/template/client/next.config.ts

@@ -11,6 +11,9 @@ const apiOrigin = (() => {
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  experimental: {
+    staleTimes: { dynamic: 0, static: 0 },
+  },
   async headers() {
     return [
       {
@@ -26,7 +29,7 @@ const nextConfig: NextConfig = {
               "default-src 'self'",
               "script-src 'self' 'unsafe-eval' 'unsafe-inline'",
               "style-src 'self' 'unsafe-inline'",
-              "img-src 'self' blob: data: https:",
+              `img-src 'self' blob: data: https: ${apiOrigin}`,
               "font-src 'self'",
               "object-src 'none'",
               "base-uri 'self'",

package/template/client/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "{{PROJECT_NAME}}-client",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint src/",
-    "generate:env": "node -e \"import('fs').then(f=>{if(f.existsSync('.env'))console.log('.env already exists, skipping');else{f.copyFileSync('.env.example','.env');console.log('.env created from .env.example')}})\""
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@reduxjs/toolkit": "^2.11.2",
-    "@tanstack/react-query": "^5.90.21",
-    "axios": "^1.13.5",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
-    "next": "16.1.6",
-    "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-hook-form": "^7.71.1",
-    "react-redux": "^9.2.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.3.6"
-  },
-  "overrides": {
-    "minimatch": ">=10.2.1"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.6",
-    "shadcn": "^3.8.4",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "{{PROJECT_NAME}}-client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint src/",
+    "generate:env": "node -e \"import('fs').then(f=>{if(f.existsSync('.env'))console.log('.env already exists, skipping');else{f.copyFileSync('.env.example','.env');console.log('.env created from .env.example')}})\""
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.1",
+    "react-redux": "^9.2.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.3.6"
+  },
+  "overrides": {
+    "minimatch": ">=10.2.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "shadcn": "^3.8.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

package/template/client/src/app/globals.css

@@ -88,8 +88,16 @@
     transition-duration: 200ms;
     transition-timing-function: ease-out;
   }
+  html {
+    @apply bg-background;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
   body {
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
+    overflow-x: hidden;
+    touch-action: manipulation;
   }
 }

package/template/client/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import type React from 'react';
 import { Inter, JetBrains_Mono } from 'next/font/google';
 
@@ -21,6 +21,12 @@ export const metadata: Metadata = {
   description: 'A full-stack application built with Next.js and Fastify',
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover',
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{

package/template/client/src/app/providers.tsx

@@ -17,9 +17,10 @@ export function Providers({ children }: { children: React.ReactNode }): React.Re
       new QueryClient({
         defaultOptions: {
           queries: {
-            staleTime: 5 * 60 * 1000,
-            gcTime: 10 * 60 * 1000,
-            refetchOnWindowFocus: false,
+            staleTime: 30 * 1000,
+            gcTime: 5 * 60 * 1000,
+            refetchOnWindowFocus: true,
+            refetchOnMount: true,
             retry: 1,
           },
         },
@@ -29,7 +30,7 @@ export function Providers({ children }: { children: React.ReactNode }): React.Re
   return (
     <ReduxProvider store={store}>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider attribute="class" defaultTheme="light">
+        <ThemeProvider attribute="class" defaultTheme="light" enableColorScheme={false}>
           <AuthInitializer>
             {children}
           </AuthInitializer>

package/template/client/src/components/common/Pagination.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type React from 'react';
-import { useCallback } from 'react';
+import { Suspense, useCallback } from 'react';
 
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
@@ -13,7 +13,7 @@ interface PaginationProps {
   totalPages: number;
 }
 
-export const Pagination = ({ page, totalPages }: PaginationProps): React.ReactElement => {
+const PaginationInner = ({ page, totalPages }: PaginationProps): React.ReactElement => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -53,3 +53,11 @@ export const Pagination = ({ page, totalPages }: PaginationProps): React.ReactEl
     </div>
   );
 };
+
+export const Pagination = ({ page, totalPages }: PaginationProps): React.ReactElement => {
+  return (
+    <Suspense>
+      <PaginationInner page={page} totalPages={totalPages} />
+    </Suspense>
+  );
+};

package/template/client/src/features/admin/hooks/useAdminSessions.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 
 import { getErrorMessage } from '@/lib/utils/error';
@@ -48,6 +49,7 @@ interface UseForceExpireSessionReturn {
 
 export const useForceExpireSession = (): UseForceExpireSessionReturn => {
   const queryClient = useQueryClient();
+  const router = useRouter();
 
   const mutation = useMutation({
     mutationFn: (sessionId: string) => adminService.deleteSession(sessionId),
@@ -55,6 +57,7 @@ export const useForceExpireSession = (): UseForceExpireSessionReturn => {
       toast.success('Session expired successfully');
       queryClient.invalidateQueries({ queryKey: adminKeys.sessions() });
       queryClient.invalidateQueries({ queryKey: adminKeys.stats() });
+      router.refresh();
     },
     onError: (error) => {
       toast.error(getErrorMessage(error));

package/template/client/src/features/admin/hooks/useAdminUsers.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 
 import { getErrorMessage } from '@/lib/utils/error';
@@ -81,6 +82,7 @@ interface UseUpdateUserStatusReturn {
 
 export const useUpdateUserStatus = (): UseUpdateUserStatusReturn => {
   const queryClient = useQueryClient();
+  const router = useRouter();
 
   const mutation = useMutation({
     mutationFn: ({ userId, isActive }: { userId: string; isActive: boolean }) =>
@@ -90,6 +92,7 @@ export const useUpdateUserStatus = (): UseUpdateUserStatusReturn => {
       toast.success(`User ${action} successfully`);
       queryClient.invalidateQueries({ queryKey: adminKeys.users() });
       queryClient.invalidateQueries({ queryKey: adminKeys.stats() });
+      router.refresh();
     },
     onError: (error) => {
       toast.error(getErrorMessage(error));
@@ -111,6 +114,7 @@ interface UseUpdateUserRoleReturn {
 
 export const useUpdateUserRole = (): UseUpdateUserRoleReturn => {
   const queryClient = useQueryClient();
+  const router = useRouter();
 
   const mutation = useMutation({
     mutationFn: ({ userId, role }: { userId: string; role: 'USER' | 'ADMIN' }) =>
@@ -119,6 +123,7 @@ export const useUpdateUserRole = (): UseUpdateUserRoleReturn => {
       toast.success('User role updated successfully');
       queryClient.invalidateQueries({ queryKey: adminKeys.users() });
       queryClient.invalidateQueries({ queryKey: adminKeys.stats() });
+      router.refresh();
     },
     onError: (error) => {
       toast.error(getErrorMessage(error));

package/template/client/src/features/auth/components/AuthInitializer.tsx

@@ -7,11 +7,10 @@ import { usePathname, useRouter } from 'next/navigation';
 
 import { toast } from 'sonner';
 
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { useAppSelector } from '@/store/hooks';
 import { ROUTES } from '@/lib/constants/routes';
 import { isErrorCode, ERROR_CODES } from '@/lib/utils/error';
-import { authService } from '../services/auth.service';
-import { setUser, setInitialized } from '../store/authSlice';
+import { useCurrentUser } from '../hooks/useCurrentUser';
 
 const PROTECTED_PATHS: string[] = [ROUTES.DASHBOARD, ROUTES.PROFILE, '/admin'];
 
@@ -32,53 +31,37 @@ function isAuthPage(pathname: string): boolean {
   return AUTH_PATHS.some((path) => pathname.startsWith(path));
 }
 
+interface HttpLikeError {
+  response?: { status?: number };
+}
+
 export const AuthInitializer = ({ children }: AuthInitializerProps): React.ReactElement => {
-  const dispatch = useAppDispatch();
   const pathname = usePathname();
   const router = useRouter();
-  const { isAuthenticated, isLoggingOut } = useAppSelector((state) => state.auth);
+  const { isLoggingOut } = useAppSelector((state) => state.auth);
 
-  useEffect(() => {
-    // On auth pages (login, register, etc.), never call getMe().
-    // There is no session to hydrate, and a 401 here would trigger
-    // the refresh → fail → redirect chain, causing an infinite loop.
-    if (isAuthPage(pathname)) {
-      dispatch(setInitialized());
-      return;
-    }
+  // Skip getMe() on auth pages and during logout.
+  // React Query handles deduping, refetch-on-focus, and invalidation —
+  // any mutation that touches the current user (profile update, role change,
+  // avatar upload, email verification) should call:
+  //   queryClient.invalidateQueries({ queryKey: authKeys.me() })
+  // to refresh Redux state automatically.
+  const enabled = !isAuthPage(pathname) && !isLoggingOut;
 
-    // On other public pages, skip auth hydration — just mark as initialized
-    if (!isProtectedPath(pathname)) {
-      dispatch(setInitialized());
-      return;
-    }
+  const { error } = useCurrentUser({ enabled });
 
-    if (isAuthenticated || isLoggingOut) return;
-
-    let cancelled = false;
-
-    authService
-      .getMe()
-      .then((user) => {
-        if (!cancelled) dispatch(setUser(user));
-      })
-      .catch((error) => {
-        if (cancelled) return;
-        dispatch(setInitialized());
-        // Only redirect on auth errors (401/403), not network failures
-        const status = error?.response?.status;
-        if (status === 401 || status === 403) {
-          if (isErrorCode(error, ERROR_CODES.ACCOUNT_NOT_ACTIVE)) {
-            toast.error('Your account is not yet activated. Please verify your account.');
-          }
-          router.push(ROUTES.LOGIN);
-        }
-      });
-
-    return (): void => {
-      cancelled = true;
-    };
-  }, [dispatch, pathname, isAuthenticated, isLoggingOut, router]);
+  useEffect(() => {
+    if (!error) return;
+    if (!isProtectedPath(pathname)) return;
+
+    const status = (error as HttpLikeError)?.response?.status;
+    if (status === 401 || status === 403) {
+      if (isErrorCode(error, ERROR_CODES.ACCOUNT_NOT_ACTIVE)) {
+        toast.error('Your account is not yet activated. Please verify your account.');
+      }
+      router.push(ROUTES.LOGIN);
+    }
+  }, [error, pathname, router]);
 
   return <>{children}</>;
 };