create-stackrjs 1.4.0

package/template/architectures/microservices/services/api/src/routes/auth.ts

@@ -0,0 +1,73 @@
+import { Hono, type Context } from "hono";
+import { getCookie, setCookie, deleteCookie } from "hono/cookie";
+import bcrypt from "bcryptjs";
+import { z } from "zod";
+import { prisma } from "../db.js";
+import { signSession, verifySession } from "../auth.js";
+
+const credentials = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+const SESSION_COOKIE = "session";
+const WEEK_SECONDS = 60 * 60 * 24 * 7;
+
+function issueSession(c: Context, token: string) {
+  setCookie(c, SESSION_COOKIE, token, {
+    httpOnly: true,
+    sameSite: "Lax",
+    path: "/",
+    maxAge: WEEK_SECONDS,
+  });
+}
+
+export const authRoutes = new Hono();
+
+authRoutes.post("/register", async (c) => {
+  const parsed = credentials.safeParse(await c.req.json().catch(() => null));
+  if (!parsed.success) {
+    return c.json({ error: "Invalid email or password (min 8 characters)." }, 400);
+  }
+
+  const existing = await prisma.user.findUnique({ where: { email: parsed.data.email } });
+  if (existing) return c.json({ error: "Email already registered." }, 409);
+
+  const passwordHash = await bcrypt.hash(parsed.data.password, 10);
+  const user = await prisma.user.create({ data: { email: parsed.data.email, passwordHash } });
+
+  issueSession(c, await signSession(user.id));
+  return c.json({ id: user.id, email: user.email });
+});
+
+authRoutes.post("/login", async (c) => {
+  const parsed = credentials.safeParse(await c.req.json().catch(() => null));
+  if (!parsed.success) return c.json({ error: "Invalid credentials." }, 400);
+
+  const user = await prisma.user.findUnique({ where: { email: parsed.data.email } });
+  if (!user || !(await bcrypt.compare(parsed.data.password, user.passwordHash))) {
+    return c.json({ error: "Invalid credentials." }, 401);
+  }
+
+  issueSession(c, await signSession(user.id));
+  return c.json({ id: user.id, email: user.email });
+});
+
+authRoutes.post("/logout", (c) => {
+  deleteCookie(c, SESSION_COOKIE, { path: "/" });
+  return c.json({ ok: true });
+});
+
+authRoutes.get("/me", async (c) => {
+  const token = getCookie(c, SESSION_COOKIE);
+  const userId = token ? await verifySession(token) : null;
+  if (!userId) return c.json({ error: "Unauthenticated." }, 401);
+
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { id: true, email: true },
+  });
+  if (!user) return c.json({ error: "Unauthenticated." }, 401);
+
+  return c.json(user);
+});

package/template/architectures/microservices/services/api/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022"],
+    "types": ["node"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/template/base/_eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

package/template/base/_gitignore

@@ -0,0 +1,24 @@
+node_modules
+.pnp
+.pnp.js
+
+# next.js
+.next/
+out/
+build/
+
+# misc
+.DS_Store
+*.pem
+*.log
+
+# env files
+.env
+.env*.local
+
+# typescript
+next-env.d.ts
+*.tsbuildinfo
+
+# generated prisma client (Prisma 7 generates into the project)
+/src/generated

package/template/base/_prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100
+}

package/template/base/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/base/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/template/base/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write .",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^15.1.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^15.1.3",
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.2"
+  }
+}

package/template/base/src/app/globals.css

@@ -0,0 +1,14 @@
+/* Base styles. Replaced by the Tailwind installer when Tailwind is selected. */
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}

package/template/base/src/app/layout.tsx

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

package/template/base/src/app/page.tsx

@@ -0,0 +1,10 @@
+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">
+        Your Stackr-generated app is running. Edit <code className="rounded bg-gray-200 px-1">src/app/page.tsx</code> to get started.
+      </p>
+    </main>
+  );
+}

package/template/base/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

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

