create-stackrjs 1.4.0

package/template/extras/auth-pages/src/app/page.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { auth } from "@/server/auth";
+
+export default async function Home() {
+  const session = await auth();
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-8 p-8 text-center">
+      <div className="space-y-3">
+        <h1 className="text-4xl font-bold tracking-tight">Welcome 👋</h1>
+        <p className="text-gray-600">
+          This app was generated by Stackr with a working authentication portal.
+        </p>
+      </div>
+
+      {session?.user ? (
+        <div className="flex flex-col items-center gap-3">
+          <p className="text-sm text-gray-500">
+            Signed in as <span className="font-medium text-gray-900">{session.user.email}</span>
+          </p>
+          <Link
+            href="/account"
+            className="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700"
+          >
+            Go to account
+          </Link>
+        </div>
+      ) : (
+        <div className="flex gap-3">
+          <Link
+            href="/login"
+            className="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700"
+          >
+            Sign in
+          </Link>
+          <Link
+            href="/register"
+            className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100"
+          >
+            Create account
+          </Link>
+        </div>
+      )}
+    </main>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { registerAction } from "@/server/actions";
+import { Alert, AuthShell, Field, FooterLinks, SubmitButton, TextLink } from "@/components/auth/ui";
+
+export default async function RegisterPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const sp = await searchParams;
+
+  return (
+    <AuthShell title="Create account">
+      {sp.error && <Alert kind="error">{sp.error}</Alert>}
+
+      <form action={registerAction}>
+        <Field label="Name" name="name" type="text" autoComplete="name" required />
+        <Field label="Email" name="email" type="email" autoComplete="email" required />
+        <Field
+          label="Password"
+          name="password"
+          type="password"
+          autoComplete="new-password"
+          minLength={8}
+          required
+        />
+        <SubmitButton>Create account</SubmitButton>
+      </form>
+
+      <FooterLinks>
+        <p>
+          Already have an account? <TextLink href="/login">Sign in</TextLink>
+        </p>
+      </FooterLinks>
+    </AuthShell>
+  );
+}

package/template/extras/auth-pages/src/app/reset-password/page.tsx

