better-ts-stack 2.1.2 → 2.2.0

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>
+  );
+}

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

@@ -0,0 +1,133 @@
+"use client";
+
+import Link from "next/link";
+import { useState, useTransition } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CircleAlert, MailCheck } from "lucide-react";
+import { useForm } from "react-hook-form";
+
+import { authClient } from "@/lib/auth-client";
+import {
+  forgotPasswordSchema,
+  getAuthErrorMessage,
+  type ForgotPasswordValues,
+} from "@/lib/auth-schema";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+
+export function ForgotPasswordForm() {
+  const [isPending, startTransition] = useTransition();
+  const [authError, setAuthError] = useState<string | null>(null);
+  const [isSent, setIsSent] = useState(false);
+  const form = useForm<ForgotPasswordValues>({
+    resolver: zodResolver(forgotPasswordSchema),
+    defaultValues: { email: "" },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    setAuthError(null);
+
+    startTransition(async () => {
+      // The link in the email opens /reset-password with a one-time token
+      const result = await authClient.requestPasswordReset({
+        email: values.email,
+        redirectTo: "/reset-password",
+      });
+
+      if (result.error) {
+        setAuthError(getAuthErrorMessage(result.error));
+        return;
+      }
+
+      setIsSent(true);
+    });
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Forgot your password?</CardTitle>
+        <CardDescription>
+          Enter your email and we will send you a link to choose a new one.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isSent ? (
+          <FieldGroup>
+            <Alert>
+              <MailCheck />
+              <AlertTitle>Check your email</AlertTitle>
+              <AlertDescription>
+                If an account exists for that email, a reset link is on its
+                way. Without an email provider set up, the link is printed in
+                the server terminal.
+              </AlertDescription>
+            </Alert>
+            <FieldDescription className="text-center">
+              <Link href="/sign-in">Back to login</Link>
+            </FieldDescription>
+          </FieldGroup>
+        ) : (
+          <form 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>
+
+              {authError ? (
+                <Alert variant="destructive">
+                  <CircleAlert />
+                  <AlertDescription>{authError}</AlertDescription>
+                </Alert>
+              ) : null}
+
+              <Field>
+                <Button type="submit" disabled={isPending}>
+                  {isPending ? (
+                    <>
+                      <Spinner data-icon="inline-start" />
+                      Sending link
+                    </>
+                  ) : (
+                    "Send reset link"
+                  )}
+                </Button>
+                <FieldDescription className="text-center">
+                  Remembered it? <Link href="/sign-in">Back to login</Link>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,155 @@
+"use client";
+
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useState, useTransition } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CircleAlert } from "lucide-react";
+import { useForm } from "react-hook-form";
+
+import { authClient } from "@/lib/auth-client";
+import {
+  getAuthErrorMessage,
+  resetPasswordSchema,
+  type ResetPasswordValues,
+} from "@/lib/auth-schema";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  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";
+
+// The link in the reset email opens /reset-password?token=..., or
+// ?error=INVALID_TOKEN when the token is invalid or has expired. Reading it here,
+// in the browser, lets the page itself be static
+export function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("error") ? null : searchParams.get("token");
+  const [isPending, startTransition] = useTransition();
+  const [authError, setAuthError] = useState<string | null>(null);
+  const [isDone, setIsDone] = useState(false);
+  const form = useForm<ResetPasswordValues>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: { password: "", confirmPassword: "" },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    if (!token) return;
+    setAuthError(null);
+
+    startTransition(async () => {
+      const result = await authClient.resetPassword({
+        newPassword: values.password,
+        token,
+      });
+
+      if (result.error) {
+        setAuthError(getAuthErrorMessage(result.error));
+        return;
+      }
+
+      setIsDone(true);
+    });
+  });
+
+  if (!token || isDone) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{isDone ? "Password changed" : "Link expired"}</CardTitle>
+          <CardDescription>
+            {isDone
+              ? "You were signed out on every device. Log in with your new password."
+              : "This reset link is invalid or has expired. Ask for a new one."}
+          </CardDescription>
+        </CardHeader>
+        <CardFooter>
+          <Button
+            className="w-full"
+            nativeButton={false}
+            render={<Link href={isDone ? "/sign-in" : "/forgot-password"} />}
+          >
+            {isDone ? "Go to login" : "Send a new link"}
+          </Button>
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Choose a new password</CardTitle>
+        <CardDescription>
+          You will be signed out on every device after the change.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} noValidate>
+          <FieldGroup>
+            <Field data-invalid={Boolean(form.formState.errors.password)}>
+              <FieldLabel htmlFor="password">New password</FieldLabel>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="new-password"
+                aria-invalid={Boolean(form.formState.errors.password)}
+                {...form.register("password")}
+              />
+              <FieldError errors={[form.formState.errors.password]} />
+            </Field>
+
+            <Field
+              data-invalid={Boolean(form.formState.errors.confirmPassword)}
+            >
+              <FieldLabel htmlFor="confirmPassword">
+                Confirm new password
+              </FieldLabel>
+              <Input
+                id="confirmPassword"
+                type="password"
+                autoComplete="new-password"
+                aria-invalid={Boolean(form.formState.errors.confirmPassword)}
+                {...form.register("confirmPassword")}
+              />
+              <FieldError errors={[form.formState.errors.confirmPassword]} />
+            </Field>
+
+            {authError ? (
+              <Alert variant="destructive">
+                <CircleAlert />
+                <AlertDescription>{authError}</AlertDescription>
+              </Alert>
+            ) : null}
+
+            <Field>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? (
+                  <>
+                    <Spinner data-icon="inline-start" />
+                    Saving
+                  </>
+                ) : (
+                  "Save new password"
+                )}
+              </Button>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}