@thinhnguyencth1204/nextcli 0.8.0 → 1.0.0

package/templates/features/api/src/lib/api/axios.ts

@@ -1,17 +1,8 @@
 import axios from "axios";
-import {
-  clearAccessToken,
-  getAccessToken,
-  setAccessToken,
-} from "@/lib/api/token-store";
-import type { ApiErrorResponse, ApiSuccess } from "@/types";
+import type { ApiErrorResponse } 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,
@@ -28,86 +19,6 @@ export const protectedApi = axios.create({
   },
 });
 
-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.";

package/templates/features/auth/messages/vi/auth.json

@@ -11,7 +11,6 @@
     "submit": "Đăng nhập",
     "submitting": "Đang đăng nhập...",
     "invalidInput": "Vui lòng nhập tên đăng nhập và mật khẩu hợp lệ.",
-    "missingAccessToken": "Không tìm thấy access token.",
     "success": "Đăng nhập thành công.",
     "failed": "Đăng nhập thất bại."
   },
@@ -30,6 +29,8 @@
   },
   "account": {
     "title": "Tài khoản",
+    "description": "Xem thông tin phiên đăng nhập hiện tại.",
+    "panelTitle": "Thông tin tài khoản",
     "loading": "Đang tải thông tin tài khoản...",
     "noSession": "Chưa có phiên đăng nhập hoạt động.",
     "userId": "Mã người dùng",

package/templates/features/auth/src/app/(auth)/change-password/page.tsx

@@ -5,10 +5,11 @@ export default function ChangePasswordPage() {
   const t = useTranslations("auth.changePasswordPage");
 
   return (
-    <main className="space-y-3">
-      <h1 className="text-2xl font-semibold">{t("title")}</h1>
-      <p className="text-sm text-muted-foreground">{t("description")}</p>
+    <div className="space-y-6">
+      <div className="text-center sm:text-left">
+        <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
+      </div>
       <ChangePasswordForm />
-    </main>
+    </div>
   );
 }

package/templates/features/auth/src/app/(auth)/layout.tsx

@@ -1,9 +1,6 @@
 import type { ReactNode } from "react";
+import { AuthShell } from "@/components/layout/auth/auth-shell";
 
 export default function AuthRouteLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <div className="w-full max-w-md">{children}</div>
-    </div>
-  );
+  return <AuthShell>{children}</AuthShell>;
 }

package/templates/features/auth/src/app/(auth)/sign-in/page.tsx

@@ -5,10 +5,11 @@ export default function SignInPage() {
   const t = useTranslations("auth.signInPage");
 
   return (
-    <main className="space-y-3">
-      <h1 className="text-2xl font-semibold">{t("title")}</h1>
-      <p className="text-sm text-muted-foreground">{t("description")}</p>
+    <div className="space-y-6">
+      <div className="text-center sm:text-left">
+        <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
+      </div>
       <SignInForm />
-    </main>
+    </div>
   );
 }

package/templates/features/auth/src/app/api/v1/auth/login/route.ts

@@ -1,4 +1,3 @@
-import { getRefreshCookieName, refreshCookieOptions } from "@/lib/auth/cookies";
 import { fail, ok } from "@/lib/api/response";
 import prisma from "@/lib/db/prisma";
 
@@ -19,16 +18,19 @@ export async function POST(request: Request) {
     });
   }
 
-  const signInResponse = await fetch(`${authBaseUrl}/api/auth/sign-in/username`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
+  const signInResponse = await fetch(
+    `${authBaseUrl}/api/auth/sign-in/username`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username: payload.username,
+        password: payload.password,
+      }),
     },
