create-tigra 1.1.0 → 2.0.1

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

@@ -0,0 +1,84 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { toast } from 'sonner';
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { getErrorMessage } from '@/lib/utils/error';
+import { ROUTES } from '@/lib/constants/routes';
+import { authService } from '../services/auth.service';
+import { setUser, setLoggingOut, logout as logoutAction } from '../store/authSlice';
+
+import type { ILoginRequest, IRegisterRequest, IUser } from '../types/auth.types';
+
+interface UseAuthReturn {
+  user: IUser | null;
+  isAuthenticated: boolean;
+  isInitializing: boolean;
+  login: (data: ILoginRequest) => void;
+  register: (data: IRegisterRequest) => void;
+  logout: () => Promise<void>;
+  isLoggingIn: boolean;
+  isRegistering: boolean;
+  isLoggingOut: boolean;
+}
+
+export const useAuth = (): UseAuthReturn => {
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { user, isAuthenticated, isInitializing, isLoggingOut } = useAppSelector((state) => state.auth);
+
+  const loginMutation = useMutation({
+    mutationFn: (data: ILoginRequest) => authService.login(data),
+    onSuccess: (data) => {
+      dispatch(setUser(data.user));
+      toast.success('Signed in successfully');
+      const from = searchParams.get('from');
+      const redirectTo = from && from.startsWith('/') && !from.startsWith('//') ? from : '/';
+      router.push(redirectTo);
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error));
+    },
+  });
+
+  const registerMutation = useMutation({
+    mutationFn: (data: IRegisterRequest) => authService.register(data),
+    onSuccess: (data) => {
+      dispatch(setUser(data.user));
+      toast.success('Account created successfully');
+      router.push(ROUTES.HOME);
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error));
+    },
+  });
+
+  const logout = useCallback(async (): Promise<void> => {
+    dispatch(setLoggingOut(true));
+    try {
+      await authService.logout();
+    } catch {
+      // Proceed with local logout even if server call fails
+    } finally {
+      dispatch(logoutAction());
+      router.push(ROUTES.LOGIN);
+    }
+  }, [dispatch, router]);
+
+  return {
+    user,
+    isAuthenticated,
+    isInitializing,
+    login: loginMutation.mutate,
+    register: registerMutation.mutate,
+    logout,
+    isLoggingIn: loginMutation.isPending,
+    isRegistering: registerMutation.isPending,
+    isLoggingOut,
+  };
+};

package/template/client/src/features/auth/services/auth.service.ts

@@ -0,0 +1,52 @@
+import { apiClient } from '@/lib/api/axios.config';
+import { API_ENDPOINTS } from '@/lib/constants/api-endpoints';
+
+import type { ApiResponse } from '@/lib/api/api.types';
+import type { IUser, ILoginRequest, IRegisterRequest } from '../types/auth.types';
+
+interface AuthResponse {
+  user: IUser;
+}
+
+class AuthService {
+  async register(data: IRegisterRequest): Promise<AuthResponse> {
+    const response = await apiClient.post<ApiResponse<AuthResponse>>(
+      API_ENDPOINTS.AUTH.REGISTER,
+      data
+    );
+    return response.data.data;
+  }
+
+  async login(data: ILoginRequest): Promise<AuthResponse> {
+    const response = await apiClient.post<ApiResponse<AuthResponse>>(
+      API_ENDPOINTS.AUTH.LOGIN,
+      data
+    );
+    return response.data.data;
+  }
+
+  async logout(): Promise<void> {
+    await apiClient.post(API_ENDPOINTS.AUTH.LOGOUT);
+  }
+
+  async getMe(): Promise<IUser> {
+    const response = await apiClient.get<ApiResponse<IUser>>(
+      API_ENDPOINTS.AUTH.ME
+    );
+    return response.data.data;
+  }
+
+  async verifyEmail(token: string): Promise<void> {
+    await apiClient.post(API_ENDPOINTS.AUTH.VERIFY_EMAIL, { token });
+  }
+
+  async requestPasswordReset(email: string): Promise<void> {
+    await apiClient.post(API_ENDPOINTS.AUTH.REQUEST_PASSWORD_RESET, { email });
+  }
+
+  async resetPassword(token: string, newPassword: string): Promise<void> {
+    await apiClient.post(API_ENDPOINTS.AUTH.RESET_PASSWORD, { token, newPassword });
+  }
+}
+
+export const authService = new AuthService();

package/template/client/src/features/auth/store/authSlice.ts

