chore: merge branch 'dev' into stage

Author: Hashversion

README.md

@@ -5,7 +5,7 @@
 > [!note]
 >
 > - this setup is done for quickly spinning up an MVP with a waitlist
-> - more features will be added soon :: including authentication (better-auth), payments, feature flags, rate limiting, captchas, i18n, monitoring, testing, and etc
+> - more features will be added soon :: including payments, feature flags, rate limiting, captchas, i18n, monitoring, testing, and etc
 > - documentation is yet to be developed
 
 ## what is vazen?
@@ -29,12 +29,14 @@
 - [**react.js v19**](https://react.dev/) :: latest react with react compiler enabled
 - [**typescript**](https://www.typescriptlang.org/) :: type-safe development
 - [**tailwind CSS v4**](https://tailwindcss.com/) :: utility-first CSS framework
-- [**oRPC**]() :: alternative to tRPC with openapi support out of the box
-- [**tanstack query**](https://orpc.unnoq.com/) :: for efficient query & api handling
+- [**oRPC**](https://orpc.unnoq.com/) :: alternative to tRPC with openapi support out of the box
+- [**tanstack query**](https://tanstack.com/query/latest) :: for efficient query & api handling
 - [**supabase**](https://supabase.com/) :: postgresql on supabase, i'm assuming you're just starting up, for growth you may move to aws RDS later
 - [**drizzle ORM**](https://orm.drizzle.team/) :: database interactions & cloudflare hyperdrive integration (turning regional database to distributed database by cashing reads)
+- [**better-auth**](https://better-auth.com/) :: the most comprehensive authentication framework
 - [**react-email**](https://react.email/) :: library for building email templates in react
 - [**posthog**](https://posthog.com/) :: web analytics
+- [**c15t**](https://c15t.com/) :: developer-first consent management (cookie compliance)
 
 ### CI/CD
 

apps/web/.env.example

@@ -4,4 +4,4 @@ NEXT_PUBLIC_POSTHOG_HOST=""
 
 # server
 NEXTJS_ENV=development
-
+BETTER_AUTH_SECRET=

apps/web/package.json

@@ -13,20 +13,24 @@
     "lint": "eslint --max-warnings 0 --report-unused-disable-directives-severity warn",
     "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
     "start": "next start",
-    "typegen:worker": "wrangler types",
+    "typegen:worker": "wrangler types --env-interface CloudflareEnv",
     "typegen:worker:stage": "wrangler types --env-interface CloudflareEnv -e=stage"
   },
   "dependencies": {
+    "@c15t/nextjs": "^1.8.1",
     "@opennextjs/cloudflare": "^1.11.0",
     "@orpc/client": "catalog:",
     "@orpc/server": "catalog:",
     "@orpc/tanstack-query": "catalog:",
     "@repo/analytics": "workspace:*",
     "@repo/api": "workspace:*",
+    "@repo/auth": "workspace:*",
     "@repo/db": "workspace:*",
     "@repo/fonts": "workspace:*",
+    "@repo/security": "workspace:*",
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "^5.90.5",
+    "better-auth": "catalog:",
     "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",

apps/web/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,7 @@
+import { getCloudflareContext } from "@opennextjs/cloudflare";
+import { toNextJsHandler } from "better-auth/next-js";
+import { auth } from "@repo/auth/server";
+
+const { env } = await getCloudflareContext({ async: true });
+
+export const { POST, GET } = toNextJsHandler(auth(env).handler);

apps/web/src/app/api/rpc/[[...rest]]/route.ts

@@ -6,10 +6,10 @@ import { router } from "@repo/api/router";
 const handler = new RPCHandler(router);
 
 async function handleRequest(request: Request) {
-  const { env: CloudflareEnv } = getCloudflareContext();
+  const { env: cloudflareEnv } = getCloudflareContext();
   const { response } = await handler.handle(request, {
     prefix: "/api/rpc",
-    context: await createContext({ headers: request.headers, CloudflareEnv }),
+    context: await createContext({ headers: request.headers, cloudflareEnv }),
   });
 
   return response ?? new Response("Not found", { status: 404 });

apps/web/src/app/providers.tsx

@@ -5,16 +5,19 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ThemeProvider } from "@repo/ui";
 import { createQueryClient } from "@/lib/query/client";
+import { ConsentManagementProvider } from "@/components/providers/consent-manager";
 
 export function Providers(props: { children: React.ReactNode }) {
   const [queryClient] = useState(() => createQueryClient());
 
   return (
     <ThemeProvider>
-      <QueryClientProvider client={queryClient}>
-        {props.children}
-        <ReactQueryDevtools />
-      </QueryClientProvider>
+      <ConsentManagementProvider>
+        <QueryClientProvider client={queryClient}>
+          {props.children}
+          <ReactQueryDevtools />
+        </QueryClientProvider>
+      </ConsentManagementProvider>
     </ThemeProvider>
   );
 }

apps/web/src/components/providers/consent-manager.client.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ClientSideOptionsProvider } from "@c15t/nextjs/client";
+import { usePostHog } from "@repo/analytics/posthog";
+
+export function ConsentManagerClient({ children }: { children: React.ReactNode }) {
+  const posthog = usePostHog();
+
+  return (
+    <ClientSideOptionsProvider
+      callbacks={{
+        onConsentSet({ preferences }) {
+          if (preferences.measurement) {
+            posthog.opt_in_capturing();
+          } else {
+            posthog.opt_out_capturing();
+          }
+        },
+        onError(error) {
+          console.error("Consent error:", error);
+        },
+      }}
+    >
+      {children}
+    </ClientSideOptionsProvider>
+  );
+}

apps/web/src/components/providers/consent-manager.tsx

@@ -0,0 +1,51 @@
+import { ConsentManagerDialog, ConsentManagerProvider, CookieBanner } from "@c15t/nextjs";
+import type { ReactNode } from "react";
+import { ConsentManagerClient } from "./consent-manager.client";
+
+export function ConsentManagementProvider({ children }: { children: ReactNode }) {
+  return (
+    <ConsentManagerProvider
+      options={{
+        mode: "offline",
+        consentCategories: ["necessary", "measurement"],
+        ignoreGeoLocation: true, // Useful for development to always view the banner.
+        legalLinks: {
+          privacyPolicy: {
+            href: "/privacy",
+            label: "Privacy Policy",
+          },
+          termsOfService: {
+            href: "/terms",
+            label: "Terms of Service",
+          },
+        },
+      }}
+    >
+      <CookieBanner
+        theme={{
+          "banner.overlay": "!bg-black/30",
+          "banner.root": "!font-geist",
+          "banner.card": "!rounded-none !border",
+          "banner.footer.accept-button": "!rounded-none",
+          "banner.footer.reject-button": "!rounded-none",
+          "banner.footer.customize-button": "!rounded-none ",
+        }}
+        legalLinks={["privacyPolicy", "termsOfService"]}
+        scrollLock={true}
+        trapFocus={true}
+      />
+      <ConsentManagerDialog
+        legalLinks={["privacyPolicy", "termsOfService"]}
+        theme={{
+          "dialog.root": "!rounded-none !font-geist",
+          "dialog.footer": "!hidden",
+          "widget.accordion.item": "!rounded-none",
+          "widget.footer.reject-button": "!rounded-none",
+          "widget.footer.accept-button": "!rounded-none",
+          "widget.footer.save-button": "!rounded-none ",
+        }}
+      />
+      <ConsentManagerClient>{children}</ConsentManagerClient>
+    </ConsentManagerProvider>
+  );
+}

apps/web/src/lib/orpc.server.ts

@@ -5,10 +5,10 @@ import { createContext } from "@repo/api/orpc";
 import { router } from "@repo/api/router";
 import "server-only";
 
-const { env: CloudflareEnv } = await getCloudflareContext({ async: true });
+const { env: cloudflareEnv } = await getCloudflareContext({ async: true });
 globalThis.$client = createRouterClient(router, {
   context: async () => {
-    const ctx = await createContext({ headers: await headers(), CloudflareEnv: CloudflareEnv });
+    const ctx = await createContext({ headers: await headers(), cloudflareEnv });
     return ctx;
   },
 });

apps/web/src/proxy.ts

@@ -0,0 +1,15 @@
+import { securityHeadersMiddleware, securityHeadersOptions } from "@repo/security/security-headers";
+
+const securityHeaders = securityHeadersMiddleware(securityHeadersOptions);
+
+/**
+ *
+ *  ### Best practises
+ *  @see https://vercel.com/blog/postmortem-on-next-js-middleware-bypass
+ *  - strictly do not use proxy for auth, do auth things it in data access layer
+ *  - use proxy.ts as just routing infrastructure
+ *
+ */
+export default function proxy() {
+  return securityHeaders();
+}