better-ts-stack 2.1.1 → 2.2.0

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

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

@@ -4,7 +4,7 @@ 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 { CircleAlert } from "lucide-react";
 import { useForm } from "react-hook-form";
 
 import { authClient } from "@/lib/auth-client";
@@ -12,13 +12,14 @@ import {
   getAuthErrorMessage,
   signInSchema,
   type SignInValues,
+  type SocialProvider,
 } 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";
@@ -30,8 +31,11 @@ import {
   FieldLabel,
 } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
 
-export function SignInForm() {
+import { SocialButtons } from "./social-buttons";
+
+export function SignInForm({ providers }: { providers: SocialProvider[] }) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [authError, setAuthError] = useState<string | null>(null);
@@ -63,16 +67,18 @@ export function SignInForm() {
   });
 
   return (
-    <Card className="border-white/80 bg-white/90 shadow-2xl shadow-slate-200/70 backdrop-blur">
-      <CardHeader className="space-y-2">
+    <Card>
+      <CardHeader>
         <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>
+        <form onSubmit={onSubmit} noValidate>
           <FieldGroup>
+            <SocialButtons providers={providers} />
+
             <Field data-invalid={Boolean(form.formState.errors.email)}>
               <FieldLabel htmlFor="email">Email</FieldLabel>
               <Input
@@ -83,12 +89,22 @@ export function SignInForm() {
                 placeholder="you@example.com"
                 {...form.register("email")}
               />
-              <FieldDescription>Use the email you registered with.</FieldDescription>
+              <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>
+              <div className="flex items-center">
+                <FieldLabel htmlFor="password">Password</FieldLabel>
+                <Link
+                  className="ml-auto text-sm underline-offset-4 hover:underline"
+                  href="/forgot-password"
+                >
+                  Forgot password?
+                </Link>
+              </div>
               <Input
                 id="password"
                 type="password"
@@ -99,34 +115,32 @@ export function SignInForm() {
               />
               <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}
+            {authError ? (
+              <Alert variant="destructive">
+                <CircleAlert />
+                <AlertDescription>{authError}</AlertDescription>
+              </Alert>
+            ) : null}
 
-          <Button className="w-full" type="submit" disabled={isPending}>
-            {isPending ? (
-              <>
-                <LoaderCircle className="mr-2 size-4 animate-spin" />
-                Signing in
-              </>
-            ) : (
-              "Login"
-            )}
-          </Button>
+            <Field>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? (
+                  <>
+                    <Spinner data-icon="inline-start" />
+                    Signing in
+                  </>
+                ) : (
+                  "Login"
+                )}
+              </Button>
+              <FieldDescription className="text-center">
+                Need an account? <Link href="/sign-up">Signup</Link>
+              </FieldDescription>
+            </Field>
+          </FieldGroup>
         </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>
   );
 }

package/templates/modules/auth/nextjs/components/auth/sign-out-button.tsx