@@ -0,0 +1,38 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import type { PayloadAction } from '@reduxjs/toolkit';
+import type { IAuthState, IUser } from '../types/auth.types';
+
+const initialState: IAuthState = {
+  user: null,
+  isAuthenticated: false,
+  isInitializing: true,
+  isLoggingOut: false,
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    setUser: (state, action: PayloadAction<IUser>) => {
+      state.user = action.payload;
+      state.isAuthenticated = true;
+      state.isInitializing = false;
+      state.isLoggingOut = false;
+    },
+    setInitialized: (state) => {
+      state.isInitializing = false;
+    },
+    setLoggingOut: (state, action: PayloadAction<boolean>) => {
+      state.isLoggingOut = action.payload;
+    },
+    logout: (state) => {
+      state.user = null;
+      state.isAuthenticated = false;
+      state.isLoggingOut = false;
+    },
+  },
+});
+
+export const { setUser, setInitialized, setLoggingOut, logout } = authSlice.actions;
+export default authSlice.reducer;

package/template/client/src/features/auth/types/auth.types.ts

@@ -0,0 +1,32 @@
+export interface IUser {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: UserRole;
+  isActive: boolean;
+  avatarUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type UserRole = 'USER' | 'ADMIN';
+
+export interface ILoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface IRegisterRequest {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+}
+
+export interface IAuthState {
+  user: IUser | null;
+  isAuthenticated: boolean;
+  isInitializing: boolean;
+  isLoggingOut: boolean;
+}

package/template/client/src/hooks/useDebounce.ts

@@ -0,0 +1,14 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export const useDebounce = <T,>(value: T, delay = 500): T => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+};

package/template/client/src/hooks/useLocalStorage.ts

@@ -0,0 +1,55 @@
+'use client';
+
+import { useCallback, useSyncExternalStore } from 'react';
+
+export const useLocalStorage = <T,>(key: string, initialValue: T): readonly [T, (value: T | ((val: T) => T)) => void] => {
+  const subscribe = useCallback(
+    (callback: () => void): (() => void) => {
+      const handler = (e: StorageEvent): void => {
+        if (e.key === key) callback();
+      };
+      window.addEventListener('storage', handler);
+      return () => window.removeEventListener('storage', handler);
+    },
+    [key],
+  );
+
+  const getSnapshot = useCallback((): string | null => {
+    return window.localStorage.getItem(key);
+  }, [key]);
+
+  const getServerSnapshot = useCallback((): string | null => {
+    return null;
+  }, []);
+
+  const rawValue = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  const storedValue: T = rawValue !== null
+    ? (() => {
+        try { return JSON.parse(rawValue) as T; }
+        catch { return initialValue; }
+      })()
+    : initialValue;
+
+  const setValue = useCallback(
+    (value: T | ((val: T) => T)): void => {
+      try {
+        const currentRaw = window.localStorage.getItem(key);
+        const current: T = currentRaw !== null
+          ? (JSON.parse(currentRaw) as T)
+          : initialValue;
+        const valueToStore = value instanceof Function ? value(current) : value;
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        // Dispatch a storage event so useSyncExternalStore picks up the change
+        window.dispatchEvent(new StorageEvent('storage', { key }));
+      } catch (error) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(`[useLocalStorage] Failed to write key "${key}":`, error);
+        }
+      }
+    },
+    [key, initialValue],
+  );
+
+  return [storedValue, setValue] as const;
+};

package/template/client/src/hooks/useMediaQuery.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useCallback, useSyncExternalStore } from 'react';
+
+export const useMediaQuery = (query: string): boolean => {
+  const subscribe = useCallback(
+    (callback: () => void): (() => void) => {
+      const media = window.matchMedia(query);
+      media.addEventListener('change', callback);
+      return () => media.removeEventListener('change', callback);
+    },
+    [query],
+  );
+
+  const getSnapshot = (): boolean => {
+    return window.matchMedia(query).matches;
+  };
+
+  const getServerSnapshot = (): boolean => {
+    return false;
+  };
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};
+
+export const useIsMobile = (): boolean => useMediaQuery('(max-width: 768px)');
+export const useIsTablet = (): boolean => useMediaQuery('(max-width: 1024px)');

package/template/client/src/lib/api/api.types.ts

@@ -0,0 +1,34 @@
+export interface ApiResponse<T> {
+  success: boolean;
+  message: string;
+  data: T;
+}
+
+export interface PaginatedApiResponse<T> {
+  success: boolean;
+  message: string;
+  data: {
+    items: T[];
+    pagination: {
+      page: number;
+      limit: number;
+      totalItems: number;
+      totalPages: number;
+      hasNextPage: boolean;
+      hasPreviousPage: boolean;
+    };
+  };
+}
+
+export interface ApiError {
+  success: false;
+  error: {
+    code: string;
+    message: string;
+  };
+}
+
+export interface PaginationParams {
+  page?: number;
+  limit?: number;
+}

package/template/client/src/lib/api/axios.config.ts

