better-ts-stack 1.1.3 → 2.0.0

package/templates/modules/auth/nextjs/app/dashboard/page.tsx

@@ -1,96 +1,96 @@
-import Link from "next/link";
-import { headers } from "next/headers";
-import { redirect } from "next/navigation";
-import { ArrowRight, ShieldCheck } from "lucide-react";
-
-import { SignOutButton } from "@/components/auth/sign-out-button";
-import { buttonVariants } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { auth } from "@/lib/auth";
-import { cn } from "@/lib/utils";
-
-export default async function DashboardPage() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  if (!session) {
-    redirect("/sign-in");
-  }
-
-  return (
-    <main className="min-h-screen bg-[linear-gradient(180deg,_#f8fafc_0%,_#eef2ff_100%)] px-6 py-16 sm:px-10">
-      <div className="mx-auto max-w-5xl space-y-8">
-        <header className="flex flex-col gap-6 rounded-[2rem] border border-white/70 bg-white/85 p-8 shadow-xl shadow-slate-200/60 backdrop-blur md:flex-row md:items-end md:justify-between">
-          <div className="space-y-3">
-            <span className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-emerald-700">
-              <ShieldCheck className="size-4" />
-              Authenticated session
-            </span>
-            <div className="space-y-1">
-              <h1 className="text-3xl font-semibold tracking-tight text-slate-950">
-                Welcome {session.user.name}
-              </h1>
-              <p className="text-sm text-slate-600">{session.user.email}</p>
-            </div>
-          </div>
-          <SignOutButton />
-        </header>
-
-        <section className="grid gap-5 md:grid-cols-2">
-          <Card>
-            <CardHeader>
-              <CardTitle>Protected route example</CardTitle>
-              <CardDescription>
-                This page verifies the session on the server before rendering any
-                content.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4 text-sm text-slate-600">
-              <p>
-                The generated proxy only performs an optimistic cookie check. The
-                authoritative guard happens here with{" "}
-                <code className="font-mono text-slate-900">
-                  auth.api.getSession({"{"} headers: await headers() {"}"})
-                </code>
-                .
-              </p>
-              <p>
-                That keeps route protection aligned with Better Auth&apos;s
-                Next.js guidance while staying easy to extend.
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Suggested next steps</CardTitle>
-              <CardDescription>
-                Keep the generated auth flow, then customize the app around your
-                product.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3 text-sm text-slate-600">
-              <p>Replace the demo dashboard with your first authenticated page.</p>
-              <p>Extend the schema with profile or onboarding fields.</p>
-              <p>Add provider-based auth or email verification later if needed.</p>
-              <Link
-                href="/"
-                className={cn(buttonVariants({ variant: "outline" }), "w-fit gap-2")}
-              >
-                Back to home
-                <ArrowRight className="size-4" />
-              </Link>
-            </CardContent>
-          </Card>
-        </section>
-      </div>
-    </main>
-  );
-}
+import Link from "next/link";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { ArrowRight, ShieldCheck } from "lucide-react";
+
+import { SignOutButton } from "@/components/auth/sign-out-button";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { auth } from "@/lib/auth";
+import { cn } from "@/lib/utils";
+
+export default async function DashboardPage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <main className="min-h-screen bg-[linear-gradient(180deg,_#f8fafc_0%,_#eef2ff_100%)] px-6 py-16 sm:px-10">
+      <div className="mx-auto max-w-5xl space-y-8">
+        <header className="flex flex-col gap-6 rounded-[2rem] border border-white/70 bg-white/85 p-8 shadow-xl shadow-slate-200/60 backdrop-blur md:flex-row md:items-end md:justify-between">
+          <div className="space-y-3">
+            <span className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-emerald-700">
+              <ShieldCheck className="size-4" />
+              Authenticated session
+            </span>
+            <div className="space-y-1">
+              <h1 className="text-3xl font-semibold tracking-tight text-slate-950">
+                Welcome {session.user.name}
+              </h1>
+              <p className="text-sm text-slate-600">{session.user.email}</p>
+            </div>
+          </div>
+          <SignOutButton />
+        </header>
+
+        <section className="grid gap-5 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Protected route example</CardTitle>
+              <CardDescription>
+                This page verifies the session on the server before rendering any
+                content.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 text-sm text-slate-600">
+              <p>
+                The generated proxy only performs an optimistic cookie check. The
+                authoritative guard happens here with{" "}
+                <code className="font-mono text-slate-900">
+                  auth.api.getSession({"{"} headers: await headers() {"}"})
+                </code>
+                .
+              </p>
+              <p>
+                That keeps route protection aligned with Better Auth&apos;s
+                Next.js guidance while staying easy to extend.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Suggested next steps</CardTitle>
+              <CardDescription>
+                Keep the generated auth flow, then customize the app around your
+                product.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm text-slate-600">
+              <p>Replace the demo dashboard with your first authenticated page.</p>
+              <p>Extend the schema with profile or onboarding fields.</p>
+              <p>Add provider-based auth or email verification later if needed.</p>
+              <Link
+                href="/"
+                className={cn(buttonVariants({ variant: "outline" }), "w-fit gap-2")}
+              >
+                Back to home
+                <ArrowRight className="size-4" />
+              </Link>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
+}