@@ -0,0 +1,52 @@
+import { headers } from "next/headers";
+import { auth } from "@/server/auth";
+import { db } from "@/server/db";
+
+/**
+ * Account adapter for Better Auth on Prisma. Provides the session + user-data
+ * primitives consumed by the dashboard / admin interfaces.
+ *
+ * Better Auth's core schema has no role column, so admin access is granted via
+ * the `ADMIN_EMAILS` allowlist (comma-separated emails).
+ */
+export const SIGN_IN_PATH = "/login";
+
+export type AccountUser = {
+  id: string;
+  name: string | null;
+  email: string | null;
+  role: "USER" | "ADMIN";
+};
+
+const adminEmails = (process.env.ADMIN_EMAILS ?? "")
+  .split(",")
+  .map((e) => e.trim().toLowerCase())
+  .filter(Boolean);
+
+function resolveRole(email: string | null): "USER" | "ADMIN" {
+  return email && adminEmails.includes(email.toLowerCase()) ? "ADMIN" : "USER";
+}
+
+function toAccountUser(u: { id: string; name?: string | null; email?: string | null }): AccountUser {
+  const email = u.email ?? null;
+  return { id: u.id, name: u.name ?? null, email, role: resolveRole(email) };
+}
+
+export async function getSessionUser(): Promise<AccountUser | null> {
+  const session = await auth.api.getSession({ headers: await headers() });
+  return session?.user ? toAccountUser(session.user) : null;
+}
+
+export async function getUserStats(): Promise<{ users: number; sessions: number | null }> {
+  const [users, sessions] = await Promise.all([db.user.count(), db.session.count()]);
+  return { users, sessions };
+}
+
+export async function listRecentUsers(limit: number): Promise<AccountUser[]> {
+  const users = await db.user.findMany({
+    orderBy: { createdAt: "desc" },
+    take: limit,
+    select: { id: true, name: true, email: true },
+  });
+  return users.map(toAccountUser);
+}

package/template/extras/account-clerk/src/server/account.ts

@@ -0,0 +1,64 @@
+import { currentUser, clerkClient } from "@clerk/nextjs/server";
+
+/**
+ * Account adapter for Clerk. Clerk manages users itself, so the dashboard / admin
+ * interfaces read from the Clerk API rather than the app database.
+ *
+ * Admin access uses Clerk's `publicMetadata.role === "admin"`, falling back to the
+ * `ADMIN_EMAILS` allowlist. (Active session counts aren't exposed, so the
+ * dashboard shows "—" for sessions.)
+ */
+export const SIGN_IN_PATH = "/sign-in";
+
+export type AccountUser = {
+  id: string;
+  name: string | null;
+  email: string | null;
+  role: "USER" | "ADMIN";
+};
+
+type ClerkLike = {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  emailAddresses: { emailAddress: string }[];
+  publicMetadata: unknown;
+};
+
+const adminEmails = (process.env.ADMIN_EMAILS ?? "")
+  .split(",")
+  .map((e) => e.trim().toLowerCase())
+  .filter(Boolean);
+
+function nameOf(u: ClerkLike): string | null {
+  return [u.firstName, u.lastName].filter(Boolean).join(" ") || null;
+}
+
+function resolveRole(email: string | null, metadata: unknown): "USER" | "ADMIN" {
+  if ((metadata as { role?: string } | null)?.role === "admin") return "ADMIN";
+  if (email && adminEmails.includes(email.toLowerCase())) return "ADMIN";
+  return "USER";
+}
+
+function toAccountUser(u: ClerkLike): AccountUser {
+  const email = u.emailAddresses[0]?.emailAddress ?? null;
+  return { id: u.id, name: nameOf(u), email, role: resolveRole(email, u.publicMetadata) };
+}
+
+export async function getSessionUser(): Promise<AccountUser | null> {
+  const user = await currentUser();
+  if (!user) return null;
+  return toAccountUser(user as unknown as ClerkLike);
+}
+
+export async function getUserStats(): Promise<{ users: number; sessions: number | null }> {
+  const client = await clerkClient();
+  const users = await client.users.getCount();
+  return { users, sessions: null };
+}
+
+export async function listRecentUsers(limit: number): Promise<AccountUser[]> {
+  const client = await clerkClient();
+  const { data } = await client.users.getUserList({ limit, orderBy: "-created_at" });
+  return data.map((u) => toAccountUser(u as unknown as ClerkLike));
+}

package/template/extras/account-nextauth/src/server/account.ts

