create-tigra 2.7.1 → 2.8.0

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

@@ -1,8 +1,10 @@
 'use client';
 
 import type React from 'react';
+import { Suspense } from 'react';
 
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -22,8 +24,11 @@ const loginSchema = z.object({
 
 type LoginFormData = z.infer<typeof loginSchema>;
 
-export const LoginForm = (): React.ReactElement => {
+const LoginFormInner = (): React.ReactElement => {
   const { login, isLoggingIn } = useAuth();
+  const searchParams = useSearchParams();
+  const from = searchParams.get('from');
+  const redirectTo = from && from.startsWith('/') && !from.startsWith('//') ? from : undefined;
 
   const {
     register,
@@ -34,7 +39,7 @@ export const LoginForm = (): React.ReactElement => {
   });
 
   const onSubmit = (data: LoginFormData): void => {
-    login(data);
+    login(data, redirectTo);
   };
 
   return (
@@ -105,3 +110,11 @@ export const LoginForm = (): React.ReactElement => {
     </div>
   );
 };
+
+export const LoginForm = (): React.ReactElement => {
+  return (
+    <Suspense>
+      <LoginFormInner />
+    </Suspense>
+  );
+};

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
-import { useMutation } from '@tanstack/react-query';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
@@ -18,7 +18,7 @@ interface UseAuthReturn {
   user: IUser | null;
   isAuthenticated: boolean;
   isInitializing: boolean;
-  login: (data: ILoginRequest) => void;
+  login: (data: ILoginRequest, redirectTo?: string) => void;
   register: (data: IRegisterRequest) => void;
   logout: () => Promise<void>;
   isLoggingIn: boolean;
@@ -29,17 +29,17 @@ interface UseAuthReturn {
 export const useAuth = (): UseAuthReturn => {
   const dispatch = useAppDispatch();
   const router = useRouter();
-  const searchParams = useSearchParams();
+  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');
-      const from = searchParams.get('from');
-      const redirectTo = from && from.startsWith('/') && !from.startsWith('//') ? from : ROUTES.DASHBOARD;
-      router.push(redirectTo);
+      router.push(pendingRedirectRef.current);
     },
     onError: (error) => {
       if (isErrorCode(error, ERROR_CODES.ACCOUNT_NOT_ACTIVE)) {
@@ -58,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);
@@ -74,16 +75,22 @@ 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,
     isAuthenticated,
     isInitializing,
-    login: loginMutation.mutate,
+    login: (data: ILoginRequest, redirectTo?: string) => {
+      if (redirectTo) {
+        pendingRedirectRef.current = redirectTo;
+      }
+      loginMutation.mutate(data);
+    },
     register: registerMutation.mutate,
     logout,
     isLoggingIn: loginMutation.isPending,

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/client/src/styles/themes/default.css

@@ -1,92 +1,92 @@
-/*
- * Default Theme — Claude-inspired warm palette
- * Accent: Terracotta orange
- * Vibe: Earthy, warm, approachable
- *
- * This is the single theme file. Colors use HEX values.
- * Light mode: :root selectors. Dark mode: .dark selectors.
- * To customize: edit the HEX values below.
- */
-
-:root {
-  --radius: 0.625rem;
-  /* Warm cream background with terracotta orange accent */
-  --background: #f4f3ee;
-  --foreground: #1a170f;
-  --card: #ffffff;
-  --card-foreground: #1a170f;
-  --popover: #ffffff;
-  --popover-foreground: #1a170f;
-  --primary: #c15f3c;
-  --primary-foreground: #ffffff;
-  --secondary: #ebeae3;
-  --secondary-foreground: #302e25;
-  --muted: #ebeae3;
-  --muted-foreground: #b1ada1;
-  --accent: #ebeae3;
-  --accent-foreground: #302e25;
-  --destructive: #e7000b;
-  --border: #deddd4;
-  --input: #deddd4;
-  --ring: #c15f3c;
-  --success: #008339;
-  --success-foreground: #ffffff;
-  --warning: #e99b2a;
-  --warning-foreground: #242119;
-  --info: #0079bf;
-  --info-foreground: #ffffff;
-  --chart-1: #c15f3c;
-  --chart-2: #009689;
-  --chart-3: #104e64;
-  --chart-4: #ebc065;
-  --chart-5: #b1ada1;
-  --sidebar: #f0efe9;
-  --sidebar-foreground: #1a170f;
-  --sidebar-primary: #302e25;
-  --sidebar-primary-foreground: #f4f3ee;
-  --sidebar-accent: #ebeae3;
-  --sidebar-accent-foreground: #302e25;
-  --sidebar-border: #deddd4;
-  --sidebar-ring: #c15f3c;
-}
-
-.dark {
-  /* Dark mode: inverted with same warm undertone */
-  --background: #15130d;
-  --foreground: #e9e8e3;
-  --card: #201e18;
-  --card-foreground: #e9e8e3;
-  --popover: #201e18;
-  --popover-foreground: #e9e8e3;
-  --primary: #d6724f;
-  --primary-foreground: #15130d;
-  --secondary: #2b2922;
-  --secondary-foreground: #e9e8e3;
-  --muted: #2b2922;
-  --muted-foreground: #928f85;
-  --accent: #2b2922;
-  --accent-foreground: #e9e8e3;
-  --destructive: #ff6467;
-  --border: rgba(255, 255, 250, 0.12);
-  --input: rgba(255, 255, 250, 0.15);
-  --ring: #d6724f;
-  --success: #009c50;
-  --success-foreground: #ffffff;
-  --warning: #faab3f;
-  --warning-foreground: #242119;
-  --info: #0099e0;
-  --info-foreground: #ffffff;
-  --chart-1: #d6724f;
-  --chart-2: #00bc7d;
-  --chart-3: #e5a658;
-  --chart-4: #a066df;
-  --chart-5: #e25969;
-  --sidebar: #201e18;
-  --sidebar-foreground: #e9e8e3;
-  --sidebar-primary: #d6724f;
-  --sidebar-primary-foreground: #e9e8e3;
-  --sidebar-accent: #2b2922;
-  --sidebar-accent-foreground: #e9e8e3;
-  --sidebar-border: rgba(255, 255, 250, 0.12);
-  --sidebar-ring: #d6724f;
-}
+/*
+ * Default Theme — Claude-inspired warm palette
+ * Accent: Terracotta orange
+ * Vibe: Earthy, warm, approachable
+ *
+ * This is the single theme file. Colors use HEX values.
+ * Light mode: :root selectors. Dark mode: .dark selectors.
+ * To customize: edit the HEX values below.
+ */
+
+:root {
+  --radius: 0.625rem;
+  /* Warm cream background with terracotta orange accent */
+  --background: #f4f3ee;
+  --foreground: #1a170f;
+  --card: #ffffff;
+  --card-foreground: #1a170f;
+  --popover: #ffffff;
+  --popover-foreground: #1a170f;
+  --primary: #c15f3c;
+  --primary-foreground: #ffffff;
+  --secondary: #ebeae3;
+  --secondary-foreground: #302e25;
+  --muted: #ebeae3;
+  --muted-foreground: #b1ada1;
+  --accent: #ebeae3;
+  --accent-foreground: #302e25;
+  --destructive: #e7000b;
+  --border: #deddd4;
+  --input: #deddd4;
+  --ring: #c15f3c;
+  --success: #008339;
+  --success-foreground: #ffffff;
+  --warning: #e99b2a;
+  --warning-foreground: #242119;
+  --info: #0079bf;
+  --info-foreground: #ffffff;
+  --chart-1: #c15f3c;
+  --chart-2: #009689;
+  --chart-3: #104e64;
+  --chart-4: #ebc065;
+  --chart-5: #b1ada1;
+  --sidebar: #f0efe9;
+  --sidebar-foreground: #1a170f;
+  --sidebar-primary: #302e25;
+  --sidebar-primary-foreground: #f4f3ee;
+  --sidebar-accent: #ebeae3;
+  --sidebar-accent-foreground: #302e25;
+  --sidebar-border: #deddd4;
+  --sidebar-ring: #c15f3c;
+}
+
+.dark {
+  /* Dark mode: inverted with same warm undertone */
+  --background: #15130d;
+  --foreground: #e9e8e3;
+  --card: #201e18;
+  --card-foreground: #e9e8e3;
+  --popover: #201e18;
+  --popover-foreground: #e9e8e3;
+  --primary: #d6724f;
+  --primary-foreground: #15130d;
+  --secondary: #2b2922;
+  --secondary-foreground: #e9e8e3;
+  --muted: #2b2922;
+  --muted-foreground: #928f85;
+  --accent: #2b2922;
+  --accent-foreground: #e9e8e3;
+  --destructive: #ff6467;
+  --border: rgba(255, 255, 250, 0.12);
+  --input: rgba(255, 255, 250, 0.15);
+  --ring: #d6724f;
+  --success: #009c50;
+  --success-foreground: #ffffff;
+  --warning: #faab3f;
+  --warning-foreground: #242119;
+  --info: #0099e0;
+  --info-foreground: #ffffff;
+  --chart-1: #d6724f;
+  --chart-2: #00bc7d;
+  --chart-3: #e5a658;
+  --chart-4: #a066df;
+  --chart-5: #e25969;
+  --sidebar: #201e18;
+  --sidebar-foreground: #e9e8e3;
+  --sidebar-primary: #d6724f;
+  --sidebar-primary-foreground: #e9e8e3;
+  --sidebar-accent: #2b2922;
+  --sidebar-accent-foreground: #e9e8e3;
+  --sidebar-border: rgba(255, 255, 250, 0.12);
+  --sidebar-ring: #d6724f;
+}

package/template/server/.env.example

@@ -93,10 +93,16 @@ MAX_FILE_SIZE_MB=10
 # Without this, all uploaded files are lost on every redeployment.
 
 # ===================================================================
-# DOCKER PORTS (auto-generated, unique per project)
+# DOCKER PORTS — LOCAL DEVELOPMENT ONLY
 # ===================================================================
+#
+# These ports are used by docker-compose to expose MySQL, Redis, and
+# their admin UIs on your local machine. They are NOT needed in
+# production — production connects via DATABASE_URL and REDIS_URL
+# (typically over a private network), not through exposed ports.
+#
+# Change these if they conflict with other services on your machine.
 
-# Change these if they conflict with other services on your machine
 MYSQL_PORT={{MYSQL_PORT}}
 PHPMYADMIN_PORT={{PHPMYADMIN_PORT}}
 REDIS_PORT={{REDIS_PORT}}

package/template/server/package.json

@@ -19,6 +19,7 @@
     "prisma:seed": "prisma db seed",
     "prisma:studio": "prisma studio",
     "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
     "redis:flush": "tsx scripts/flush-redis.ts",
     "docker:up": "docker compose up -d",
     "docker:down": "docker compose down",
@@ -29,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';
@@ -61,19 +60,15 @@ export async function buildApp() {
   await app.register(cors, {
     origin: corsOrigin,
     credentials: true,
+    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
   });
 
   // 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(