@@ -0,0 +1,98 @@
+import axios from 'axios';
+
+import type { InternalAxiosRequestConfig } from 'axios';
+
+import { API_ENDPOINTS } from '@/lib/constants/api-endpoints';
+import { ROUTES } from '@/lib/constants/routes';
+
+const apiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000/api/v1',
+  timeout: 30000,
+  withCredentials: true, // Send cookies with every request
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// No request interceptor needed — cookies are sent automatically
+
+let isRefreshing = false;
+let refreshTimestamp = 0;
+const REFRESH_TIMEOUT_MS = 15000;
+let failedQueue: { resolve: () => void; reject: (error: unknown) => void }[] = [];
+
+const processQueue = (error: unknown): void => {
+  failedQueue.forEach((promise) => {
+    if (error) {
+      promise.reject(error);
+    } else {
+      promise.resolve();
+    }
+  });
+  failedQueue = [];
+};
+
+const resetRefreshState = (): void => {
+  isRefreshing = false;
+  refreshTimestamp = 0;
+};
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
+
+    if (error.response?.status !== 401 || originalRequest._retry) {
+      return Promise.reject(error);
+    }
+
+    // Don't retry refresh endpoint itself
+    if (originalRequest.url === API_ENDPOINTS.AUTH.REFRESH) {
+      return Promise.reject(error);
+    }
+
+    // If a refresh is in progress but has exceeded the timeout, reset the stale flag
+    if (isRefreshing && Date.now() - refreshTimestamp > REFRESH_TIMEOUT_MS) {
+      processQueue(new Error('Token refresh timed out'));
+      resetRefreshState();
+    }
+
+    if (isRefreshing) {
+      return new Promise<void>((resolve, reject) => {
+        failedQueue.push({ resolve, reject });
+      }).then(() => {
+        return apiClient(originalRequest);
+      });
+    }
+
+    originalRequest._retry = true;
+    isRefreshing = true;
+    refreshTimestamp = Date.now();
+
+    try {
+      // Refresh — cookie is sent automatically
+      await apiClient.post(API_ENDPOINTS.AUTH.REFRESH);
+
+      processQueue(null);
+
+      // Retry original request — new cookie is set automatically
+      return apiClient(originalRequest);
+    } catch (refreshError) {
+      processQueue(refreshError);
+
+      const { logout } = await import('@/features/auth/store/authSlice');
+      const { store } = await import('@/store');
+      store.dispatch(logout());
+
+      if (typeof window !== 'undefined') {
+        window.location.href = ROUTES.LOGIN;
+      }
+
+      return Promise.reject(refreshError);
+    } finally {
+      resetRefreshState();
+    }
+  }
+);
+
+export { apiClient };

package/template/client/src/lib/constants/api-endpoints.ts

@@ -0,0 +1,18 @@
+export const API_ENDPOINTS = {
+  AUTH: {
+    REGISTER: '/auth/register',
+    LOGIN: '/auth/login',
+    LOGOUT: '/auth/logout',
+    REFRESH: '/auth/refresh',
+    ME: '/auth/me',
+    VERIFY_EMAIL: '/auth/verify-email',
+    RESEND_VERIFICATION: '/auth/resend-verification',
+    REQUEST_PASSWORD_RESET: '/auth/request-password-reset',
+    RESET_PASSWORD: '/auth/reset-password',
+  },
+  USERS: {
+    ME: '/users/me',
+    UPDATE_ME: '/users/me',
+    DELETE_ME: '/users/me',
+  },
+} as const;

package/template/client/src/lib/constants/app.constants.ts

@@ -0,0 +1,12 @@
+export const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME || 'My App';
+
+export const PAGINATION = {
+  DEFAULT_PAGE: 1,
+  DEFAULT_LIMIT: 10,
+  MAX_LIMIT: 100,
+} as const;
+
+export const USER_ROLES = {
+  USER: 'USER',
+  ADMIN: 'ADMIN',
+} as const;

package/template/client/src/lib/constants/routes.ts

@@ -0,0 +1,9 @@
+export const ROUTES = {
+  HOME: '/',
+  LOGIN: '/login',
+  REGISTER: '/register',
+  VERIFY_EMAIL: '/verify-email',
+  RESET_PASSWORD: '/reset-password',
+  DASHBOARD: '/dashboard',
+  PROFILE: '/profile',
+} as const;

package/template/client/src/lib/utils/error.ts

