better-ts-stack 2.1.1 → 2.2.0

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

@@ -1,69 +1,117 @@
+import { Suspense } from "react";
+
 import Link from "next/link";
-import { headers } from "next/headers";
 import { redirect } from "next/navigation";
+
 import { ArrowRight, ShieldCheck } from "lucide-react";
 
+import { ChangePasswordForm } from "@/components/auth/change-password-form";
+import { EmailVerificationCard } from "@/components/auth/email-verification-card";
 import { SignOutButton } from "@/components/auth/sign-out-button";
-import { buttonVariants } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { auth } from "@/lib/auth";
-import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getSession } from "@/lib/session";
 
-export default async function DashboardPage() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
+// The parts that need the user wait for the session in their own <Suspense>
+// boundary, so the rest of the page is sent without waiting for it
+async function DashboardHeader() {
+  const session = await getSession();
 
+  // proxy.ts already sent visitors without a session cookie to /sign-in; this
+  // catches an expired or revoked session
   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>
+    <header className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
+      <div className="flex flex-col gap-3">
+        <Badge variant="secondary">
+          <ShieldCheck data-icon="inline-start" />
+          Authenticated session
+        </Badge>
+        <div className="flex flex-col gap-1">
+          <h1 className="text-3xl font-semibold tracking-tight">
+            Welcome {session.user.name}
+          </h1>
+          <p className="text-sm text-muted-foreground">{session.user.email}</p>
+        </div>
+      </div>
+      <SignOutButton />
+    </header>
+  );
+}
+
+function DashboardHeaderSkeleton() {
+  return (
+    <div className="flex flex-col gap-3" aria-busy="true">
+      <Skeleton className="h-5 w-44" />
+      <Skeleton className="h-9 w-64" />
+      <Skeleton className="h-4 w-40" />
+    </div>
+  );
+}
+
+async function EmailVerification() {
+  const session = await getSession();
+
+  return session ? (
+    <EmailVerificationCard
+      email={session.user.email}
+      emailVerified={session.user.emailVerified}
+    />
+  ) : null;
+}
+
+export default function DashboardPage() {
+  return (
+    <main className="min-h-svh bg-muted px-6 py-16 sm:px-10">
+      <div className="mx-auto flex max-w-5xl flex-col gap-8">
+        <Suspense fallback={<DashboardHeaderSkeleton />}>
+          <DashboardHeader />
+        </Suspense>
 
         <section className="grid gap-5 md:grid-cols-2">
+          <Suspense fallback={<Skeleton className="h-40 rounded-xl" />}>
+            <EmailVerification />
+          </Suspense>
+          <ChangePasswordForm />
           <Card>
             <CardHeader>
               <CardTitle>Protected route example</CardTitle>
               <CardDescription>
-                This page verifies the session on the server before rendering any
-                content.
+                The page is sent right away; the parts that need the user stream
+                in once the server has checked the session.
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4 text-sm text-slate-600">
+            <CardContent className="flex flex-col gap-4 text-muted-foreground">
               <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>
-                .
+                <code className="font-mono text-foreground">proxy.ts</code>{" "}
+                sends visitors without a session cookie to the sign-in page.
+                Each part that needs the user calls{" "}
+                <code className="font-mono text-foreground">getSession()</code>{" "}
+                from{" "}
+                <code className="font-mono text-foreground">
+                  lib/session.ts
+                </code>{" "}
+                inside its own{" "}
+                <code className="font-mono text-foreground">
+                  &lt;Suspense&gt;
+                </code>{" "}
+                boundary, and the session is looked up once per request.
               </p>
               <p>
-                That keeps route protection aligned with Better Auth&apos;s
-                Next.js guidance while staying easy to extend.
+                Check the session on the server like this in every protected
+                page, route handler, and server action.
               </p>
             </CardContent>
           </Card>
@@ -76,18 +124,26 @@ export default async function DashboardPage() {
                 product.
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-3 text-sm text-slate-600">
-              <p>Replace the demo dashboard with your first authenticated page.</p>
+            <CardContent className="flex flex-col gap-3 text-muted-foreground">
+              <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")}
+              <p>
+                Add a GitHub or Google client ID and secret to .env to turn on
+                social sign-in, and RESEND_API_KEY to send real emails.
+              </p>
+            </CardContent>
+            <CardFooter>
+              <Button
+                variant="outline"
+                nativeButton={false}
+                render={<Link href="/" />}
               >
                 Back to home
-                <ArrowRight className="size-4" />
-              </Link>
-            </CardContent>
+                <ArrowRight data-icon="inline-end" />
+              </Button>
+            </CardFooter>
           </Card>
         </section>
       </div>

package/templates/modules/auth/nextjs/app/forgot-password/page.tsx

@@ -0,0 +1,11 @@
+import { ForgotPasswordForm } from "@/components/auth/forgot-password-form";
+
+export default function ForgotPasswordPage() {
+  return (
+    <main className="flex min-h-svh items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-md">
+        <ForgotPasswordForm />
+      </div>
+    </main>
+  );
+}

package/templates/modules/auth/nextjs/app/reset-password/page.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from "react";
+
+import { ResetPasswordForm } from "@/components/auth/reset-password-form";
+
+// A static page: the form reads the token from the URL in the browser, inside
+// <Suspense> as useSearchParams() requires
+export default function ResetPasswordPage() {
+  return (
+    <main className="flex min-h-svh items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-md">
+        <Suspense>
+          <ResetPasswordForm />
+        </Suspense>
+      </div>
+    </main>
+  );
+}

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

@@ -1,35 +1,41 @@
-import { headers } from "next/headers";
+import { Suspense } from "react";
+
 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(),
-  });
+import { Badge } from "@/components/ui/badge";
+import { socialProviders } from "@/lib/auth";
+import { getSession } from "@/lib/session";
 
-  if (session) {
+// Sends a signed-in visitor to the dashboard. It runs in its own <Suspense>
+// boundary, so the form is sent without waiting for the session lookup
+async function RedirectIfSignedIn() {
+  if (await getSession()) {
     redirect("/dashboard");
   }
 
+  return null;
+}
+
+export default function SignInPage() {
   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">
+    <main className="flex min-h-svh items-center justify-center bg-muted p-6 md:p-10">
+      <div className="grid w-full max-w-5xl items-center gap-12 lg:grid-cols-[0.9fr_1.1fr]">
+        <section className="hidden flex-col gap-5 lg:flex">
+          <Badge variant="outline">Better Auth</Badge>
+          <h1 className="text-4xl font-semibold tracking-tight">
             Welcome back.
           </h1>
-          <p className="max-w-md text-base leading-7 text-slate-600">
+          <p className="max-w-md text-base leading-7 text-muted-foreground">
             This generated starter includes protected routes, session-aware page
             guards, and reusable auth form primitives you can extend from here.
           </p>
         </section>
-        <SignInForm />
+        <SignInForm providers={socialProviders} />
       </div>
+      <Suspense fallback={null}>
+        <RedirectIfSignedIn />
+      </Suspense>
     </main>
   );
 }

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

@@ -1,35 +1,41 @@
-import { headers } from "next/headers";
+import { Suspense } from "react";
+
 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(),
-  });
+import { Badge } from "@/components/ui/badge";
+import { socialProviders } from "@/lib/auth";
+import { getSession } from "@/lib/session";
 
