@thinhnguyencth1204/nextcli 0.1.0

package/templates/next-base/src/features/auth/components/sign-in-form.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import type { FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { publicApi } from "@/lib/axios-instance";
+import { setAccessToken } from "@/lib/token-store";
+import { signInSchema } from "@/features/auth/validations";
+import type { ApiSuccess } from "@/types";
+
+export function SignInForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const parsed = signInSchema.safeParse({ email, password });
+    if (!parsed.success) {
+      toast.error("Please provide a valid email and password.");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const response = await publicApi.post("/api/v1/auth/login", parsed.data, {
+        withCredentials: true,
+      });
+      const accessToken = (response.data as ApiSuccess<{ accessToken: string }>).data?.accessToken;
+      if (!accessToken) {
+        toast.error("Access token is missing.");
+        return;
+      }
+
+      setAccessToken(accessToken);
+      toast.success("Signed in successfully.");
+      router.push("/account");
+      router.refresh();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Sign in failed.";
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit} style={{ display: "grid", gap: 12, maxWidth: 360 }}>
+      <label style={{ display: "grid", gap: 4 }}>
+        <span>Email</span>
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder="you@example.com"
+          required
+        />
+      </label>
+      <label style={{ display: "grid", gap: 4 }}>
+        <span>Password</span>
+        <input
+          type="password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          placeholder="********"
+          required
+        />
+      </label>
+      <button type="submit" disabled={isSubmitting}>
+        {isSubmitting ? "Signing in..." : "Sign in"}
+      </button>
+    </form>
+  );
+}

package/templates/next-base/src/features/auth/validations.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const signInSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+export type SignInInput = z.infer<typeof signInSchema>;

package/templates/next-base/src/hooks/index.ts

@@ -0,0 +1 @@
+export {};

package/templates/next-base/src/i18n/request.ts

@@ -0,0 +1,8 @@
+import { getRequestConfig } from "next-intl/server";
+
+export default getRequestConfig(async () => {
+  return {
+    locale: "en",
+    messages: {},
+  };
+});

package/templates/next-base/src/lib/api-response.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from "next/server";
+import type { ApiErrorResponse, ApiMeta, ApiSuccess, ErrorCode } from "@/types";
+
+type SuccessInit = {
+  status?: number;
+  requestId?: string;
+  meta?: Omit<ApiMeta, "timestamp" | "requestId">;
+};
+
+type FailInit = {
+  status?: number;
+  requestId?: string;
+  details?: unknown;
+};
+
+function createTimestamp(): string {
+  return new Date().toISOString();
+}
+
+export function ok<T>(data: T, init: SuccessInit = {}) {
+  const payload: ApiSuccess<T> = {
+    success: true,
+    data,
+    meta: {
+      timestamp: createTimestamp(),
+      requestId: init.requestId,
+      ...init.meta,
+    },
+  };
+  return NextResponse.json(payload, { status: init.status ?? 200 });
+}
+
+export function fail(
+  code: ErrorCode,
+  message: string,
+  init: FailInit = {},
+) {
+  const payload: ApiErrorResponse = {
+    success: false,
+    error: {
+      code,
+      message,
+      details: init.details,
+    },
+    timestamp: createTimestamp(),
+    requestId: init.requestId,
+  };
+  return NextResponse.json(payload, { status: init.status ?? 500 });
+}

package/templates/next-base/src/lib/auth-client.ts

@@ -0,0 +1,7 @@
+import { createAuthClient } from "better-auth/react";
+import { jwtClient } from "better-auth/client/plugins";
+
+export const authClient = createAuthClient({
+  baseURL: process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000",
+  plugins: [jwtClient()],
+});

package/templates/next-base/src/lib/auth-cookies.ts

@@ -0,0 +1,15 @@
+const refreshCookieName = "nextcli_refresh_token";
+
+export function refreshCookieOptions() {
+  return {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    path: "/",
+    maxAge: 60 * 60 * 24 * 30,
+  } as const;
+}
+
+export function getRefreshCookieName(): string {
+  return refreshCookieName;
+}

package/templates/next-base/src/lib/auth.ts

@@ -0,0 +1,20 @@
+import { betterAuth } from "better-auth/minimal";
+import { prismaAdapter } from "better-auth/adapters/prisma";
+import { jwt } from "better-auth/plugins";
+import prisma from "@/lib/prisma";
+
+const socialProviders = {
+  // AUTO_GENERATED_AUTH_PROVIDERS_START
+  // AUTO_GENERATED_AUTH_PROVIDERS_END
+};
+
+export const auth = betterAuth({
+  database: prismaAdapter(prisma, {
+    provider: "postgresql",
+  }),
+  plugins: [jwt()],
+  emailAndPassword: {
+    enabled: true,
+  },
+  socialProviders,
+});

package/templates/next-base/src/lib/axios-instance.ts

