create-stackrjs 1.4.0

package/template/extras/better-auth/src/app/login/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { authClient } from "@/lib/auth-client";
+import { Alert, AuthShell, Field, FooterLinks, SubmitButton, TextLink } from "@/components/auth/ui";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const data = new FormData(event.currentTarget);
+    const { error } = await authClient.signIn.email({
+      email: String(data.get("email")),
+      password: String(data.get("password")),
+    });
+    setPending(false);
+    if (error) setError(error.message ?? "Invalid email or password.");
+    else router.push("/account");
+  }
+
+  return (
+    <AuthShell title="Sign in">
+      {error && <Alert kind="error">{error}</Alert>}
+      <form onSubmit={onSubmit}>
+        <Field label="Email" name="email" type="email" required autoComplete="email" />
+        <Field label="Password" name="password" type="password" required autoComplete="current-password" />
+        <SubmitButton disabled={pending}>{pending ? "Signing in…" : "Sign in"}</SubmitButton>
+      </form>
+      <FooterLinks>
+        <p>
+          No account? <TextLink href="/register">Create one</TextLink>
+        </p>
+      </FooterLinks>
+    </AuthShell>
+  );
+}

package/template/extras/better-auth/src/app/register/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { authClient } from "@/lib/auth-client";
+import { Alert, AuthShell, Field, FooterLinks, SubmitButton, TextLink } from "@/components/auth/ui";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const data = new FormData(event.currentTarget);
+    const { error } = await authClient.signUp.email({
+      name: String(data.get("name")),
+      email: String(data.get("email")),
+      password: String(data.get("password")),
+    });
+    setPending(false);
+    if (error) setError(error.message ?? "Could not create the account.");
+    else router.push("/account");
+  }
+
+  return (
+    <AuthShell title="Create account">
+      {error && <Alert kind="error">{error}</Alert>}
+      <form onSubmit={onSubmit}>
+        <Field label="Name" name="name" type="text" required autoComplete="name" />
+        <Field label="Email" name="email" type="email" required autoComplete="email" />
+        <Field label="Password" name="password" type="password" required minLength={8} autoComplete="new-password" />
+        <SubmitButton disabled={pending}>{pending ? "Creating…" : "Create account"}</SubmitButton>
+      </form>
+      <FooterLinks>
+        <p>
+          Already have an account? <TextLink href="/login">Sign in</TextLink>
+        </p>
+      </FooterLinks>
+    </AuthShell>
+  );
+}

package/template/extras/better-auth/src/components/auth/ui.tsx

@@ -0,0 +1,58 @@
+import type { ComponentProps, ReactNode } from "react";
+import Link from "next/link";
+
+/** Centered card shell shared by all auth pages. */
+export function AuthShell({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+      <div className="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
+        <h1 className="mb-6 text-2xl font-semibold tracking-tight">{title}</h1>
+        {children}
+      </div>
+    </main>
+  );
+}
+
+export function Field({ label, ...props }: { label: string } & ComponentProps<"input">) {
+  return (
+    <label className="mb-4 block">
+      <span className="mb-1 block text-sm font-medium text-gray-700">{label}</span>
+      <input
+        {...props}
+        className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900"
+      />
+    </label>
+  );
+}
+
+export function SubmitButton({ children, ...props }: ComponentProps<"button">) {
+  return (
+    <button
+      {...props}
+      type="submit"
+      className="w-full rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white transition hover:bg-gray-700 disabled:opacity-60"
+    >
+      {children}
+    </button>
+  );
+}
+
+export function Alert({ kind, children }: { kind: "error" | "success"; children: ReactNode }) {
+  const styles =
+    kind === "error"
+      ? "bg-red-50 text-red-700 border-red-200"
+      : "bg-green-50 text-green-700 border-green-200";
+  return <p className={`mb-4 rounded-md border px-3 py-2 text-sm ${styles}`}>{children}</p>;
+}
+
+export function FooterLinks({ children }: { children: ReactNode }) {
+  return <div className="mt-6 space-y-1 text-center text-sm text-gray-500">{children}</div>;
+}
+
+export function TextLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <Link href={href} className="font-medium text-gray-900 underline-offset-2 hover:underline">
+      {children}
+    </Link>
+  );
+}