@@ -2,10 +2,11 @@
 
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { LoaderCircle, LogOut } from "lucide-react";
+import { LogOut } from "lucide-react";
 
 import { authClient } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
 
 export function SignOutButton() {
   const router = useRouter();
@@ -13,7 +14,7 @@ export function SignOutButton() {
   const [error, setError] = useState<string | null>(null);
 
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col items-start gap-2">
       <Button
         variant="outline"
         onClick={() => {
@@ -34,17 +35,17 @@ export function SignOutButton() {
       >
         {isPending ? (
           <>
-            <LoaderCircle className="mr-2 size-4 animate-spin" />
+            <Spinner data-icon="inline-start" />
             Signing out
           </>
         ) : (
           <>
-            <LogOut className="mr-2 size-4" />
+            <LogOut data-icon="inline-start" />
             Sign out
           </>
         )}
       </Button>
-      {error ? <p className="text-sm text-rose-600">{error}</p> : null}
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
     </div>
   );
 }

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

@@ -4,7 +4,7 @@ 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 { CircleAlert } from "lucide-react";
 import { useForm } from "react-hook-form";
 
 import { authClient } from "@/lib/auth-client";
@@ -12,13 +12,14 @@ import {
   getAuthErrorMessage,
   signUpSchema,
   type SignUpValues,
+  type SocialProvider,
 } 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";
@@ -30,8 +31,11 @@ import {
   FieldLabel,
 } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
 
-export function SignUpForm() {
+import { SocialButtons } from "./social-buttons";
+
+export function SignUpForm({ providers }: { providers: SocialProvider[] }) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [authError, setAuthError] = useState<string | null>(null);
@@ -52,6 +56,8 @@ export function SignUpForm() {
         name: values.name,
         email: values.email,
         password: values.password,
+        // Where the link in the verification email leads after confirming
+        callbackURL: "/dashboard",
       });
 
       if (result.error) {
@@ -65,8 +71,8 @@ export function SignUpForm() {
   });
 
   return (
-    <Card className="border-white/80 bg-white/90 shadow-2xl shadow-slate-200/70 backdrop-blur">
-      <CardHeader className="space-y-2">
+    <Card>
+      <CardHeader>
         <CardTitle>Create your account</CardTitle>
         <CardDescription>
           Start with a simple email and password sign-up flow powered by Better
@@ -74,8 +80,10 @@ export function SignUpForm() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form className="space-y-6" onSubmit={onSubmit} noValidate>
+        <form onSubmit={onSubmit} noValidate>
           <FieldGroup>
+            <SocialButtons providers={providers} />
+
             <Field data-invalid={Boolean(form.formState.errors.name)}>
               <FieldLabel htmlFor="name">Full name</FieldLabel>
               <Input
@@ -119,34 +127,32 @@ export function SignUpForm() {
               </FieldDescription>
               <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}
+            {authError ? (
+              <Alert variant="destructive">
+                <CircleAlert />
+                <AlertDescription>{authError}</AlertDescription>
+              </Alert>
+            ) : null}
 
-          <Button className="w-full" type="submit" disabled={isPending}>
-            {isPending ? (
-              <>
-                <LoaderCircle className="mr-2 size-4 animate-spin" />
-                Creating account
-              </>
-            ) : (
-              "Signup"
-            )}
-          </Button>
+            <Field>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? (
+                  <>
+                    <Spinner data-icon="inline-start" />
+                    Creating account
+                  </>
+                ) : (
+                  "Signup"
+                )}
+              </Button>
+              <FieldDescription className="text-center">
+                Already have an account? <Link href="/sign-in">Login</Link>
+              </FieldDescription>
+            </Field>
+          </FieldGroup>
         </form>
       </CardContent>
-      <CardFooter className="justify-center">
-        <p className="text-sm text-slate-600">
-          Already have an account?{" "}
-          <Link className="font-medium text-sky-700 hover:text-sky-800" href="/sign-in">
-            Login
-          </Link>
-        </p>
-      </CardFooter>
     </Card>
   );
 }

package/templates/modules/auth/nextjs/components/auth/social-buttons.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useTransition } from "react";
+
+import { authClient } from "@/lib/auth-client";
+import { getAuthErrorMessage, type SocialProvider } from "@/lib/auth-schema";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldSeparator } from "@/components/ui/field";
+import { Spinner } from "@/components/ui/spinner";
+
+const PROVIDER_LABELS: Record<SocialProvider, string> = {
+  github: "GitHub",
+  google: "Google",
+};
+
+// One button per provider turned on in lib/auth.ts; renders nothing when
+// GitHub and Google sign-in are both off
+export function SocialButtons({ providers }: { providers: SocialProvider[] }) {
+  const [isPending, startTransition] = useTransition();
+  // The provider whose button was clicked, for its "Redirecting" label
+  const [chosen, setChosen] = useState<SocialProvider | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  if (providers.length === 0) {
+    return null;
+  }
+
+  function signIn(provider: SocialProvider) {
+    setError(null);
+    setChosen(provider);
+    startTransition(async () => {
+      // Redirects to the provider; the user comes back to the dashboard
+      const result = await authClient.signIn.social({
+        provider,
+        callbackURL: "/dashboard",
+        errorCallbackURL: "/sign-in",
+      });
+
+      if (result.error) {
+        setError(getAuthErrorMessage(result.error));
+      }
+    });
+  }
+
+  return (
+    <>
+      <Field data-invalid={Boolean(error)}>
+        {providers.map((provider) => (
+          <Button
+            key={provider}
+            type="button"
+            variant="outline"
+            disabled={isPending}
+            onClick={() => signIn(provider)}
+          >
+            {isPending && chosen === provider ? (
+              <>
+                <Spinner data-icon="inline-start" />
+                Redirecting
+              </>
+            ) : (
+              `Continue with ${PROVIDER_LABELS[provider]}`
+            )}
+          </Button>
+        ))}
+        {error ? <FieldError>{error}</FieldError> : null}
+      </Field>
+      <FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
+        Or continue with email
+      </FieldSeparator>
+    </>
+  );
+}