better-ts-stack 1.0.8 → 1.1.1

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

@@ -0,0 +1,153 @@
+"use client";
+
+import { Link, useNavigate } from "@tanstack/react-router";
+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,
+  signUpSchema,
+  type SignUpValues,
+} 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 SignUpForm() {
+  const navigate = useNavigate();
+  const [isPending, startTransition] = useTransition();
+  const [authError, setAuthError] = useState<string | null>(null);
+  const form = useForm<SignUpValues>({
+    resolver: zodResolver(signUpSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    setAuthError(null);
+
+    startTransition(async () => {
+      const result = await authClient.signUp.email({
+        name: values.name,
+        email: values.email,
+        password: values.password,
+      });
+
+      if (result.error) {
+        setAuthError(getAuthErrorMessage(result.error));
+        return;
+      }
+
+      navigate({ to: "/dashboard" });
+    });
+  });
+
+  return (
+    <Card className="border-white/80 bg-white/90 shadow-2xl shadow-slate-200/70 backdrop-blur">
+      <CardHeader className="space-y-2">
+        <CardTitle>Create your account</CardTitle>
+        <CardDescription>
+          Start with a simple email and password sign-up flow powered by Better
+          Auth.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="space-y-6" onSubmit={onSubmit} noValidate>
+          <FieldGroup>
+            <Field data-invalid={Boolean(form.formState.errors.name)}>
+              <FieldLabel htmlFor="name">Full name</FieldLabel>
+              <Input
+                id="name"
+                autoComplete="name"
+                aria-invalid={Boolean(form.formState.errors.name)}
+                placeholder="Ada Lovelace"
+                {...form.register("name")}
+              />
+              <FieldError errors={[form.formState.errors.name]} />
+            </Field>
+
+            <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>
+                This email will be used for future sign-ins.
+              </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="new-password"
+                aria-invalid={Boolean(form.formState.errors.password)}
+                placeholder="Create a strong password"
+                {...form.register("password")}
+              />
+              <FieldDescription>
+                Use at least 8 characters for the generated starter flow.
+              </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}
+
+          <Button className="w-full" type="submit" disabled={isPending}>
+            {isPending ? (
+              <>
+                <LoaderCircle className="mr-2 size-4 animate-spin" />
+                Creating account
+              </>
+            ) : (
+              "Signup"
+            )}
+          </Button>
+        </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"
+            to="/sign-in"
+          >
+            Login
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/templates/modules/auth/tanstack/src/lib/auth-client.ts

@@ -0,0 +1,3 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient();

package/templates/modules/auth/tanstack/src/lib/auth-functions.ts

@@ -0,0 +1,12 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeaders } from "@tanstack/react-start/server";
+
+import { auth } from "./auth";
+
+export const getSession = createServerFn({ method: "GET" }).handler(async () => {
+  const session = await auth.api.getSession({
+    headers: getRequestHeaders(),
+  });
+
+  return session;
+});

package/templates/modules/auth/tanstack/src/lib/auth-schema.ts

@@ -0,0 +1,39 @@
+import { z } from "zod";
+
+export const signInSchema = z.object({
+  email: z.string().email("Enter a valid email address."),
+  password: z.string().min(8, "Password must be at least 8 characters."),
+});
+
+export const signUpSchema = signInSchema.extend({
+  name: z
+    .string()
+    .trim()
+    .min(2, "Name must be at least 2 characters.")
+    .max(50, "Name must be 50 characters or fewer."),
+});
+
+export type SignInValues = z.infer<typeof signInSchema>;
+export type SignUpValues = z.infer<typeof signUpSchema>;
+
+export function getAuthErrorMessage(error: unknown) {
+  if (!error) {
+    return "Something went wrong. Please try again.";
+  }
+
+  if (typeof error === "string") {
+    return error;
+  }
+
+  if (typeof error === "object") {
+    if ("message" in error && typeof error.message === "string") {
+      return error.message;
+    }
+
+    if ("statusText" in error && typeof error.statusText === "string") {
+      return error.statusText;
+    }
+  }
+
+  return "Something went wrong. Please try again.";
+}

package/templates/modules/auth/tanstack/src/lib/auth.ts.hbs

@@ -0,0 +1,38 @@
+import "dotenv/config";
+import { betterAuth } from "better-auth";
+import { tanstackStartCookies } from "better-auth/tanstack-start";
+{{#if (eq database 'prisma')}}
+import { prismaAdapter } from "better-auth/adapters/prisma";
+import client from "./prisma";
+{{/if}}
+{{#if (eq database 'drizzle')}}
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { db } from "./db";
+{{/if}}
+{{#if (eq database 'mongoose')}}
+import { mongodbAdapter } from "better-auth/adapters/mongodb";
+import { MongoClient } from "mongodb";
+
+const client = new MongoClient(process.env.MONGODB_URI!);
+const db = client.db();
+{{/if}}
+
+export const auth = betterAuth({
+  {{#if (eq database 'prisma')}}
+  database: prismaAdapter(client, { provider: "postgresql" }),
+  {{/if}}
+  {{#if (eq database 'drizzle')}}
+  database: drizzleAdapter(db, { provider: "pg" }),
+  {{/if}}
+  {{#if (eq database 'mongoose')}}
+  // Transactions require a replica set. Create user/session/account/verification
+  // collections before the first sign-up; see the database setup documentation.
+  database: mongodbAdapter(db, { client }),
+  {{/if}}
+  emailAndPassword: {
+    enabled: true,
+  },
+  plugins: [tanstackStartCookies()],
+  secret: process.env.BETTER_AUTH_SECRET,
+  baseURL: process.env.BETTER_AUTH_URL,
+});

package/templates/modules/auth/tanstack/src/routeTree.gen.ts

@@ -0,0 +1,140 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as DashboardRouteImport } from './routes/dashboard'
+import { Route as SignInRouteImport } from './routes/sign-in'
+import { Route as SignUpRouteImport } from './routes/sign-up'
+import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const DashboardRoute = DashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SignInRoute = SignInRouteImport.update({
+  id: '/sign-in',
+  path: '/sign-in',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SignUpRoute = SignUpRouteImport.update({
+  id: '/sign-up',
+  path: '/sign-up',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
+  id: '/api/auth/$',
+  path: '/api/auth/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/dashboard': typeof DashboardRoute
+  '/sign-in': typeof SignInRoute
+  '/sign-up': typeof SignUpRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/dashboard': typeof DashboardRoute
+  '/sign-in': typeof SignInRoute
+  '/sign-up': typeof SignUpRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/dashboard': typeof DashboardRoute
+  '/sign-in': typeof SignInRoute
+  '/sign-up': typeof SignUpRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/dashboard' | '/sign-in' | '/sign-up' | '/api/auth/$'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/dashboard' | '/sign-in' | '/sign-up' | '/api/auth/$'
+  id: '__root__' | '/' | '/dashboard' | '/sign-in' | '/sign-up' | '/api/auth/$'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  DashboardRoute: typeof DashboardRoute
+  SignInRoute: typeof SignInRoute
+  SignUpRoute: typeof SignUpRoute
+  ApiAuthSplatRoute: typeof ApiAuthSplatRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/sign-in': {
+      id: '/sign-in'
+      path: '/sign-in'
+      fullPath: '/sign-in'
+      preLoaderRoute: typeof SignInRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/sign-up': {
+      id: '/sign-up'
+      path: '/sign-up'
+      fullPath: '/sign-up'
+      preLoaderRoute: typeof SignUpRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/auth/$': {
+      id: '/api/auth/$'
+      path: '/api/auth/$'
+      fullPath: '/api/auth/$'
+      preLoaderRoute: typeof ApiAuthSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  DashboardRoute: DashboardRoute,
+  SignInRoute: SignInRoute,
+  SignUpRoute: SignUpRoute,
+  ApiAuthSplatRoute: ApiAuthSplatRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/templates/modules/auth/tanstack/src/routes/api/auth/$.ts

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { auth } from "~/lib/auth";
+
+export const Route = createFileRoute("/api/auth/$")({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        return await auth.handler(request);
+      },
+      POST: async ({ request }: { request: Request }) => {
+        return await auth.handler(request);
+      },
+    },
+  },
+});

package/templates/modules/auth/tanstack/src/routes/dashboard.tsx

@@ -0,0 +1,111 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
+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 { getSession } from "~/lib/auth-functions";
+import { cn } from "~/lib/utils";
+
+export const Route = createFileRoute("/dashboard")({
+  beforeLoad: async () => {
+    const session = await getSession();
+
+    if (!session) {
+      throw redirect({ to: "/sign-in" });
+    }
+
+    return { user: session.user };
+  },
+  component: Dashboard,
+});
+
+function Dashboard() {
+  const user = Route.useRouteContext({ select: (ctx) => ctx.user });
+
+  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 {user.name}
+              </h1>
+              <p className="text-sm text-slate-600">{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 route guard calls{" "}
+                <code className="font-mono text-slate-900">getSession()</code> in
+                <code className="font-mono text-slate-900"> beforeLoad</code>,
+                which reads the cookie headers server-side via{" "}
+                <code className="font-mono text-slate-900">
+                  auth.api.getSession
+                </code>{" "}
+                on every render and navigation.
+              </p>
+              <p>
+                That keeps route protection aligned with Better Auth&apos;s
+                TanStack Start 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
+                to="/"
+                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/tanstack/src/routes/sign-in.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+import { SignInForm } from "~/components/auth/sign-in-form";
+import { getSession } from "~/lib/auth-functions";
+
+export const Route = createFileRoute("/sign-in")({
+  beforeLoad: async () => {
+    const session = await getSession();
+
+    if (session) {
+      throw redirect({ to: "/dashboard" });
+    }
+  },
+  component: SignInPage,
+});
+
+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">
+            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/tanstack/src/routes/sign-up.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+import { SignUpForm } from "~/components/auth/sign-up-form";
+import { getSession } from "~/lib/auth-functions";
+
+export const Route = createFileRoute("/sign-up")({
+  beforeLoad: async () => {
+    const session = await getSession();
+
+    if (session) {
+      throw redirect({ to: "/dashboard" });
+    }
+  },
+  component: SignUpPage,
+});
+
+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">
+            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>
+  );
+}