simplify auth setup

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>>;