simplify auth setup

.changeset/busy-foxes-love.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+simplify auth setup

apps/cli/src/helpers/auth-setup.ts

@@ -5,7 +5,7 @@ import pc from "picocolors";
 import { PKG_ROOT } from "../constants";
 import type { ProjectConfig } from "../types";
 
-export async function configureAuth(
+export async function setupAuth(
 	projectDir: string,
 	enableAuth: boolean,
 	hasDatabase: boolean,
@@ -16,55 +16,22 @@ export async function configureAuth(
 
 	try {
 		if (!enableAuth) {
-			await fs.remove(path.join(clientDir, "src/components/sign-up-form.tsx"));
+			return;
-			await fs.remove(path.join(clientDir, "src/components/sign-in-form.tsx"));
+		}
-			await fs.remove(path.join(clientDir, "src/components/auth-forms.tsx"));
-			await fs.remove(path.join(clientDir, "src/components/user-menu.tsx"));
-			await fs.remove(path.join(clientDir, "src/lib/auth-client.ts"));
 
-			const indexRoutePath = path.join(clientDir, "src/routes/index.tsx");
+		if (!hasDatabase) {
-			const indexRouteContent = await fs.readFile(indexRoutePath, "utf8");
-			const updatedIndexRouteContent = indexRouteContent
-				.replace(/import AuthForms from "@\/components\/auth-forms";\n/, "")
-				.replace(/<AuthForms \/>/, "");
-			await fs.writeFile(indexRoutePath, updatedIndexRouteContent, "utf8");
-
-			await fs.remove(path.join(serverDir, "src/lib/auth.ts"));
-
-			const indexFilePath = path.join(serverDir, "src/index.ts");
-			const indexContent = await fs.readFile(indexFilePath, "utf8");
-			const updatedIndexContent = indexContent
-				.replace(/import { auth } from "\.\/lib\/auth";\n/, "")
-				.replace(
-					/app\.on\(\["POST", "GET"\], "\/api\/auth\/\*\*", \(c\) => auth\.handler\(c\.req\.raw\)\);\n\n/,
-					"",
-				);
-			await fs.writeFile(indexFilePath, updatedIndexContent, "utf8");
-
-			const contextFilePath = path.join(serverDir, "src/lib/context.ts");
-			const contextContent = await fs.readFile(contextFilePath, "utf8");
-			const updatedContextContent = contextContent
-				.replace(/import { auth } from "\.\/auth";\n/, "")
-				.replace(
-					/const session = await auth\.api\.getSession\({\n\s+headers: hono\.req\.raw\.headers,\n\s+}\);/,
-					"const session = null;",
-				);
-			await fs.writeFile(contextFilePath, updatedContextContent, "utf8");
-		} else if (!hasDatabase) {
 			log.warn(
 				pc.yellow(
 					"Authentication enabled but no database selected. Auth will not function properly.",
 				),
 			);
-		} else {
+			return;
+		}
+
 		const envPath = path.join(serverDir, ".env");
 		const templateEnvPath = path.join(
 			PKG_ROOT,
-				getOrmTemplatePath(
+			getOrmTemplatePath(options.orm, options.database, "packages/server/_env"),
-					options.orm,
-					options.database,
-					"packages/server/_env",
-				),
 		);
 
 		if (!(await fs.pathExists(envPath))) {
@@ -115,33 +82,6 @@ ${options.orm === "prisma" ? 'DATABASE_URL="file:./dev.db"' : ""}
 		}
 
 		if (options.orm === "prisma") {
-				const prismaAuthPath = path.join(serverDir, "src/lib/auth.ts");
-				const defaultPrismaAuthPath = path.join(
-					PKG_ROOT,
-					getOrmTemplatePath(
-						options.orm,
-						options.database,
-						"packages/server/src/lib/auth.ts",
-					),
-				);
-
-				if (
-					(await fs.pathExists(defaultPrismaAuthPath)) &&
-					!(await fs.pathExists(prismaAuthPath))
-				) {
-					await fs.ensureDir(path.dirname(prismaAuthPath));
-					await fs.copy(defaultPrismaAuthPath, prismaAuthPath);
-				}
-
-				let authContent = await fs.readFile(prismaAuthPath, "utf8");
-				if (!authContent.includes("trustedOrigins")) {
-					authContent = authContent.replace(
-						"export const auth = betterAuth({",
-						"export const auth = betterAuth({\n    trustedOrigins: [process.env.CORS_ORIGIN!],",
-					);
-					await fs.writeFile(prismaAuthPath, authContent);
-				}
-
 			const packageJsonPath = path.join(projectDir, "package.json");
 			if (await fs.pathExists(packageJsonPath)) {
 				const packageJson = await fs.readJson(packageJsonPath);
@@ -158,24 +98,6 @@ ${options.orm === "prisma" ? 'DATABASE_URL="file:./dev.db"' : ""}
 				await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
 			}
 		} else if (options.orm === "drizzle") {
-				const drizzleAuthPath = path.join(serverDir, "src/lib/auth.ts");
-				const defaultDrizzleAuthPath = path.join(
-					PKG_ROOT,
-					getOrmTemplatePath(
-						options.orm,
-						options.database,
-						"packages/server/src/lib/auth.ts",
-					),
-				);
-
-				if (
-					(await fs.pathExists(defaultDrizzleAuthPath)) &&
-					!(await fs.pathExists(drizzleAuthPath))
-				) {
-					await fs.ensureDir(path.dirname(drizzleAuthPath));
-					await fs.copy(defaultDrizzleAuthPath, drizzleAuthPath);
-				}
-
 			const packageJsonPath = path.join(projectDir, "package.json");
 			if (await fs.pathExists(packageJsonPath)) {
 				const packageJson = await fs.readJson(packageJsonPath);
@@ -188,7 +110,6 @@ ${options.orm === "prisma" ? 'DATABASE_URL="file:./dev.db"' : ""}
 				await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
 			}
 		}
-		}
 	} catch (error) {
 		log.error(pc.red("Failed to configure authentication"));
 		if (error instanceof Error) {

apps/cli/src/helpers/create-project.ts

@@ -6,7 +6,7 @@ import pc from "picocolors";
 import { PKG_ROOT } from "../constants";
 import type { ProjectConfig } from "../types";
 import { setupAddons } from "./addons-setup";
-import { configureAuth } from "./auth-setup";
+import { setupAuth } from "./auth-setup";
 import { createReadme } from "./create-readme";
 import { setupDatabase } from "./db-setup";
 import { displayPostInstallInstructions } from "./post-installation";
@@ -24,6 +24,13 @@ export async function createProject(options: ProjectConfig): Promise<string> {
 		}
 		await fs.copy(templateDir, projectDir);
 
+		if (options.auth) {
+			const authTemplateDir = path.join(PKG_ROOT, "template/with-auth");
+			if (await fs.pathExists(authTemplateDir)) {
+				await fs.copy(authTemplateDir, projectDir, { overwrite: true });
+			}
+		}
+
 		if (options.orm !== "none" && options.database !== "none") {
 			const ormTemplateDir = path.join(
 				PKG_ROOT,
@@ -40,6 +47,10 @@ export async function createProject(options: ProjectConfig): Promise<string> {
 				path.join(projectDir, "packages/server/_env"),
 				path.join(projectDir, "packages/server/.env"),
 			],
+			[
+				path.join(projectDir, "packages/client/_env"),
+				path.join(projectDir, "packages/client/.env"),
+			],
 		];
 
 		for (const [source, target] of envFiles) {
@@ -58,7 +69,8 @@ export async function createProject(options: ProjectConfig): Promise<string> {
 			options.orm,
 			options.turso ?? options.database === "sqlite",
 		);
-		await configureAuth(
+
+		await setupAuth(
 			projectDir,
 			options.auth,
 			options.database !== "none",

apps/cli/template/base/packages/client/src/components/header.tsx

@@ -1,6 +1,5 @@
 import { Link } from "@tanstack/react-router";
 import { ModeToggle } from "./mode-toggle";
-import UserMenu from "./user-menu";
 
 export default function Header() {
   return (
@@ -16,27 +15,9 @@ export default function Header() {
           >
             Home
           </Link>
-          <Link
-            to="/dashboard"
-            activeProps={{
-              className: "font-bold",
-            }}
-            activeOptions={{ exact: true }}
-          >
-            Dashboard
-          </Link>
-          <Link
-            to="/about"
-            activeProps={{
-              className: "font-bold",
-            }}
-          >
-            About
-          </Link>
         </div>
         <div className="flex flex-row items-center gap-2">
           <ModeToggle />
-          <UserMenu />
         </div>
       </div>
       <hr />

apps/cli/template/base/packages/client/src/routes/about.tsx

@@ -1,13 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/about")({
-  component: AboutComponent,
-});
-
-function AboutComponent() {
-  return (
-    <div className="p-2">
-      <h3>About</h3>
-    </div>
-  );
-}

apps/cli/template/base/packages/client/src/routes/index.tsx

@@ -1,4 +1,3 @@
-import AuthForms from "@/components/auth-forms";
 import { trpc } from "@/utils/trpc";
 import { createFileRoute, Link } from "@tanstack/react-router";
 
@@ -13,7 +12,6 @@ function HomeComponent() {
       <h3>Welcome Home!</h3>
       <Link to="/dashboard">Go to Dashboard</Link>
       <p>healthCheck: {healthCheck.data}</p>
-      <AuthForms />
     </div>
   );
 }

apps/cli/template/base/packages/server/src/index.ts

@@ -4,7 +4,6 @@ import "dotenv/config";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { logger } from "hono/logger";
-import { auth } from "./lib/auth";
 import { createContext } from "./lib/context";
 import { appRouter } from "./routers/index";
 
@@ -17,13 +16,9 @@ app.use(
   cors({
     origin: process.env.CORS_ORIGIN!,
     allowMethods: ["GET", "POST", "OPTIONS"],
-    allowHeaders: ["Content-Type", "Authorization"],
-    credentials: true,
   }),
 );
 
-app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));
-
 app.use(
   "/trpc/*",
   trpcServer({

apps/cli/template/base/packages/server/src/lib/context.ts

@@ -1,17 +1,12 @@
 import type { Context as HonoContext } from "hono";
-import { auth } from "./auth";
 
 export type CreateContextOptions = {
   hono: HonoContext;
 };
 
 export async function createContext({ hono }: CreateContextOptions) {
-  const session = await auth.api.getSession({
-    headers: hono.req.raw.headers,
-  });
-
   return {
-    session,
+    session: null,
   };
 }
 

apps/cli/template/base/packages/server/src/lib/trpc.ts

@@ -6,19 +6,3 @@ export const t = initTRPC.context<Context>().create();
 export const router = t.router;
 
 export const publicProcedure = t.procedure;
-
-export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
-  if (!ctx.session) {
-    throw new TRPCError({
-      code: "UNAUTHORIZED",
-      message: "Authentication required",
-      cause: "No session",
-    });
-  }
-  return next({
-    ctx: {
-      ...ctx,
-      session: ctx.session,
-    },
-  });
-});

apps/cli/template/base/packages/server/src/routers/index.ts

@@ -1,15 +1,9 @@
-import { router, publicProcedure, protectedProcedure } from "../lib/trpc";
+import { router, publicProcedure } from "../lib/trpc";
 
 export const appRouter = router({
   healthCheck: publicProcedure.query(() => {
     return "OK";
   }),
-  privateData: protectedProcedure.query(({ ctx }) => {
-    return {
-      message: "This is private",
-      user: ctx.session.user,
-    };
-  }),
 });
 
 export type AppRouter = typeof appRouter;

apps/cli/template/with-auth/packages/client/src/components/header.tsx

@@ -0,0 +1,37 @@
+import { Link } from "@tanstack/react-router";
+import { ModeToggle } from "./mode-toggle";
+import UserMenu from "./user-menu";
+
+export default function Header() {
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <div className="flex gap-4 text-lg">
+          <Link
+            to="/"
+            activeProps={{
+              className: "font-bold",
+            }}
+            activeOptions={{ exact: true }}
+          >
+            Home
+          </Link>
+          <Link
+            to="/dashboard"
+            activeProps={{
+              className: "font-bold",
+            }}
+            activeOptions={{ exact: true }}
+          >
+            Dashboard
+          </Link>
+        </div>
+        <div className="flex flex-row items-center gap-2">
+          <ModeToggle />
+          <UserMenu />
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

apps/cli/template/with-auth/packages/client/src/routes/index.tsx

@@ -0,0 +1,19 @@
+import AuthForms from "@/components/auth-forms";
+import { trpc } from "@/utils/trpc";
+import { createFileRoute, Link } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  component: HomeComponent,
+});
+
+function HomeComponent() {
+  const healthCheck = trpc.healthCheck.useQuery();
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+      <Link to="/dashboard">Go to Dashboard</Link>
+      <p>healthCheck: {healthCheck.data}</p>
+      <AuthForms />
+    </div>
+  );
+}

apps/cli/template/with-auth/packages/server/src/index.ts

@@ -0,0 +1,47 @@
+import { serve } from "@hono/node-server";
+import { trpcServer } from "@hono/trpc-server";
+import "dotenv/config";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import { auth } from "./lib/auth";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+
+const app = new Hono();
+
+app.use(logger());
+
+app.use(
+  "/*",
+  cors({
+    origin: process.env.CORS_ORIGIN!,
+    allowMethods: ["GET", "POST", "OPTIONS"],
+    allowHeaders: ["Content-Type", "Authorization"],
+    credentials: true,
+  }),
+);
+
+app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));
+
+app.use(
+  "/trpc/*",
+  trpcServer({
+    router: appRouter,
+    createContext: (_opts, hono) => {
+      return createContext({ hono });
+    },
+  }),
+);
+
+app.get("/healthCheck", (c) => {
+  return c.text("OK");
+});
+
+const port = 3000;
+console.log(`Server is running on http://localhost:${port}`);
+
+serve({
+  fetch: app.fetch,
+  port,
+});

apps/cli/template/with-auth/packages/server/src/lib/trpc.ts

@@ -0,0 +1,24 @@
+import { initTRPC, TRPCError } from "@trpc/server";
+import type { Context } from "./context";
+
+export const t = initTRPC.context<Context>().create();
+
+export const router = t.router;
+
+export const publicProcedure = t.procedure;
+
+export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
+  if (!ctx.session) {
+    throw new TRPCError({
+      code: "UNAUTHORIZED",
+      message: "Authentication required",
+      cause: "No session",
+    });
+  }
+  return next({
+    ctx: {
+      ...ctx,
+      session: ctx.session,
+    },
+  });
+});

apps/cli/template/with-auth/packages/server/src/routers/index.ts

@@ -0,0 +1,16 @@
+
+import { router, publicProcedure, protectedProcedure } from "../lib/trpc";
+
+export const appRouter = router({
+  healthCheck: publicProcedure.query(() => {
+    return "OK";
+  }),
+  privateData: protectedProcedure.query(({ ctx }) => {
+    return {
+      message: "This is private",
+      user: ctx.session.user,
+    };
+  }),
+});
+
+export type AppRouter = typeof appRouter;

apps/cli/template/with-drizzle-postgres/packages/server/src/lib/context.ts

@@ -0,0 +1,18 @@
+import type { Context as HonoContext } from "hono";
+import { auth } from "./auth";
+
+export type CreateContextOptions = {
+  hono: HonoContext;
+};
+
+export async function createContext({ hono }: CreateContextOptions) {
+  const session = await auth.api.getSession({
+    headers: hono.req.raw.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

apps/cli/template/with-drizzle-sqlite/packages/server/src/lib/context.ts

@@ -0,0 +1,18 @@
+import type { Context as HonoContext } from "hono";
+import { auth } from "./auth";
+
+export type CreateContextOptions = {
+  hono: HonoContext;
+};
+
+export async function createContext({ hono }: CreateContextOptions) {
+  const session = await auth.api.getSession({
+    headers: hono.req.raw.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

apps/cli/template/with-prisma-postgres/packages/server/src/lib/context.ts

@@ -0,0 +1,18 @@
+import type { Context as HonoContext } from "hono";
+import { auth } from "./auth";
+
+export type CreateContextOptions = {
+  hono: HonoContext;
+};
+
+export async function createContext({ hono }: CreateContextOptions) {
+  const session = await auth.api.getSession({
+    headers: hono.req.raw.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

apps/cli/template/with-prisma-sqlite/packages/server/src/lib/context.ts

@@ -0,0 +1,18 @@
+import type { Context as HonoContext } from "hono";
+import { auth } from "./auth";
+
+export type CreateContextOptions = {
+  hono: HonoContext;
+};
+
+export async function createContext({ hono }: CreateContextOptions) {
+  const session = await auth.api.getSession({
+    headers: hono.req.raw.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;