@@ -0,0 +1,49 @@
+import { resetPasswordAction } from "@/server/actions";
+import { Alert, AuthShell, Field, FooterLinks, SubmitButton, TextLink } from "@/components/auth/ui";
+
+export default async function ResetPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string; error?: string }>;
+}) {
+  const sp = await searchParams;
+  const token = sp.token ?? "";
+
+  if (!token) {
+    return (
+      <AuthShell title="Reset password">
+        <Alert kind="error">Missing reset token. Request a new link.</Alert>
+        <FooterLinks>
+          <p>
+            <TextLink href="/forgot-password">Request reset link</TextLink>
+          </p>
+        </FooterLinks>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell title="Choose a new password">
+      {sp.error && <Alert kind="error">{sp.error}</Alert>}
+
+      <form action={resetPasswordAction}>
+        <input type="hidden" name="token" value={token} />
+        <Field
+          label="New password"
+          name="password"
+          type="password"
+          autoComplete="new-password"
+          minLength={8}
+          required
+        />
+        <SubmitButton>Update password</SubmitButton>
+      </form>
+
+      <FooterLinks>
+        <p>
+          <TextLink href="/login">Back to sign in</TextLink>
+        </p>
+      </FooterLinks>
+    </AuthShell>
+  );
+}

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

@@ -0,0 +1,57 @@
+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 }: { children: ReactNode }) {
+  return (
+    <button
+      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"
+    >
+      {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/auth-pages-drizzle/src/server/actions.ts

@@ -0,0 +1,122 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { randomBytes, randomUUID } from "node:crypto";
+import { AuthError } from "next-auth";
+import bcrypt from "bcryptjs";
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+import { db } from "./db";
+import { users, verificationTokens } from "./schema";
+import { signIn, signOut } from "./auth";
+
+const registerSchema = z.object({
+  name: z.string().min(1, "Name is required").max(100),
+  email: z.string().email("Enter a valid email"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+const resetSchema = z.object({
+  token: z.string().min(1),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+function err(path: string, message: string): never {
+  redirect(`${path}?error=${encodeURIComponent(message)}`);
+}
+
+/** Create an account, then sign the user in. */
+export async function registerAction(formData: FormData): Promise<void> {
+  const parsed = registerSchema.safeParse({
+    name: formData.get("name"),
+    email: formData.get("email"),
+    password: formData.get("password"),
+  });
+  if (!parsed.success) err("/register", parsed.error.issues[0]?.message ?? "Invalid input");
+
+  const { name, email, password } = parsed.data;
+
+  const [existing] = await db.select().from(users).where(eq(users.email, email)).limit(1);
+  if (existing) err("/register", "An account with this email already exists");
+
+  const passwordHash = await bcrypt.hash(password, 10);
+  await db.insert(users).values({ id: randomUUID(), name, email, passwordHash });
+
+  try {
+    await signIn("credentials", { email, password, redirectTo: "/account" });
+  } catch (error) {
+    if (error instanceof AuthError) redirect("/login?reset=1");
+    throw error; // re-throw Next's redirect
+  }
+}
+
+/** Authenticate with email + password. */
+export async function loginAction(formData: FormData): Promise<void> {
+  const email = String(formData.get("email") ?? "");
+  const password = String(formData.get("password") ?? "");
+
+  try {
+    await signIn("credentials", { email, password, redirectTo: "/account" });
+  } catch (error) {
+    if (error instanceof AuthError) err("/login", "Invalid email or password");
+    throw error; // re-throw Next's redirect
+  }
+}
+
+export async function signOutAction(): Promise<void> {
+  await signOut({ redirectTo: "/login" });
+}
+
+/**
+ * Issue a password-reset token. No mailer is configured yet, so the reset link
+ * is logged to the server console (dev mode). We always report success to avoid
+ * revealing which emails exist.
+ */
+export async function requestPasswordResetAction(formData: FormData): Promise<void> {
+  const parsed = z.string().email().safeParse(formData.get("email"));
+  if (!parsed.success) err("/forgot-password", "Enter a valid email");
+
+  const [user] = await db.select().from(users).where(eq(users.email, parsed.data)).limit(1);
+  if (user) {
+    const token = randomBytes(32).toString("hex");
+    const expires = new Date(Date.now() + 1000 * 60 * 30); // 30 minutes
+    await db.insert(verificationTokens).values({ identifier: parsed.data, token, expires });
+
+    const base = process.env.AUTH_URL ?? "http://localhost:3000";
+    console.log(`\n[Stackr] Password reset link for ${parsed.data}:\n${base}/reset-password?token=${token}\n`);
+  }
+
+  redirect("/forgot-password?sent=1");
+}
+
+/** Consume a reset token and set a new password. */
+export async function resetPasswordAction(formData: FormData): Promise<void> {
+  const parsed = resetSchema.safeParse({
+    token: formData.get("token"),
+    password: formData.get("password"),
+  });
+  if (!parsed.success) {
+    const token = String(formData.get("token") ?? "");
+    redirect(
+      `/reset-password?token=${encodeURIComponent(token)}&error=${encodeURIComponent(
+        parsed.error.issues[0]?.message ?? "Invalid input",
+      )}`,
+    );
+  }
+
+  const { token, password } = parsed.data;
+  const [record] = await db
+    .select()
+    .from(verificationTokens)
+    .where(eq(verificationTokens.token, token))
+    .limit(1);
+  if (!record || record.expires < new Date()) {
+    err("/reset-password", "This reset link is invalid or has expired");
+  }
+
+  const passwordHash = await bcrypt.hash(password, 10);
+  await db.update(users).set({ passwordHash }).where(eq(users.email, record.identifier));
+  await db.delete(verificationTokens).where(eq(verificationTokens.token, token));
+
+  redirect("/login?reset=1");
+}

package/template/extras/auth-pages-mongoose/src/server/actions.ts

@@ -0,0 +1,121 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { randomBytes } from "node:crypto";
+import { AuthError } from "next-auth";
+import bcrypt from "bcryptjs";
+import { z } from "zod";
+import { dbConnect } from "./db";
+import { User, VerificationToken } from "./models";
+import { signIn, signOut } from "./auth";
+
+const registerSchema = z.object({
+  name: z.string().min(1, "Name is required").max(100),
+  email: z.string().email("Enter a valid email"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+const resetSchema = z.object({
+  token: z.string().min(1),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+function err(path: string, message: string): never {
+  redirect(`${path}?error=${encodeURIComponent(message)}`);
+}
+
+/** Create an account, then sign the user in. */
+export async function registerAction(formData: FormData): Promise<void> {
+  const parsed = registerSchema.safeParse({
+    name: formData.get("name"),
+    email: formData.get("email"),
+    password: formData.get("password"),
+  });
+  if (!parsed.success) err("/register", parsed.error.issues[0]?.message ?? "Invalid input");
+
+  const { name, email, password } = parsed.data;
+
+  await dbConnect();
+  if (await User.findOne({ email })) {
+    err("/register", "An account with this email already exists");
+  }
+
+  const passwordHash = await bcrypt.hash(password, 10);
+  await User.create({ name, email, passwordHash });
+
+  try {
+    await signIn("credentials", { email, password, redirectTo: "/account" });
+  } catch (error) {
+    if (error instanceof AuthError) redirect("/login?reset=1");
+    throw error; // re-throw Next's redirect
+  }
+}
+
+/** Authenticate with email + password. */
+export async function loginAction(formData: FormData): Promise<void> {
+  const email = String(formData.get("email") ?? "");
+  const password = String(formData.get("password") ?? "");
+
+  try {
+    await signIn("credentials", { email, password, redirectTo: "/account" });
+  } catch (error) {
+    if (error instanceof AuthError) err("/login", "Invalid email or password");
+    throw error; // re-throw Next's redirect
+  }
+}
+
+export async function signOutAction(): Promise<void> {
+  await signOut({ redirectTo: "/login" });
+}
+
+/**
+ * Issue a password-reset token. No mailer is configured yet, so the reset link
+ * is logged to the server console (dev mode). We always report success to avoid
+ * revealing which emails exist.
+ */
+export async function requestPasswordResetAction(formData: FormData): Promise<void> {
+  const parsed = z.string().email().safeParse(formData.get("email"));
+  if (!parsed.success) err("/forgot-password", "Enter a valid email");
+
+  await dbConnect();
+  const user = await User.findOne({ email: parsed.data });
+  if (user) {
+    const token = randomBytes(32).toString("hex");
+    const expires = new Date(Date.now() + 1000 * 60 * 30); // 30 minutes
+    await VerificationToken.create({ identifier: parsed.data, token, expires });
+
+    const base = process.env.AUTH_URL ?? "http://localhost:3000";
+    console.log(`\n[Stackr] Password reset link for ${parsed.data}:\n${base}/reset-password?token=${token}\n`);
+  }
+
+  redirect("/forgot-password?sent=1");
+}
+
+/** Consume a reset token and set a new password. */
+export async function resetPasswordAction(formData: FormData): Promise<void> {
+  const parsed = resetSchema.safeParse({
+    token: formData.get("token"),
+    password: formData.get("password"),
+  });
+  if (!parsed.success) {
+    const token = String(formData.get("token") ?? "");
+    redirect(
+      `/reset-password?token=${encodeURIComponent(token)}&error=${encodeURIComponent(
+        parsed.error.issues[0]?.message ?? "Invalid input",
+      )}`,
+    );
+  }
+
+  const { token, password } = parsed.data;
+  await dbConnect();
+  const record = await VerificationToken.findOne({ token });
+  if (!record || record.expires < new Date()) {
+    err("/reset-password", "This reset link is invalid or has expired");
+  }
+
+  const passwordHash = await bcrypt.hash(password, 10);
+  await User.updateOne({ email: record.identifier }, { passwordHash });
+  await VerificationToken.deleteOne({ token });
+
+  redirect("/login?reset=1");
+}

package/template/extras/auth-pages-prisma/src/server/actions.ts

@@ -0,0 +1,117 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { randomBytes } from "node:crypto";
+import { AuthError } from "next-auth";
+import bcrypt from "bcryptjs";
+import { z } from "zod";
+import { db } from "./db";
+import { signIn, signOut } from "./auth";
+
+const registerSchema = z.object({
+  name: z.string().min(1, "Name is required").max(100),
+  email: z.string().email("Enter a valid email"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+const resetSchema = z.object({
+  token: z.string().min(1),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+function err(path: string, message: string): never {
+  redirect(`${path}?error=${encodeURIComponent(message)}`);
+}
+
+/** Create an account, then sign the user in. */
+export async function registerAction(formData: FormData): Promise<void> {
+  const parsed = registerSchema.safeParse({
+    name: formData.get("name"),
+    email: formData.get("email"),
+    password: formData.get("password"),
+  });
+  if (!parsed.success) err("/register", parsed.error.issues[0]?.message ?? "Invalid input");
+
+  const { name, email, password } = parsed.data;
+
+  if (await db.user.findUnique({ where: { email } })) {
+    err("/register", "An account with this email already exists");
+  }
+
+  const passwordHash = await bcrypt.hash(password, 10);
+  await db.user.create({ data: { name, email, passwordHash } });
+
+  try {
+    await signIn("credentials", { email, password, redirectTo: "/account" });
+  } catch (error) {
+    if (error instanceof AuthError) redirect("/login?reset=1");
+    throw error; // re-throw Next's redirect
+  }
+}
+
+/** Authenticate with email + password. */
+export async function loginAction(formData: FormData): Promise<void> {
+  const email = String(formData.get("email") ?? "");
+  const password = String(formData.get("password") ?? "");
+
+  try {
+    await signIn("credentials", { email, password, redirectTo: "/account" });
+  } catch (error) {
+    if (error instanceof AuthError) err("/login", "Invalid email or password");
+    throw error; // re-throw Next's redirect
+  }
+}
+
+export async function signOutAction(): Promise<void> {
+  await signOut({ redirectTo: "/login" });
+}
+
+/**
+ * Issue a password-reset token. No mailer is configured yet, so the reset link
+ * is logged to the server console (dev mode). We always report success to avoid
+ * revealing which emails exist.
+ */
+export async function requestPasswordResetAction(formData: FormData): Promise<void> {
+  const parsed = z.string().email().safeParse(formData.get("email"));
+  if (!parsed.success) err("/forgot-password", "Enter a valid email");
+
+  const user = await db.user.findUnique({ where: { email: parsed.data } });
+  if (user) {
+    const token = randomBytes(32).toString("hex");
+    const expires = new Date(Date.now() + 1000 * 60 * 30); // 30 minutes
+    await db.verificationToken.create({ data: { identifier: parsed.data, token, expires } });
+
+    const base = process.env.AUTH_URL ?? "http://localhost:3000";
+    console.log(`\n[Stackr] Password reset link for ${parsed.data}:\n${base}/reset-password?token=${token}\n`);
+  }
+
+  redirect("/forgot-password?sent=1");
+}
+
+/** Consume a reset token and set a new password. */
+export async function resetPasswordAction(formData: FormData): Promise<void> {
+  const parsed = resetSchema.safeParse({
+    token: formData.get("token"),
+    password: formData.get("password"),
+  });
+  if (!parsed.success) {
+    const token = String(formData.get("token") ?? "");
+    redirect(
+      `/reset-password?token=${encodeURIComponent(token)}&error=${encodeURIComponent(
+        parsed.error.issues[0]?.message ?? "Invalid input",
+      )}`,
+    );
+  }
+
+  const { token, password } = parsed.data;
+  const record = await db.verificationToken.findUnique({ where: { token } });
+  if (!record || record.expires < new Date()) {
+    err("/reset-password", "This reset link is invalid or has expired");
+  }
+
+  const passwordHash = await bcrypt.hash(password, 10);
+  await db.user.update({ where: { email: record.identifier }, data: { passwordHash } });
+  await db.verificationToken.delete({ where: { token } });
+
+  redirect("/login?reset=1");
+}

package/template/extras/better-auth/prisma/schema.prisma

@@ -0,0 +1,70 @@
+// Prisma schema generated by Stackr for Better Auth.
+// Models follow Better Auth's core schema (user / session / account / verification);
+// the `account.password` column stores the email+password credential hash.
+
+generator client {
+  provider = "prisma-client"
+  output   = "../src/generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+model User {
+  id            String    @id
+  name          String
+  email         String    @unique
+  emailVerified Boolean   @default(false)
+  image         String?
+  createdAt     DateTime  @default(now())
+  updatedAt     DateTime  @updatedAt
+  sessions      Session[]
+  accounts      Account[]
+
+  @@map("user")
+}
+
+model Session {
+  id        String   @id
+  expiresAt DateTime
+  token     String   @unique
+  ipAddress String?
+  userAgent String?
+  userId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("session")
+}
+
+model Account {
+  id                    String    @id
+  accountId             String
+  providerId            String
+  userId                String
+  user                  User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  accessToken           String?
+  refreshToken          String?
+  idToken               String?
+  accessTokenExpiresAt  DateTime?
+  refreshTokenExpiresAt DateTime?
+  scope                 String?
+  password              String?
+  createdAt             DateTime  @default(now())
+  updatedAt             DateTime  @updatedAt
+
+  @@map("account")
+}
+
+model Verification {
+  id         String    @id
+  identifier String
+  value      String
+  expiresAt  DateTime
+  createdAt  DateTime? @default(now())
+  updatedAt  DateTime? @updatedAt
+
+  @@map("verification")
+}

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

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { authClient } from "@/lib/auth-client";
+
+export default function AccountPage() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  // Client-side guard; redirect once we know there is no session.
+  useEffect(() => {
+    if (!isPending && !session) router.push("/login");
+  }, [isPending, session, router]);
+
+  if (isPending || !session) return null;
+
+  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">
+        <h1 className="mb-4 text-2xl font-semibold tracking-tight">Your account</h1>
+        <dl className="space-y-2 text-sm">
+          <div className="flex justify-between">
+            <dt className="text-gray-500">Name</dt>
+            <dd className="font-medium">{session.user.name}</dd>
+          </div>
+          <div className="flex justify-between">
+            <dt className="text-gray-500">Email</dt>
+            <dd className="font-medium">{session.user.email}</dd>
+          </div>
+        </dl>
+        <button
+          type="button"
+          onClick={() => authClient.signOut().then(() => router.push("/login"))}
+          className="mt-6 w-full rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white transition hover:bg-gray-700"
+        >
+          Sign out
+        </button>
+      </div>
+    </main>
+  );
+}

package/template/extras/better-auth/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,5 @@
+import { auth } from "@/server/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+// Mounts every Better Auth endpoint (sign-in, sign-up, sign-out, session, ...).
+export const { GET, POST } = toNextJsHandler(auth);