create-tigra 2.7.2 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tigra",
-    "version": "2.7.2",
+    "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/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/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/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}</>;
 };

package/template/client/src/features/auth/hooks/useAuth.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useRef } from 'react';
 
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 
@@ -29,12 +29,14 @@ interface UseAuthReturn {
 export const useAuth = (): UseAuthReturn => {
   const dispatch = useAppDispatch();
   const router = useRouter();
+  const queryClient = useQueryClient();
   const { user, isAuthenticated, isInitializing, isLoggingOut } = useAppSelector((state) => state.auth);
   const pendingRedirectRef = useRef<string>(ROUTES.DASHBOARD);
 
   const loginMutation = useMutation({
     mutationFn: (data: ILoginRequest) => authService.login(data),
     onSuccess: (data) => {
+      queryClient.clear();
       dispatch(setUser(data.user));
       toast.success('Signed in successfully');
       router.push(pendingRedirectRef.current);
@@ -56,6 +58,7 @@ export const useAuth = (): UseAuthReturn => {
         router.push(ROUTES.VERIFY_ACCOUNT);
         return;
       }
+      queryClient.clear();
       dispatch(setUser(data.user));
       toast.success('Account created successfully');
       router.push(ROUTES.DASHBOARD);
@@ -72,10 +75,11 @@ export const useAuth = (): UseAuthReturn => {
     } catch {
       // Proceed with local logout even if server call fails
     } finally {
+      queryClient.clear();
       dispatch(logoutAction());
       router.push(ROUTES.LOGIN);
     }
-  }, [dispatch, router]);
+  }, [dispatch, router, queryClient]);
 
   return {
     user,

package/template/client/src/features/auth/hooks/useCurrentUser.ts

@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { useAppDispatch } from '@/store/hooks';
+import { authService } from '../services/auth.service';
+import { setUser, setInitialized } from '../store/authSlice';
+
+import type { IUser } from '../types/auth.types';
+
+export const authKeys = {
+  all: ['auth'] as const,
+  me: () => [...authKeys.all, 'me'] as const,
+};
+
+interface UseCurrentUserOptions {
+  enabled?: boolean;
+}
+
+interface UseCurrentUserReturn {
+  user: IUser | undefined;
+  isLoading: boolean;
+  error: unknown;
+}
+
+export const useCurrentUser = (
+  { enabled = true }: UseCurrentUserOptions = {}
+): UseCurrentUserReturn => {
+  const dispatch = useAppDispatch();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: authKeys.me(),
+    queryFn: () => authService.getMe(),
+    enabled,
+    staleTime: 30 * 1000,
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (data) dispatch(setUser(data));
+  }, [data, dispatch]);
+
+  useEffect(() => {
+    if (!enabled || error) dispatch(setInitialized());
+  }, [enabled, error, dispatch]);
+
+  return { user: data, isLoading, error };
+};

package/template/server/package.json