package/template/extras/better-auth/src/lib/auth-client.ts

@@ -0,0 +1,7 @@
+import { createAuthClient } from "better-auth/react";
+
+/**
+ * Browser-side Better Auth client. Calls the `/api/auth/*` routes mounted from
+ * `src/server/auth.ts`. Use `authClient.signIn`, `signUp`, `signOut`, `useSession`.
+ */
+export const authClient = createAuthClient();

package/template/extras/better-auth/src/server/auth.ts

@@ -0,0 +1,13 @@
+import { betterAuth } from "better-auth";
+import { prismaAdapter } from "better-auth/adapters/prisma";
+import { db } from "./db";
+
+/**
+ * Better Auth server instance, backed by Prisma. Email + password is enabled so
+ * the app authenticates with no external provider keys; add social providers,
+ * plugins, etc. here. The matching client lives in `src/lib/auth-client.ts`.
+ */
+export const auth = betterAuth({
+  database: prismaAdapter(db, { provider: "postgresql" }),
+  emailAndPassword: { enabled: true },
+});

package/template/extras/clerk/middleware.ts

@@ -0,0 +1,14 @@
+import { clerkMiddleware } from "@clerk/nextjs/server";
+
+// Clerk session middleware. Add `createRouteMatcher` + `auth.protect()` here to
+// gate specific routes; by default every route is public and pages guard themselves.
+export default clerkMiddleware();
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and static files, unless found in search params.
+    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+    // Always run for API routes.
+    "/(api|trpc)(.*)",
+  ],
+};

package/template/extras/clerk/src/app/account/page.tsx

@@ -0,0 +1,30 @@
+import { redirect } from "next/navigation";
+import { currentUser } from "@clerk/nextjs/server";
+import { UserButton } from "@clerk/nextjs";
+
+// Reading the session makes this route dynamic; redirect if signed out.
+export default async function AccountPage() {
+  const user = await currentUser();
+  if (!user) redirect("/sign-in");
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center gap-6 p-8">
+      <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
+        <div className="mb-4 flex items-center justify-between">
+          <h1 className="text-2xl font-semibold tracking-tight">Your account</h1>
+          <UserButton />
+        </div>
+        <dl className="space-y-2 text-sm">
+          <div className="flex justify-between">
+            <dt className="text-gray-500">Name</dt>
+            <dd className="font-medium">{user.firstName ?? "—"}</dd>
+          </div>
+          <div className="flex justify-between">
+            <dt className="text-gray-500">Email</dt>
+            <dd className="font-medium">{user.emailAddresses[0]?.emailAddress}</dd>
+          </div>
+        </dl>
+      </div>
+    </main>
+  );
+}

package/template/extras/clerk/src/app/layout.tsx

@@ -0,0 +1,19 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { ClerkProvider } from "@clerk/nextjs";
+
+export const metadata: Metadata = {
+  title: "Stackr app",
+  description: "Generated by Stackr",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <ClerkProvider>
+      <html lang="en">
+        <body className="min-h-screen bg-gray-50 text-gray-900 antialiased">{children}</body>
+      </html>
+    </ClerkProvider>
+  );
+}

package/template/extras/clerk/src/app/page.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+
+export default function Home() {
+  return (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-6 p-8 text-center">
+      <h1 className="text-4xl font-bold tracking-tight">It works 🎉</h1>
+      <p className="text-gray-600">Authentication is wired with Clerk.</p>
+
+      <SignedOut>
+        <div className="flex gap-3">
+          <Link
+            href="/sign-in"
+            className="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-700"
+          >
+            Sign in
+          </Link>
+          <Link
+            href="/sign-up"
+            className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium transition hover:bg-gray-100"
+          >
+            Sign up
+          </Link>
+        </div>
+      </SignedOut>
+
+      <SignedIn>
+        <div className="flex items-center gap-3">
+          <Link
+            href="/account"
+            className="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-700"
+          >
+            Your account
+          </Link>
+          <UserButton />
+        </div>
+      </SignedIn>
+    </main>
+  );
+}