@@ -0,0 +1,59 @@
+import { auth } from "@/server/auth";
+import { db } from "@/server/db";
+
+/**
+ * Account adapter for NextAuth (Auth.js) on Prisma. Provides the session +
+ * user-data primitives consumed by the dashboard / admin interfaces, so those
+ * pages stay identical across every auth provider.
+ *
+ * Roles use the native Prisma `role` column, falling back to the `ADMIN_EMAILS`
+ * allowlist so you can grant admin access without touching the database.
+ */
+export const SIGN_IN_PATH = "/login";
+
+export type AccountUser = {
+  id: string;
+  name: string | null;
+  email: string | null;
+  role: "USER" | "ADMIN";
+};
+
+const adminEmails = (process.env.ADMIN_EMAILS ?? "")
+  .split(",")
+  .map((e) => e.trim().toLowerCase())
+  .filter(Boolean);
+
+function resolveRole(email: string | null, nativeRole?: string | null): "USER" | "ADMIN" {
+  if (nativeRole === "ADMIN") return "ADMIN";
+  if (email && adminEmails.includes(email.toLowerCase())) return "ADMIN";
+  return "USER";
+}
+
+function toAccountUser(u: {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  role?: string | null;
+}): AccountUser {
+  const email = u.email ?? null;
+  return { id: u.id ?? "", name: u.name ?? null, email, role: resolveRole(email, u.role) };
+}
+
+export async function getSessionUser(): Promise<AccountUser | null> {
+  const session = await auth();
+  return session?.user ? toAccountUser(session.user) : null;
+}
+
+export async function getUserStats(): Promise<{ users: number; sessions: number | null }> {
+  const [users, sessions] = await Promise.all([db.user.count(), db.session.count()]);
+  return { users, sessions };
+}
+
+export async function listRecentUsers(limit: number): Promise<AccountUser[]> {
+  const users = await db.user.findMany({
+    orderBy: { createdAt: "desc" },
+    take: limit,
+    select: { id: true, name: true, email: true, role: true },
+  });
+  return users.map(toAccountUser);
+}

package/template/extras/account-supabase/src/lib/supabase/admin.ts

@@ -0,0 +1,14 @@
+import { createClient } from "@supabase/supabase-js";
+
+/**
+ * Service-role Supabase client for privileged, server-only operations (e.g.
+ * listing users for the admin page). NEVER import this from client components —
+ * the service-role key bypasses Row Level Security.
+ */
+export function createAdminClient() {
+  return createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.SUPABASE_SERVICE_ROLE_KEY!,
+    { auth: { autoRefreshToken: false, persistSession: false } },
+  );
+}

package/template/extras/account-supabase/src/server/account.ts

@@ -0,0 +1,65 @@
+import { createClient } from "@/lib/supabase/server";
+import { createAdminClient } from "@/lib/supabase/admin";
+
+/**
+ * Account adapter for Supabase Auth. The current session is read with the
+ * request-scoped client; global stats / the user list use a service-role admin
+ * client (`SUPABASE_SERVICE_ROLE_KEY`).
+ *
+ * Supabase has no role column by default, so admin access uses
+ * `app_metadata.role === "admin"` with the `ADMIN_EMAILS` allowlist as fallback.
+ */
+export const SIGN_IN_PATH = "/login";
+
+export type AccountUser = {
+  id: string;
+  name: string | null;
+  email: string | null;
+  role: "USER" | "ADMIN";
+};
+
+const adminEmails = (process.env.ADMIN_EMAILS ?? "")
+  .split(",")
+  .map((e) => e.trim().toLowerCase())
+  .filter(Boolean);
+
+function resolveRole(email: string | null, appRole: unknown): "USER" | "ADMIN" {
+  if (appRole === "admin") return "ADMIN";
+  if (email && adminEmails.includes(email.toLowerCase())) return "ADMIN";
+  return "USER";
+}
+
+function toAccountUser(u: {
+  id: string;
+  email?: string | null;
+  user_metadata?: Record<string, unknown> | null;
+  app_metadata?: Record<string, unknown> | null;
+}): AccountUser {
+  const email = u.email ?? null;
+  return {
+    id: u.id,
+    name: (u.user_metadata?.name as string | undefined) ?? null,
+    email,
+    role: resolveRole(email, u.app_metadata?.role),
+  };
+}
+
+export async function getSessionUser(): Promise<AccountUser | null> {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  return user ? toAccountUser(user) : null;
+}
+
+export async function getUserStats(): Promise<{ users: number; sessions: number | null }> {
+  const admin = createAdminClient();
+  const { data } = await admin.auth.admin.listUsers({ page: 1, perPage: 1000 });
+  return { users: data.users.length, sessions: null };
+}
+
+export async function listRecentUsers(limit: number): Promise<AccountUser[]> {
+  const admin = createAdminClient();
+  const { data } = await admin.auth.admin.listUsers({ page: 1, perPage: limit });
+  return data.users.map(toAccountUser);
+}

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