package/templates/modules/auth/nextjs/app/sign-in/page.tsx

@@ -1,35 +1,35 @@
-import { headers } from "next/headers";
-import { redirect } from "next/navigation";
-
-import { SignInForm } from "@/components/auth/sign-in-form";
-import { auth } from "@/lib/auth";
-
-export default async function SignInPage() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  if (session) {
-    redirect("/dashboard");
-  }
-
-  return (
-    <main className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.16),_transparent_30%),linear-gradient(180deg,_#f8fafc_0%,_#eef2ff_100%)] px-6 py-16 sm:px-10">
-      <div className="mx-auto flex min-h-[calc(100vh-8rem)] max-w-5xl items-center gap-12 lg:grid lg:grid-cols-[0.9fr_1.1fr]">
-        <section className="hidden space-y-5 lg:block">
-          <span className="inline-flex rounded-full border border-sky-200 bg-white/80 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-sky-700">
-            Better Auth
-          </span>
-          <h1 className="text-4xl font-semibold tracking-tight text-slate-950">
-            Welcome back.
-          </h1>
-          <p className="max-w-md text-base leading-7 text-slate-600">
-            This generated starter includes protected routes, session-aware page
-            guards, and reusable auth form primitives you can extend from here.
-          </p>
-        </section>
-        <SignInForm />
-      </div>
-    </main>
-  );
-}
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { SignInForm } from "@/components/auth/sign-in-form";
+import { auth } from "@/lib/auth";
+
+export default async function SignInPage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (session) {
+    redirect("/dashboard");
+  }
+
+  return (
+    <main className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.16),_transparent_30%),linear-gradient(180deg,_#f8fafc_0%,_#eef2ff_100%)] px-6 py-16 sm:px-10">
+      <div className="mx-auto flex min-h-[calc(100vh-8rem)] max-w-5xl items-center gap-12 lg:grid lg:grid-cols-[0.9fr_1.1fr]">
+        <section className="hidden space-y-5 lg:block">
+          <span className="inline-flex rounded-full border border-sky-200 bg-white/80 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-sky-700">
+            Better Auth
+          </span>
+          <h1 className="text-4xl font-semibold tracking-tight text-slate-950">
+            Welcome back.
+          </h1>
+          <p className="max-w-md text-base leading-7 text-slate-600">
+            This generated starter includes protected routes, session-aware page
+            guards, and reusable auth form primitives you can extend from here.
+          </p>
+        </section>
+        <SignInForm />
+      </div>
+    </main>
+  );
+}

package/templates/modules/auth/nextjs/app/sign-up/page.tsx