@@ -0,0 +1,140 @@
+import axios from "axios";
+import { clearAccessToken, getAccessToken, setAccessToken } from "@/lib/token-store";
+import type { ApiErrorResponse, ApiSuccess } from "@/types";
+
+const baseURL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
+
+type RetryableRequestConfig = {
+  _retry?: boolean;
+};
+
+export const publicApi = axios.create({
+  baseURL,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export const protectedApi = axios.create({
+  baseURL,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+protectedApi.interceptors.request.use((config) => {
+  const token = getAccessToken();
+  if (token) {
+    config.headers = config.headers ?? {};
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+let isRefreshing = false;
+let waitingQueue: Array<(token: string | null) => void> = [];
+
+function flushQueue(token: string | null): void {
+  for (const resolve of waitingQueue) {
+    resolve(token);
+  }
+  waitingQueue = [];
+}
+
+async function refreshAccessToken(): Promise<string | null> {
+  try {
+    const response = await publicApi.post("/api/v1/auth/refresh", null, {
+      withCredentials: true,
+    });
+    const token = (response.data as ApiSuccess<{ accessToken: string }>).data?.accessToken;
+    if (!token) {
+      clearAccessToken();
+      return null;
+    }
+    setAccessToken(token);
+    return token;
+  } catch {
+    clearAccessToken();
+    return null;
+  }
+}
+
+protectedApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const config = error.config as typeof error.config & RetryableRequestConfig;
+    if (!config || config._retry || error.response?.status !== 401) {
+      return Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      return new Promise((resolve, reject) => {
+        waitingQueue.push((token) => {
+          if (!token) {
+            reject(error);
+            return;
+          }
+
+          config.headers = config.headers ?? {};
+          config.headers.Authorization = `Bearer ${token}`;
+          resolve(protectedApi(config));
+        });
+      });
+    }
+
+    config._retry = true;
+    isRefreshing = true;
+
+    try {
+      const token = await refreshAccessToken();
+      flushQueue(token);
+      if (!token) {
+        return Promise.reject(error);
+      }
+
+      config.headers = config.headers ?? {};
+      config.headers.Authorization = `Bearer ${token}`;
+      return protectedApi(config);
+    } finally {
+      isRefreshing = false;
+    }
+  },
+);
+
+function extractApiErrorMessage(error: unknown): string {
+  if (!axios.isAxiosError(error)) {
+    return "Unexpected error occurred.";
+  }
+
+  const payload = error.response?.data as ApiErrorResponse | undefined;
+  if (payload && payload.success === false) {
+    return payload.error.message;
+  }
+
+  return error.message || "Request failed.";
+}
+
+publicApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (axios.isAxiosError(error)) {
+      error.message = extractApiErrorMessage(error);
+    }
+    return Promise.reject(error);
+  },
+);
+
+protectedApi.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (axios.isAxiosError(error)) {
+      error.message = extractApiErrorMessage(error);
+    }
+    return Promise.reject(error);
+  },
+);
+
+export const api = publicApi;
+export { extractApiErrorMessage };

package/templates/next-base/src/lib/prisma.ts

@@ -0,0 +1,13 @@
+import { PrismaClient } from "@prisma/client";
+
+declare global {
+  var prisma: PrismaClient | undefined;
+}
+
+const prisma = global.prisma ?? new PrismaClient();
+
+if (process.env.NODE_ENV !== "production") {
+  global.prisma = prisma;
+}
+
+export default prisma;

package/templates/next-base/src/lib/token-store.ts

@@ -0,0 +1,13 @@
+let accessToken: string | null = null;
+
+export function getAccessToken(): string | null {
+  return accessToken;
+}
+
+export function setAccessToken(token: string | null): void {
+  accessToken = token;
+}
+
+export function clearAccessToken(): void {
+  accessToken = null;
+}

package/templates/next-base/src/types/index.ts

@@ -0,0 +1,40 @@
+export type ErrorCode =
+  | "BAD_REQUEST"
+  | "UNAUTHORIZED"
+  | "FORBIDDEN"
+  | "NOT_FOUND"
+  | "CONFLICT"
+  | "VALIDATION_ERROR"
+  | "INTERNAL_ERROR"
+  | "UPSTREAM_ERROR";
+
+export type ApiMeta = {
+  timestamp: string;
+  requestId?: string;
+  pagination?: {
+    page: number;
+    pageSize: number;
+    total: number;
+  };
+};
+
+export type ApiSuccess<T> = {
+  success: true;
+  data: T;
+  meta: ApiMeta;
+};
+
+export type ApiErrorShape = {
+  code: ErrorCode;
+  message: string;
+  details?: unknown;
+};
+
+export type ApiErrorResponse = {
+  success: false;
+  error: ApiErrorShape;
+  timestamp: string;
+  requestId?: string;
+};
+
+export type ApiResponse<T> = ApiSuccess<T> | ApiErrorResponse;

package/templates/next-base/src/utils/cn.ts

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

package/templates/next-base/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "types": ["node", "react", "react-dom"],
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}