-    body: JSON.stringify({
-      username: payload.username,
-      password: payload.password,
-    }),
-  });
+  );
 
   if (!signInResponse.ok) {
     return fail("UNAUTHORIZED", "Invalid credentials.", {
@@ -36,20 +38,12 @@ export async function POST(request: Request) {
     });
   }
 
-  const cookieHeader = signInResponse.headers.get("set-cookie");
-
-  const tokenResponse = await fetch(`${authBaseUrl}/api/auth/token`, {
-    method: "GET",
-    headers: cookieHeader ? { cookie: cookieHeader } : undefined,
-  });
-
-  if (!tokenResponse.ok) {
-    return fail("UPSTREAM_ERROR", "Unable to issue access token.", {
-      status: tokenResponse.status,
-    });
-  }
-
-  const tokenPayload = await tokenResponse.json();
+  const upstreamSetCookies =
+    typeof signInResponse.headers.getSetCookie === "function"
+      ? signInResponse.headers.getSetCookie()
+      : [];
+  const cookieHeader =
+    upstreamSetCookies[0] ?? signInResponse.headers.get("set-cookie");
 
   const dbUser = await prisma.user.findUnique({
     where: { username: payload.username },
@@ -57,14 +51,15 @@ export async function POST(request: Request) {
   });
 
   const response = ok({
-    accessToken: tokenPayload.token,
     requirePasswordChange: dbUser?.requirePasswordChange ?? false,
   });
 
-  if (cookieHeader) {
-    response.headers.set("set-cookie", cookieHeader);
+  if (upstreamSetCookies.length > 0) {
+    for (const setCookie of upstreamSetCookies) {
+      response.headers.append("set-cookie", setCookie);
+    }
+  } else if (cookieHeader) {
+    response.headers.append("set-cookie", cookieHeader);
   }
-  response.cookies.set(getRefreshCookieName(), crypto.randomUUID(), refreshCookieOptions());
-
   return response;
 }

package/templates/features/auth/src/app/api/v1/auth/logout/route.ts

@@ -1,4 +1,3 @@
-import { getRefreshCookieName, refreshCookieOptions } from "@/lib/auth/cookies";
 import { fail, ok } from "@/lib/api/response";
 
 const authBaseUrl =
@@ -20,9 +19,5 @@ export async function POST(request: Request) {
     : fail("UPSTREAM_ERROR", "Failed to sign out.", {
         status: signOutResponse.status,
       });
-  response.cookies.set(getRefreshCookieName(), "", {
-    ...refreshCookieOptions(),
-    maxAge: 0,
-  });
   return response;
 }

package/templates/features/auth/src/components/layout/auth/auth-shell.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { Logo } from "@/components/branding/logo";
+
+type AuthShellProps = {
+  children: ReactNode;
+};
+
+export function AuthShell({ children }: AuthShellProps) {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex justify-center">
+          <Logo variant="auth" />
+        </div>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="rounded-lg border bg-card px-4 py-8 shadow-sm sm:px-10">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/features/auth/src/features/auth/components/account-panel.tsx

@@ -49,17 +49,29 @@ export function AccountPanel() {
   }, []);
 
   if (loading) {
-    return <p>{t("loading")}</p>;
+    return (
+      <Card className="max-w-xl">
+        <CardContent className="py-8 text-sm text-muted-foreground">
+          {t("loading")}
+        </CardContent>
+      </Card>
+    );
   }
 
   if (!session?.user) {
-    return <p>{t("noSession")}</p>;
+    return (
+      <Card className="max-w-xl">
+        <CardContent className="py-8 text-sm text-muted-foreground">
+          {t("noSession")}
+        </CardContent>
+      </Card>
+    );
   }
 
   return (
     <Card className="max-w-xl">
       <CardHeader>
-        <CardTitle>{t("title")}</CardTitle>
+        <CardTitle>{t("panelTitle")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-2 text-sm">
         <p>

package/templates/features/auth/src/features/auth/components/change-password-form.tsx

@@ -8,7 +8,6 @@ import { toast } from "sonner";
 import { protectedApi } from "@/lib/api/axios";
 import { changePasswordSchema } from "@/features/auth/validations";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
@@ -49,34 +48,32 @@ export function ChangePasswordForm() {
   };
 
   return (
-    <Card>
-      <CardContent className="pt-6">
-        <form onSubmit={onSubmit} className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="currentPassword">{t("currentPassword")}</Label>
-            <Input
-              id="currentPassword"
-              type="password"
-              value={currentPassword}
-              onChange={(event) => setCurrentPassword(event.target.value)}
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="newPassword">{t("newPassword")}</Label>
-            <Input
-              id="newPassword"
-              type="password"
-              value={newPassword}
-              onChange={(event) => setNewPassword(event.target.value)}
-              required
-            />
-          </div>
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? t("submitting") : t("submit")}
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="currentPassword">{t("currentPassword")}</Label>
+        <Input
+          id="currentPassword"
+          type="password"
+          value={currentPassword}
+          onChange={(event) => setCurrentPassword(event.target.value)}
+          className="h-12"
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="newPassword">{t("newPassword")}</Label>
+        <Input
+          id="newPassword"
+          type="password"
+          value={newPassword}
+          onChange={(event) => setNewPassword(event.target.value)}
+          className="h-12"
+          required
+        />
+      </div>
+      <Button type="submit" className="h-12 w-full" disabled={isSubmitting}>
+        {isSubmitting ? t("submitting") : t("submit")}
+      </Button>
+    </form>
   );
 }

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

@@ -6,16 +6,13 @@ import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import { publicApi } from "@/lib/api/axios";
-import { setAccessToken } from "@/lib/api/token-store";
 import { signInSchema } from "@/features/auth/validations";
 import type { ApiSuccess } from "@/types";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 type LoginResponse = {
-  accessToken: string;
   requirePasswordChange: boolean;
 };
 
@@ -41,14 +38,10 @@ export function SignInForm() {
         withCredentials: true,
       });
       const payload = (response.data as ApiSuccess<LoginResponse>).data;
-      if (!payload?.accessToken) {
-        toast.error(t("missingAccessToken"));
-        return;
-      }
-
-      setAccessToken(payload.accessToken);
       toast.success(t("success"));
-      router.push(payload.requirePasswordChange ? "/change-password" : "/dashboard");
+      router.push(
+        payload.requirePasswordChange ? "/change-password" : "/dashboard",
+      );
       router.refresh();
     } catch (error) {
       const message = error instanceof Error ? error.message : t("failed");
@@ -59,37 +52,35 @@ export function SignInForm() {
   };
 
   return (
-    <Card>
-      <CardContent className="pt-6">
-        <form onSubmit={onSubmit} className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="username">{t("username")}</Label>
-            <Input
-              id="username"
-              value={username}
-              onChange={(event) => setUsername(event.target.value)}
-              placeholder={t("usernamePlaceholder")}
-              autoComplete="username"
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="password">{t("password")}</Label>
-            <Input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(event) => setPassword(event.target.value)}
-              placeholder={t("passwordPlaceholder")}
-              autoComplete="current-password"
-              required
-            />
-          </div>
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? t("submitting") : t("submit")}
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="username">{t("username")}</Label>
+        <Input
+          id="username"
+          value={username}
+          onChange={(event) => setUsername(event.target.value)}
+          placeholder={t("usernamePlaceholder")}
+          autoComplete="username"
+          className="h-12"
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password">{t("password")}</Label>
+        <Input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          placeholder={t("passwordPlaceholder")}
+          autoComplete="current-password"
+          className="h-12"
+          required
+        />
+      </div>
+      <Button type="submit" className="h-12 w-full" disabled={isSubmitting}>
+        {isSubmitting ? t("submitting") : t("submit")}
+      </Button>
+    </form>
   );
 }