-  if (session) {
+// Sends a signed-in visitor to the dashboard. It runs in its own <Suspense>
+// boundary, so the form is sent without waiting for the session lookup
+async function RedirectIfSignedIn() {
+  if (await getSession()) {
     redirect("/dashboard");
   }
 
+  return null;
+}
+
+export default function SignUpPage() {
   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">
+    <main className="flex min-h-svh items-center justify-center bg-muted p-6 md:p-10">
+      <div className="grid w-full max-w-5xl items-center gap-12 lg:grid-cols-[0.9fr_1.1fr]">
+        <section className="hidden flex-col gap-5 lg:flex">
+          <Badge variant="outline">Better Auth</Badge>
+          <h1 className="text-4xl font-semibold tracking-tight">
             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 className="max-w-md text-base leading-7 text-muted-foreground">
+            Sign up with email and password, or with GitHub or Google once their
+            keys are set. A verification link goes to your inbox.
           </p>
         </section>
-        <SignUpForm />
+        <SignUpForm providers={socialProviders} />
       </div>
+      <Suspense fallback={null}>
+        <RedirectIfSignedIn />
+      </Suspense>
     </main>
   );
 }

package/templates/modules/auth/nextjs/components/auth/change-password-form.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CircleAlert, CircleCheck } from "lucide-react";
+import { useForm } from "react-hook-form";
+
+import { authClient } from "@/lib/auth-client";
+import {
+  changePasswordSchema,
+  getAuthErrorMessage,
+  type ChangePasswordValues,
+} from "@/lib/auth-schema";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+
+export function ChangePasswordForm() {
+  const [isPending, startTransition] = useTransition();
+  const [message, setMessage] = useState<{
+    text: string;
+    isError: boolean;
+  } | null>(null);
+  const form = useForm<ChangePasswordValues>({
+    resolver: zodResolver(changePasswordSchema),
+    defaultValues: { currentPassword: "", newPassword: "" },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    setMessage(null);
+
+    startTransition(async () => {
+      // Other devices are signed out; this one stays signed in
+      const result = await authClient.changePassword({
+        currentPassword: values.currentPassword,
+        newPassword: values.newPassword,
+        revokeOtherSessions: true,
+      });
+
+      if (result.error) {
+        setMessage({ text: getAuthErrorMessage(result.error), isError: true });
+        return;
+      }
+
+      form.reset();
+      setMessage({ text: "Password changed.", isError: false });
+    });
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Change password</CardTitle>
+        <CardDescription>
+          Other devices are signed out after the change.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} noValidate>
+          <FieldGroup>
+            <Field
+              data-invalid={Boolean(form.formState.errors.currentPassword)}
+            >
+              <FieldLabel htmlFor="currentPassword">Current password</FieldLabel>
+              <Input
+                id="currentPassword"
+                type="password"
+                autoComplete="current-password"
+                aria-invalid={Boolean(form.formState.errors.currentPassword)}
+                {...form.register("currentPassword")}
+              />
+              <FieldError errors={[form.formState.errors.currentPassword]} />
+            </Field>
+
+            <Field data-invalid={Boolean(form.formState.errors.newPassword)}>
+              <FieldLabel htmlFor="newPassword">New password</FieldLabel>
+              <Input
+                id="newPassword"
+                type="password"
+                autoComplete="new-password"
+                aria-invalid={Boolean(form.formState.errors.newPassword)}
+                {...form.register("newPassword")}
+              />
+              <FieldError errors={[form.formState.errors.newPassword]} />
+            </Field>
+
+            {message ? (
+              <Alert variant={message.isError ? "destructive" : "default"}>
+                {message.isError ? <CircleAlert /> : <CircleCheck />}
+                <AlertDescription>{message.text}</AlertDescription>
+              </Alert>
+            ) : null}
+
+            <Field orientation="horizontal">
+              <Button type="submit" disabled={isPending}>
+                {isPending ? (
+                  <>
+                    <Spinner data-icon="inline-start" />
+                    Saving
+                  </>
+                ) : (
+                  "Change password"
+                )}
+              </Button>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/modules/auth/nextjs/components/auth/email-verification-card.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { BadgeCheck, MailWarning } from "lucide-react";
+
+import { authClient } from "@/lib/auth-client";
+import { getAuthErrorMessage } from "@/lib/auth-schema";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+
+// Shows whether the email address is verified, with a button to send the
+// verification email again
+export function EmailVerificationCard({
+  email,
+  emailVerified,
+}: {
+  email: string;
+  emailVerified: boolean;
+}) {
+  const [isPending, startTransition] = useTransition();
+  const [message, setMessage] = useState<string | null>(null);
+
+  function resend() {
+    setMessage(null);
+    startTransition(async () => {
+      const result = await authClient.sendVerificationEmail({
+        email,
+        callbackURL: "/dashboard",
+      });
+      setMessage(
+        result.error
+          ? getAuthErrorMessage(result.error)
+          : "Verification email sent. Without an email provider set up, the link is printed in the server terminal."
+      );
+    });
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          {emailVerified ? "Email verified" : "Verify your email"}
+        </CardTitle>
+        <CardDescription>
+          {emailVerified
+            ? `${email} is confirmed.`
+            : `We sent a link to ${email}. Open it to confirm the address.`}
+        </CardDescription>
+        <CardAction>
+          {emailVerified ? (
+            <Badge variant="secondary">
+              <BadgeCheck data-icon="inline-start" />
+              Verified
+            </Badge>
+          ) : (
+            <Badge variant="outline">
+              <MailWarning data-icon="inline-start" />
+              Pending
+            </Badge>
+          )}
+        </CardAction>
+      </CardHeader>
+      {emailVerified ? null : (
+        <CardContent className="flex flex-col items-start gap-3">
+          <Button variant="outline" onClick={resend} disabled={isPending}>
+            {isPending ? (
+              <>
+                <Spinner data-icon="inline-start" />
+                Sending
+              </>
+            ) : (
+              "Send the email again"
+            )}
+          </Button>
+          {message ? (
+            <p className="text-sm text-muted-foreground">{message}</p>
+          ) : null}
+        </CardContent>
+      )}
+    </Card>
+  );
+}