@@ -30,7 +30,6 @@
     "seed": "tsx prisma/seed.ts"
   },
   "dependencies": {
-    "@fastify/compress": "^8.3.1",
     "@fastify/cookie": "^11.0.2",
     "@fastify/cors": "^11.2.0",
     "@fastify/helmet": "^13.0.2",

package/template/server/src/app.ts

@@ -4,7 +4,6 @@ import helmet from '@fastify/helmet';
 import rateLimit from '@fastify/rate-limit';
 import cookie from '@fastify/cookie';
 import jwt from '@fastify/jwt';
-import compress from '@fastify/compress';
 import multipart from '@fastify/multipart';
 import fastifyStatic from '@fastify/static';
 import path from 'path';
@@ -67,14 +66,9 @@ export async function buildApp() {
   // Enhanced security headers for production
   await app.register(helmet, {
     global: true,
+    crossOriginResourcePolicy: { policy: 'cross-origin' },
   });
 
-  // Response compression (gzip/brotli) for performance
-  await app.register(compress, {
-    global: true,
-    threshold: 1024, // Only compress responses > 1KB
-    encodings: ['gzip', 'deflate'],
-  });
 
   // Rate limiting: Redis-backed when available, in-memory fallback
   if (RATE_LIMIT_ENABLED) {

package/template/server/src/config/rate-limit.config.ts

@@ -27,6 +27,7 @@ const MULTIPLIER = env.RATE_LIMIT_MULTIPLIER;
  * Ensures minimum of 1 if rate limiting is enabled.
  */
 function applyMultiplier(max: number): number {
+  if (!RATE_LIMIT_ENABLED) return 1_000_000;
   return Math.max(1, Math.round(max * MULTIPLIER));
 }
 

package/template/server/src/libs/auth.ts

@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { env } from '@config/env.js';
 import { prisma } from '@libs/prisma.js';
 import { UnauthorizedError, ForbiddenError, BadRequestError } from '@shared/errors/errors.js';
+import { clearAuthCookies } from '@libs/cookies.js';
 import type { JwtPayload, UserRole } from '@shared/types/index.js';
 
 let app: FastifyInstance | null = null;
@@ -52,7 +53,7 @@ export function getRefreshTokenExpiresAt(): Date {
 
 export async function authenticate(
   request: FastifyRequest,
-  _reply: FastifyReply,
+  reply: FastifyReply,
 ): Promise<void> {
   try {
     await request.jwtVerify();
@@ -60,16 +61,22 @@ export async function authenticate(
     throw new UnauthorizedError('Invalid or expired token');
   }
 
-  // Verify user still exists, is active, and not soft-deleted
+  // Verify user still exists, is active, and not soft-deleted.
+  // When the session is definitively dead (user gone/deleted/inactive), clear auth
+  // cookies on the response so the browser stops replaying stale credentials.
+  // Without this, middleware keeps seeing the (still-unexpired) JWT cookie and
+  // bounces /login → /dashboard → 401 → /login in an infinite loop.
   const user = await prisma.user.findUnique({
     where: { id: request.user.userId },
     select: { isActive: true, deletedAt: true },
   });
 
   if (!user || user.deletedAt) {
+    clearAuthCookies(reply);
     throw new UnauthorizedError('Account is deactivated or deleted');
   }
   if (!user.isActive) {
+    clearAuthCookies(reply);
     throw new ForbiddenError('Account is not activated. Please verify your account.', 'ACCOUNT_NOT_ACTIVE');
   }
 }

package/template/server/src/modules/auth/auth.controller.ts

@@ -1,6 +1,6 @@
 import type { FastifyRequest, FastifyReply } from 'fastify';
 import { successResponse } from '@shared/responses/successResponse.js';
-import { UnauthorizedError } from '@shared/errors/errors.js';
+import { UnauthorizedError, ForbiddenError } from '@shared/errors/errors.js';
 import { setAuthCookies, clearAuthCookies } from '@libs/cookies.js';
 import type {
   RegisterInput,
@@ -49,13 +49,24 @@ export async function refresh(
 ): Promise<void> {
   const refreshToken = request.cookies.refresh_token;
   if (!refreshToken) {
+    clearAuthCookies(reply);
     throw new UnauthorizedError('Refresh token not provided', 'MISSING_REFRESH_TOKEN');
   }
 
-  const tokens = await authService.refresh(refreshToken);
-
-  setAuthCookies(reply, tokens.accessToken, tokens.refreshToken);
-  reply.send(successResponse('Token refreshed successfully', null));
+  try {
+    const tokens = await authService.refresh(refreshToken);
+    setAuthCookies(reply, tokens.accessToken, tokens.refreshToken);
+    reply.send(successResponse('Token refreshed successfully', null));
+  } catch (error) {
+    // Session is definitively dead (refresh token revoked, user gone, inactive).
+    // Clear all auth cookies so the browser stops replaying them — otherwise the
+    // client keeps retrying refresh and middleware keeps redirecting, producing
+    // an infinite loop that trips the rate limiter.
+    if (error instanceof UnauthorizedError || error instanceof ForbiddenError) {
+      clearAuthCookies(reply);
+    }
+    throw error;
+  }
 }
 
 export async function logout(