package/templates/features/auth/src/lib/auth/client.ts

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

package/templates/features/auth/src/lib/auth/server.ts

@@ -1,6 +1,6 @@
 import { betterAuth } from "better-auth/minimal";
 import { prismaAdapter } from "better-auth/adapters/prisma";
-import { jwt, username } from "better-auth/plugins";
+import { username } from "better-auth/plugins";
 import prisma from "@/lib/db/prisma";
 
 const socialProviders = {
@@ -12,7 +12,7 @@ export const auth = betterAuth({
   database: prismaAdapter(prisma, {
     provider: "postgresql",
   }),
-  plugins: [jwt(), username()],
+  plugins: [username()],
   emailAndPassword: {
     enabled: true,
     minPasswordLength: 8,

package/templates/features/dashboard/src/app/(dashboard)/account/page.tsx

@@ -1,18 +1,20 @@
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { AccountPanel } from "@/features/auth/components/account-panel";
+import { PageShell } from "@/components/layout/private/page-shell";
 import { Button } from "@/components/ui/button";
 
 export default function AccountPage() {
   const t = useTranslations("auth.account");
 
   return (
-    <main className="space-y-4">
-      <h1 className="text-2xl font-semibold">{t("title")}</h1>
-      <AccountPanel />
-      <Button asChild variant="outline">
-        <Link href="/sign-in">{t("goToSignIn")}</Link>
-      </Button>
-    </main>
+    <PageShell title={t("title")} description={t("description")}>
+      <div className="space-y-4">
+        <AccountPanel />
+        <Button asChild variant="outline">
+          <Link href="/sign-in">{t("goToSignIn")}</Link>
+        </Button>
+      </div>
+    </PageShell>
   );
 }

package/templates/features/dashboard/src/app/(dashboard)/dashboard/page.tsx

@@ -1,17 +1,31 @@
 import { useTranslations } from "next-intl";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { PageShell } from "@/components/layout/private/page-shell";
 
 export default function DashboardPage() {
-  const t = useTranslations("common.sidebar");
+  const t = useTranslations("common.dashboardPage");
+
+  const stats = [
+    { title: t("stats.users.title"), value: t("stats.users.value") },
+    { title: t("stats.records.title"), value: t("stats.records.value") },
+    { title: t("stats.activity.title"), value: t("stats.activity.value") },
+  ];
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t("dashboard")}</CardTitle>
-      </CardHeader>
-      <CardContent className="text-sm text-muted-foreground">
-        Starter dashboard page. Add your own widgets and metrics here.
-      </CardContent>
-    </Card>
+    <PageShell title={t("title")} description={t("description")}>
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {stats.map((stat) => (
+          <div
+            key={stat.title}
+            className="overflow-hidden rounded-lg border bg-card p-6 shadow-sm"
+          >
+            <h3 className="text-base font-semibold leading-6">{stat.title}</h3>
+            <p className="mt-2 text-3xl font-bold tracking-tight text-primary">
+              {stat.value}
+            </p>
+          </div>
+        ))}
+      </div>
+      <p className="mt-8 text-sm text-muted-foreground">{t("placeholder")}</p>
+    </PageShell>
   );
 }

package/templates/features/dashboard/src/components/layout/private/app-sidebar.tsx

@@ -1,14 +1,7 @@
 "use client";
 
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import Link from "next/link";
-import {
-  useSidebar,
-  Sidebar,
-  SidebarHeader,
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
-import { Logo } from "@/components/branding/logo";
+import { useSidebar, Sidebar, SidebarTrigger } from "@/components/ui/sidebar";
 import { NavSidebar } from "@/components/layout/private/nav-sidebar";
 import { cn } from "@/utils/cn";
 
@@ -33,11 +26,6 @@ export function AppSidebar() {
           </SidebarTrigger>
         </div>
       )}
-      <SidebarHeader className="p-3">
-        <Link href="/dashboard">
-          <Logo showLabel />
-        </Link>
-      </SidebarHeader>
       <NavSidebar />
     </Sidebar>
   );