package/template/extras/clerk/src/app/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,9 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function SignInPage() {
+  return (
+    <main className="flex min-h-screen items-center justify-center p-4">
+      <SignIn />
+    </main>
+  );
+}

package/template/extras/clerk/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,9 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function SignUpPage() {
+  return (
+    <main className="flex min-h-screen items-center justify-center p-4">
+      <SignUp />
+    </main>
+  );
+}

package/template/extras/dashboard/src/app/dashboard/page.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getSessionUser, getUserStats, SIGN_IN_PATH } from "@/server/account";
+
+/**
+ * Protected dashboard. Re-checks the session server-side (safe even if the route
+ * isn't covered by middleware) and shows a few live stats. Auth + data come from
+ * the per-provider `@/server/account` adapter, so this page is identical for every
+ * authentication option.
+ */
+export default async function DashboardPage() {
+  const user = await getSessionUser();
+  if (!user) redirect(SIGN_IN_PATH);
+
+  const { users, sessions } = await getUserStats();
+
+  const stats: { label: string; value: string | number }[] = [
+    { label: "Users", value: users },
+    { label: "Active sessions", value: sessions ?? "—" },
+    { label: "Your role", value: user.role },
+  ];
+
+  return (
+    <main className="mx-auto max-w-4xl p-8">
+      <header className="mb-8">
+        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+        <p className="text-sm text-gray-500">Signed in as {user.name ?? user.email}</p>
+      </header>
+
+      <section className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {stats.map((stat) => (
+          <div key={stat.label} className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+            <dt className="text-sm text-gray-500">{stat.label}</dt>
+            <dd className="mt-2 text-3xl font-semibold tabular-nums">{stat.value}</dd>
+          </div>
+        ))}
+      </section>
+
+      <p className="mt-8 text-sm text-gray-500">
+        Edit this page in <code>src/app/dashboard/page.tsx</code>. Manage your{" "}
+        <Link href="/account" className="font-medium text-gray-900 underline-offset-2 hover:underline">
+          account
+        </Link>
+        .
+      </p>
+    </main>
+  );
+}

package/template/extras/databases/mongodb/docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  db:
+    image: mongo:7
+    restart: unless-stopped
+    environment:
+      MONGO_INITDB_DATABASE: app
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo_data:/data/db
+
+volumes:
+  mongo_data:

package/template/extras/databases/mysql/docker-compose.yml

@@ -0,0 +1,14 @@
+services:
+  db:
+    image: mysql:8
+    restart: unless-stopped
+    environment:
+      MYSQL_ROOT_PASSWORD: root
+      MYSQL_DATABASE: app
+    ports:
+      - "3306:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+
+volumes:
+  mysql_data:

package/template/extras/databases/postgres/docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  db:
+    image: postgres:16-alpine
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: app
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+
+volumes:
+  postgres_data:

package/template/extras/drizzle/mysql/drizzle.config.ts

@@ -0,0 +1,9 @@
+import "dotenv/config";
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/server/schema.ts",
+  out: "./drizzle",
+  dialect: "mysql",
+  dbCredentials: { url: process.env.DATABASE_URL! },
+});

package/template/extras/drizzle/mysql/src/server/db.ts

@@ -0,0 +1,11 @@
+import { drizzle } from "drizzle-orm/mysql2";
+import mysql from "mysql2/promise";
+import * as schema from "./schema";
+
+// Reuse a single pool across hot reloads in development.
+const globalForDb = globalThis as unknown as { pool?: mysql.Pool };
+
+const pool = globalForDb.pool ?? mysql.createPool(process.env.DATABASE_URL!);
+if (process.env.NODE_ENV !== "production") globalForDb.pool = pool;
+
+export const db = drizzle(pool, { schema, mode: "default" });

package/template/extras/drizzle/mysql/src/server/schema.ts