@@ -0,0 +1,55 @@
+import { redirect } from "next/navigation";
+import { getSessionUser, listRecentUsers, SIGN_IN_PATH } from "@/server/account";
+
+/**
+ * Admin / back-office. Protected and role-gated: only ADMIN users see the user
+ * list. Roles come from the provider's native role where available, otherwise the
+ * `ADMIN_EMAILS` allowlist (see `@/server/account`). Data + session are provided
+ * by the per-provider account adapter, so this page is the same for every auth.
+ */
+export default async function AdminPage() {
+  const user = await getSessionUser();
+  if (!user) redirect(SIGN_IN_PATH);
+
+  if (user.role !== "ADMIN") {
+    return (
+      <main className="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center gap-3 p-8 text-center">
+        <h1 className="text-2xl font-semibold tracking-tight">Admins only</h1>
+        <p className="text-sm text-gray-500">
+          Your account isn’t an admin. Add your email to <code>ADMIN_EMAILS</code> (or set your
+          provider role to <code>admin</code>) to access this page.
+        </p>
+      </main>
+    );
+  }
+
+  const users = await listRecentUsers(50);
+
+  return (
+    <main className="mx-auto max-w-4xl p-8">
+      <h1 className="mb-1 text-2xl font-semibold tracking-tight">Admin</h1>
+      <p className="mb-6 text-sm text-gray-500">{users.length} most recent users</p>
+
+      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
+        <table className="w-full text-left text-sm">
+          <thead className="border-b border-gray-200 bg-gray-50 text-gray-500">
+            <tr>
+              <th className="px-4 py-2 font-medium">Name</th>
+              <th className="px-4 py-2 font-medium">Email</th>
+              <th className="px-4 py-2 font-medium">Role</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id} className="border-b border-gray-100 last:border-0">
+                <td className="px-4 py-2">{u.name ?? "—"}</td>
+                <td className="px-4 py-2">{u.email ?? "—"}</td>
+                <td className="px-4 py-2">{u.role}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/server/auth";
+import { signOutAction } from "@/server/actions";
+import { SubmitButton } from "@/components/auth/ui";
+
+// Protected by middleware.ts; we re-check here so the page is safe on its own.
+export default async function AccountPage() {
+  const session = await auth();
+  if (!session?.user) redirect("/login");
+
+  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>
+          <div className="flex justify-between">
+            <dt className="text-gray-500">Role</dt>
+            <dd className="font-medium">{session.user.role ?? "USER"}</dd>
+          </div>
+        </dl>
+        <div className="mt-6">
+          <form action={signOutAction}>
+            <SubmitButton>Sign out</SubmitButton>
+          </form>
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { requestPasswordResetAction } from "@/server/actions";
+import { Alert, AuthShell, Field, FooterLinks, SubmitButton, TextLink } from "@/components/auth/ui";
+
+export default async function ForgotPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string; sent?: string }>;
+}) {
+  const sp = await searchParams;
+
+  return (
+    <AuthShell title="Reset password">
+      {sp.sent && (
+        <Alert kind="success">
+          If an account exists for that email, a reset link has been sent. In dev mode the link is
+          printed to the server console.
+        </Alert>
+      )}
+      {sp.error && <Alert kind="error">{sp.error}</Alert>}
+
+      <form action={requestPasswordResetAction}>
+        <Field label="Email" name="email" type="email" autoComplete="email" required />
+        <SubmitButton>Send reset link</SubmitButton>
+      </form>
+
+      <FooterLinks>
+        <p>
+          <TextLink href="/login">Back to sign in</TextLink>
+        </p>
+      </FooterLinks>
+    </AuthShell>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { loginAction } from "@/server/actions";
+import { Alert, AuthShell, Field, FooterLinks, SubmitButton, TextLink } from "@/components/auth/ui";
+
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string; reset?: string }>;
+}) {
+  const sp = await searchParams;
+
+  return (
+    <AuthShell title="Sign in">
+      {sp.reset && <Alert kind="success">Password updated. Sign in with your new password.</Alert>}
+      {sp.error && <Alert kind="error">{sp.error}</Alert>}
+
+      <form action={loginAction}>
+        <Field label="Email" name="email" type="email" autoComplete="email" required />
+        <Field label="Password" name="password" type="password" autoComplete="current-password" required />
+        <SubmitButton>Sign in</SubmitButton>
+      </form>
+
+      <FooterLinks>
+        <p>
+          No account? <TextLink href="/register">Create one</TextLink>
+        </p>
+        <p>
+          <TextLink href="/forgot-password">Forgot your password?</TextLink>
+        </p>
+      </FooterLinks>
+    </AuthShell>
+  );
+}