@@ -1,35 +1,35 @@
-import { headers } from "next/headers";
-import { redirect } from "next/navigation";
-
-import { SignUpForm } from "@/components/auth/sign-up-form";
-import { auth } from "@/lib/auth";
-
-export default async function SignUpPage() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  if (session) {
-    redirect("/dashboard");
-  }
-
-  return (
-    <main className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_28%),linear-gradient(180deg,_#f8fafc_0%,_#ecfeff_100%)] px-6 py-16 sm:px-10">
-      <div className="mx-auto flex min-h-[calc(100vh-8rem)] max-w-5xl items-center gap-12 lg:grid lg:grid-cols-[0.9fr_1.1fr]">
-        <section className="hidden space-y-5 lg:block">
-          <span className="inline-flex rounded-full border border-sky-200 bg-white/80 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-sky-700">
-            Better Auth
-          </span>
-          <h1 className="text-4xl font-semibold tracking-tight text-slate-950">
-            Create your account.
-          </h1>
-          <p className="max-w-md text-base leading-7 text-slate-600">
-            Start with email and password today, then layer in profile data,
-            onboarding, and provider-based auth when your product needs it.
-          </p>
-        </section>
-        <SignUpForm />
-      </div>
-    </main>
-  );
-}
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { SignUpForm } from "@/components/auth/sign-up-form";
+import { auth } from "@/lib/auth";
+
+export default async function SignUpPage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (session) {
+    redirect("/dashboard");
+  }
+
+  return (
+    <main className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_28%),linear-gradient(180deg,_#f8fafc_0%,_#ecfeff_100%)] px-6 py-16 sm:px-10">
+      <div className="mx-auto flex min-h-[calc(100vh-8rem)] max-w-5xl items-center gap-12 lg:grid lg:grid-cols-[0.9fr_1.1fr]">
+        <section className="hidden space-y-5 lg:block">
+          <span className="inline-flex rounded-full border border-sky-200 bg-white/80 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-sky-700">
+            Better Auth
+          </span>
+          <h1 className="text-4xl font-semibold tracking-tight text-slate-950">
+            Create your account.
+          </h1>
+          <p className="max-w-md text-base leading-7 text-slate-600">
+            Start with email and password today, then layer in profile data,
+            onboarding, and provider-based auth when your product needs it.
+          </p>
+        </section>
+        <SignUpForm />
+      </div>
+    </main>
+  );
+}

package/templates/modules/auth/nextjs/components/auth/sign-in-form.tsx