@@ -0,0 +1,17 @@
+import { mysqlEnum, mysqlTable, timestamp, varchar } from "drizzle-orm/mysql-core";
+
+export const users = mysqlTable("users", {
+  id: varchar("id", { length: 255 }).primaryKey(),
+  name: varchar("name", { length: 255 }),
+  email: varchar("email", { length: 255 }).notNull().unique(),
+  passwordHash: varchar("password_hash", { length: 255 }),
+  role: mysqlEnum("role", ["USER", "ADMIN"]).notNull().default("USER"),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+});
+
+// Issued for password resets (and reusable for email verification).
+export const verificationTokens = mysqlTable("verification_tokens", {
+  identifier: varchar("identifier", { length: 255 }).notNull(),
+  token: varchar("token", { length: 255 }).notNull().unique(),
+  expires: timestamp("expires").notNull(),
+});

package/template/extras/drizzle/postgres/drizzle.config.ts

@@ -0,0 +1,9 @@
+import "dotenv/config";
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/server/schema.ts",
+  out: "./drizzle",
+  dialect: "postgresql",
+  dbCredentials: { url: process.env.DATABASE_URL! },
+});

package/template/extras/drizzle/postgres/src/server/db.ts

@@ -0,0 +1,11 @@
+import { drizzle } from "drizzle-orm/node-postgres";
+import { Pool } from "pg";
+import * as schema from "./schema";
+
+// Reuse a single pool across hot reloads in development.
+const globalForDb = globalThis as unknown as { pool?: Pool };
+
+const pool = globalForDb.pool ?? new Pool({ connectionString: process.env.DATABASE_URL });
+if (process.env.NODE_ENV !== "production") globalForDb.pool = pool;
+
+export const db = drizzle(pool, { schema });

package/template/extras/drizzle/postgres/src/server/schema.ts

@@ -0,0 +1,20 @@
+import { pgEnum, pgTable, text, timestamp } from "drizzle-orm/pg-core";
+
+/** Application roles, mirrored by the Auth.js `Role` type in `roles.ts`. */
+export const roleEnum = pgEnum("role", ["USER", "ADMIN"]);
+
+export const users = pgTable("users", {
+  id: text("id").primaryKey(),
+  name: text("name"),
+  email: text("email").notNull().unique(),
+  passwordHash: text("password_hash"),
+  role: roleEnum("role").notNull().default("USER"),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+});
+
+// Issued for password resets (and reusable for email verification).
+export const verificationTokens = pgTable("verification_tokens", {
+  identifier: text("identifier").notNull(),
+  token: text("token").notNull().unique(),
+  expires: timestamp("expires").notNull(),
+});