@@ -0,0 +1,32 @@
+import axios from 'axios';
+
+import type { ApiError } from '@/lib/api/api.types';
+
+export const getErrorMessage = (error: unknown): string => {
+  if (axios.isAxiosError(error)) {
+    const apiError = error.response?.data as ApiError;
+    if (apiError?.error?.message) {
+      return apiError.error.message;
+    }
+    if (error.code === 'ERR_NETWORK') {
+      return 'Network error. Check your connection.';
+    }
+    return error.message;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return 'An unexpected error occurred';
+};
+
+export const getErrorCode = (error: unknown): string | undefined => {
+  if (axios.isAxiosError(error)) {
+    const data = error.response?.data as ApiError | undefined;
+    return data?.error?.code;
+  }
+  return undefined;
+};
+
+export const isErrorCode = (error: unknown, code: string): boolean => {
+  return getErrorCode(error) === code;
+};

package/template/client/src/lib/utils/format.ts

@@ -0,0 +1,37 @@
+export const formatDate = (date: string | Date): string => {
+  const parsed = new Date(date);
+  if (isNaN(parsed.getTime())) return 'Invalid date';
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(parsed);
+};
+
+export const formatRelativeTime = (date: string | Date): string => {
+  const then = new Date(date);
+  if (isNaN(then.getTime())) return 'Invalid date';
+
+  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+  const now = new Date();
+  const diffInSeconds = (then.getTime() - now.getTime()) / 1000;
+
+  const units: { unit: Intl.RelativeTimeFormatUnit; seconds: number }[] = [
+    { unit: 'year', seconds: 31536000 },
+    { unit: 'month', seconds: 2592000 },
+    { unit: 'day', seconds: 86400 },
+    { unit: 'hour', seconds: 3600 },
+    { unit: 'minute', seconds: 60 },
+  ];
+
+  for (const { unit, seconds } of units) {
+    if (Math.abs(diffInSeconds) >= seconds) {
+      return rtf.format(Math.round(diffInSeconds / seconds), unit);
+    }
+  }
+  return rtf.format(Math.round(diffInSeconds), 'second');
+};
+
+export const truncate = (str: string, length: number): string => {
+  return str.length > length ? `${str.substring(0, length)}...` : str;
+};

package/template/client/src/lib/utils/security.ts

@@ -0,0 +1,34 @@
+export const isSafeUrl = (url: string): boolean => {
+  try {
+    const parsed = new URL(url);
+    return ['http:', 'https:', 'mailto:'].includes(parsed.protocol);
+  } catch {
+    return false;
+  }
+};
+
+export const sanitizeString = (input: string): string => {
+  return input
+    .trim()
+    .replace(/[<>&"']/g, (char) => {
+      const entities: Record<string, string> = {
+        '<': '&lt;',
+        '>': '&gt;',
+        '&': '&amp;',
+        '"': '&quot;',
+        "'": '&#39;',
+      };
+      return entities[char] ?? char;
+    })
+    .slice(0, 1000);
+};
+
+export const sanitizeEmail = (email: string): string => {
+  return email.toLowerCase().trim().slice(0, 255);
+};
+
+export const maskEmail = (email: string): string => {
+  const [local, domain] = email.split('@');
+  if (!local || !domain) return email;
+  return `${local[0]}***${local[local.length - 1]}@${domain}`;
+};

package/template/client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/template/client/src/middleware.ts

@@ -0,0 +1,57 @@
+import { NextResponse } from 'next/server';
+
+import type { NextRequest } from 'next/server';
+
+const protectedPaths = ['/', '/dashboard', '/profile', '/admin'];
+const authPaths = ['/login', '/register'];
+
+function isTokenExpired(token: string): boolean {
+  try {
+    const [, payload] = token.split('.');
+    const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
+    return !decoded.exp || decoded.exp * 1000 < Date.now();
+  } catch {
+    return true;
+  }
+}
+
+export function middleware(request: NextRequest): NextResponse {
+  const { pathname } = request.nextUrl;
+  const token = request.cookies.get('access_token')?.value;
+
+  const isProtectedPath = protectedPaths.some((path) =>
+    path === '/' ? pathname === '/' : pathname.startsWith(path)
+  );
+
+  if (isProtectedPath && (!token || isTokenExpired(token))) {
+    const loginUrl = new URL('/login', request.url);
+    loginUrl.searchParams.set('from', pathname);
+    return NextResponse.redirect(loginUrl);
+  }
+
+  const isAuthPath = authPaths.some((path) => pathname.startsWith(path));
+
+  if (isAuthPath && token) {
+    if (isTokenExpired(token)) {
+      // Only delete the expired access token — keep the refresh token
+      // so the client-side interceptor can still recover the session
+      const response = NextResponse.next();
+      response.cookies.delete('access_token');
+      return response;
+    }
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    '/',
+    '/dashboard/:path*',
+    '/profile/:path*',
+    '/admin/:path*',
+    '/login',
+    '/register',
+  ],
+};

package/template/client/src/store/hooks.ts

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from 'react-redux';
+
+import type { TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './index';
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/template/client/src/store/index.ts

@@ -0,0 +1,12 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import authReducer from '@/features/auth/store/authSlice';
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/template/client/src/types/index.ts

@@ -0,0 +1,3 @@
+export type Nullable<T> = T | null;
+export type Optional<T> = T | undefined;
+export type AsyncResult<T> = Promise<T>;