@@ -1,132 +1,132 @@
-"use client";
-
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState, useTransition } from "react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { LoaderCircle } from "lucide-react";
-import { useForm } from "react-hook-form";
-
-import { authClient } from "@/lib/auth-client";
-import {
-  getAuthErrorMessage,
-  signInSchema,
-  type SignInValues,
-} from "@/lib/auth-schema";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-
-export function SignInForm() {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-  const [authError, setAuthError] = useState<string | null>(null);
-  const form = useForm<SignInValues>({
-    resolver: zodResolver(signInSchema),
-    defaultValues: {
-      email: "",
-      password: "",
-    },
-  });
-
-  const onSubmit = form.handleSubmit((values) => {
-    setAuthError(null);
-
-    startTransition(async () => {
-      const result = await authClient.signIn.email({
-        email: values.email,
-        password: values.password,
-      });
-
-      if (result.error) {
-        setAuthError(getAuthErrorMessage(result.error));
-        return;
-      }
-
-      router.push("/dashboard");
-      router.refresh();
-    });
-  });
-
-  return (
-    <Card className="border-white/80 bg-white/90 shadow-2xl shadow-slate-200/70 backdrop-blur">
-      <CardHeader className="space-y-2">
-        <CardTitle>Login to your account</CardTitle>
-        <CardDescription>
-          Sign in with your email and password to continue to your dashboard.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form className="space-y-6" onSubmit={onSubmit} noValidate>
-          <FieldGroup>
-            <Field data-invalid={Boolean(form.formState.errors.email)}>
-              <FieldLabel htmlFor="email">Email</FieldLabel>
-              <Input
-                id="email"
-                type="email"
-                autoComplete="email"
-                aria-invalid={Boolean(form.formState.errors.email)}
-                placeholder="you@example.com"
-                {...form.register("email")}
-              />
-              <FieldDescription>Use the email you registered with.</FieldDescription>
-              <FieldError errors={[form.formState.errors.email]} />
-            </Field>
-
-            <Field data-invalid={Boolean(form.formState.errors.password)}>
-              <FieldLabel htmlFor="password">Password</FieldLabel>
-              <Input
-                id="password"
-                type="password"
-                autoComplete="current-password"
-                aria-invalid={Boolean(form.formState.errors.password)}
-                placeholder="Enter your password"
-                {...form.register("password")}
-              />
-              <FieldError errors={[form.formState.errors.password]} />
-            </Field>
-          </FieldGroup>
-
-          {authError ? (
-            <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
-              {authError}
-            </div>
-          ) : null}
-
-          <Button className="w-full" type="submit" disabled={isPending}>
-            {isPending ? (
-              <>
-                <LoaderCircle className="mr-2 size-4 animate-spin" />
-                Signing in
-              </>
-            ) : (
-              "Login"
-            )}
-          </Button>
-        </form>
-      </CardContent>
-      <CardFooter className="justify-center">
-        <p className="text-sm text-slate-600">
-          Need an account?{" "}
-          <Link className="font-medium text-sky-700 hover:text-sky-800" href="/sign-up">
-            Signup
-          </Link>
-        </p>
-      </CardFooter>
-    </Card>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderCircle } from "lucide-react";
+import { useForm } from "react-hook-form";
+
+import { authClient } from "@/lib/auth-client";
+import {
+  getAuthErrorMessage,
+  signInSchema,
+  type SignInValues,
+} from "@/lib/auth-schema";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+
+export function SignInForm() {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [authError, setAuthError] = useState<string | null>(null);
+  const form = useForm<SignInValues>({
+    resolver: zodResolver(signInSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    setAuthError(null);
+
+    startTransition(async () => {
+      const result = await authClient.signIn.email({
+        email: values.email,
+        password: values.password,
+      });
+
+      if (result.error) {
+        setAuthError(getAuthErrorMessage(result.error));
+        return;
+      }
+
+      router.push("/dashboard");
+      router.refresh();
+    });
+  });
+
+  return (
+    <Card className="border-white/80 bg-white/90 shadow-2xl shadow-slate-200/70 backdrop-blur">
+      <CardHeader className="space-y-2">
+        <CardTitle>Login to your account</CardTitle>
+        <CardDescription>
+          Sign in with your email and password to continue to your dashboard.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="space-y-6" onSubmit={onSubmit} noValidate>
+          <FieldGroup>
+            <Field data-invalid={Boolean(form.formState.errors.email)}>
+              <FieldLabel htmlFor="email">Email</FieldLabel>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                aria-invalid={Boolean(form.formState.errors.email)}
+                placeholder="you@example.com"
+                {...form.register("email")}
+              />
+              <FieldDescription>Use the email you registered with.</FieldDescription>
+              <FieldError errors={[form.formState.errors.email]} />
+            </Field>
+
+            <Field data-invalid={Boolean(form.formState.errors.password)}>
+              <FieldLabel htmlFor="password">Password</FieldLabel>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                aria-invalid={Boolean(form.formState.errors.password)}
+                placeholder="Enter your password"
+                {...form.register("password")}
+              />
+              <FieldError errors={[form.formState.errors.password]} />
+            </Field>
+          </FieldGroup>
+
+          {authError ? (
+            <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+              {authError}
+            </div>
+          ) : null}
+
+          <Button className="w-full" type="submit" disabled={isPending}>
+            {isPending ? (
+              <>
+                <LoaderCircle className="mr-2 size-4 animate-spin" />
+                Signing in
+              </>
+            ) : (
+              "Login"
+            )}
+          </Button>
+        </form>
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-slate-600">
+          Need an account?{" "}
+          <Link className="font-medium text-sky-700 hover:text-sky-800" href="/sign-up">
+            Signup
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}