package/template/extras/landing/src/app/page.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+
+const features = [
+  { title: "Batteries included", body: "Database, auth and UI wired together and ready to run." },
+  { title: "Type-safe", body: "End-to-end TypeScript with strict mode on from the first commit." },
+  { title: "Yours to shape", body: "Plain Next.js App Router — no magic, edit anything." },
+];
+
+// Marketing landing page. The CTA points at /account, which your auth setup
+// redirects to the right sign-in page; adjust the links to taste.
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <section className="mx-auto flex max-w-3xl flex-1 flex-col items-center justify-center gap-6 px-6 py-24 text-center">
+        <span className="rounded-full border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600">
+          Built with Stackr
+        </span>
+        <h1 className="text-5xl font-bold tracking-tight sm:text-6xl">
+          Ship your idea, faster.
+        </h1>
+        <p className="max-w-xl text-lg text-gray-600">
+          A runnable full-stack Next.js starter with the boring parts already done — so you can
+          build the part that matters.
+        </p>
+        <div className="flex gap-3">
+          <Link
+            href="/account"
+            className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700"
+          >
+            Get started
+          </Link>
+          <a
+            href="#features"
+            className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium transition hover:bg-gray-100"
+          >
+            Learn more
+          </a>
+        </div>
+      </section>
+
+      <section id="features" className="border-t border-gray-200 bg-white">
+        <div className="mx-auto grid max-w-4xl grid-cols-1 gap-6 px-6 py-16 sm:grid-cols-3">
+          {features.map((feature) => (
+            <div key={feature.title} className="rounded-xl border border-gray-200 p-6">
+              <h2 className="mb-2 text-lg font-semibold">{feature.title}</h2>
+              <p className="text-sm text-gray-600">{feature.body}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}

package/template/extras/mongoose/src/server/db.ts

@@ -0,0 +1,12 @@
+import mongoose from "mongoose";
+
+const uri = process.env.DATABASE_URL ?? "mongodb://localhost:27017/app";
+
+// Cache the connection promise across hot reloads so we open a single connection.
+const globalForMongoose = globalThis as unknown as { conn?: Promise<typeof mongoose> };
+
+/** Ensure a single Mongoose connection; call before any query (e.g. in actions). */
+export function dbConnect(): Promise<typeof mongoose> {
+  globalForMongoose.conn ??= mongoose.connect(uri);
+  return globalForMongoose.conn;
+}

package/template/extras/mongoose/src/server/models.ts

@@ -0,0 +1,25 @@
+import { Schema, model, models, type InferSchemaType } from "mongoose";
+
+const userSchema = new Schema(
+  {
+    name: { type: String },
+    email: { type: String, required: true, unique: true },
+    passwordHash: { type: String },
+    role: { type: String, enum: ["USER", "ADMIN"], default: "USER" },
+  },
+  { timestamps: true },
+);
+
+export type UserDoc = InferSchemaType<typeof userSchema>;
+
+// `models.X ?? model(...)` avoids "OverwriteModelError" on hot reload.
+export const User = models.User ?? model("User", userSchema);
+
+const verificationTokenSchema = new Schema({
+  identifier: { type: String, required: true },
+  token: { type: String, required: true, unique: true },
+  expires: { type: Date, required: true },
+});
+
+export const VerificationToken =
+  models.VerificationToken ?? model("VerificationToken", verificationTokenSchema);

package/template/extras/nextauth/middleware.ts

@@ -0,0 +1,11 @@
+import NextAuth from "next-auth";
+import { authConfig } from "@/server/auth.config";
+
+// Edge-safe auth middleware. Uses the JWT session to gate routes via the
+// `authorized` callback in auth.config.ts.
+export const { auth: middleware } = NextAuth(authConfig);
+
+export const config = {
+  // Run on everything except static assets and the auth API itself.
+  matcher: ["/((?!api/auth|_next/static|_next/image|favicon.ico).*)"],
+};

package/template/extras/nextauth/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from "@/server/auth";
+
+export const { GET, POST } = handlers;

package/template/extras/nextauth/src/server/auth.config.ts

@@ -0,0 +1,39 @@
+import type { NextAuthConfig } from "next-auth";
+import type { Role } from "./roles";
+
+/**
+ * Edge-safe Auth.js configuration. This file must NOT import the database or
+ * bcrypt so it can run in the middleware (edge) runtime. The Credentials
+ * provider and Prisma adapter live in `auth.ts` (Node runtime).
+ */
+export const authConfig = {
+  pages: {
+    signIn: "/login",
+  },
+  // Providers are added in auth.ts; the middleware only needs to read the JWT.
+  providers: [],
+  session: { strategy: "jwt" },
+  callbacks: {
+    /** Route guard evaluated by the middleware. */
+    authorized({ auth, request: { nextUrl } }) {
+      const isLoggedIn = !!auth?.user;
+      const isProtected = nextUrl.pathname.startsWith("/account");
+      if (isProtected) return isLoggedIn;
+      return true;
+    },
+    jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+        token.role = (user as { role?: Role }).role;
+      }
+      return token;
+    },
+    session({ session, token }) {
+      if (session.user) {
+        if (typeof token.id === "string") session.user.id = token.id;
+        session.user.role = token.role as Role | undefined;
+      }
+      return session;
+    },
+  },
+} satisfies NextAuthConfig;

package/template/extras/nextauth/src/server/roles.ts

@@ -0,0 +1,5 @@
+/**
+ * Application roles. Mirrors the Prisma `Role` enum / Drizzle `role` column, but
+ * lives here so the Auth.js config stays independent of the chosen ORM.
+ */
+export type Role = "USER" | "ADMIN";