From f28802b1c20f0735c5be6be0e0632462ec1eaa61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 19 Dec 2024 21:38:57 +0100
Subject: [PATCH] chore(cookies): debug (revert this)

---
 apps/api/src/index.ts                  | 36 +++++++++++++++++------
 apps/dashboard/src/app/debug/Debug.tsx | 40 ++++++++++++++++++++++++++
 apps/dashboard/src/app/debug/page.tsx  |  5 ++++
 apps/dashboard/src/app/providers.tsx   |  7 +++++
 packages/trpc/src/routers/user.ts      | 32 +++++++++++++++++++++
 packages/trpc/src/trpc.ts              |  9 +-----
 6 files changed, 113 insertions(+), 16 deletions(-)
 create mode 100644 apps/dashboard/src/app/debug/Debug.tsx
 create mode 100644 apps/dashboard/src/app/debug/page.tsx

diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index 8cd38f10..3161255c 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -2,7 +2,7 @@ import zlib from 'node:zlib';
 import { clerkPlugin } from '@clerk/fastify';
 import compress from '@fastify/compress';
 import cookie from '@fastify/cookie';
-import cors from '@fastify/cors';
+import cors, { type FastifyCorsOptions } from '@fastify/cors';
 import type { FastifyTRPCPluginOptions } from '@trpc/server/adapters/fastify';
 import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
 import type { FastifyBaseLogger, FastifyRequest } from 'fastify';
@@ -105,16 +105,36 @@ const startServer = async () => {
       },
     );
 
-    fastify.register(cors, {
-      origin: '*',
-      credentials: true,
+    fastify.register(cors, () => {
+      return (
+        req: FastifyRequest,
+        callback: (error: Error | null, options: FastifyCorsOptions) => void,
+      ) => {
+        // TODO: set prefix on dashboard routes
+        const corsPaths = ['/trpc', '/live', '/webhook', '/oauth', '/misc'];
+
+        const isPrivatePath = corsPaths.some((path) =>
+          req.url.startsWith(path),
+        );
+
+        if (isPrivatePath) {
+          return callback(null, {
+            origin: process.env.NEXT_PUBLIC_DASHBOARD_URL,
+            credentials: true,
+          });
+        }
+
+        return callback(null, {
+          origin: '*',
+        });
+      };
     });
 
     fastify.register((instance, opts, done) => {
-      // fastify.register(cookie, {
-      //   secret: 'random', // for cookies signature
-      //   hook: 'onRequest',
-      // });
+      fastify.register(cookie, {
+        secret: 'random', // for cookies signature
+        hook: 'onRequest',
+      });
       instance.register(clerkPlugin, {
         publishableKey: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
         secretKey: process.env.CLERK_SECRET_KEY,
diff --git a/apps/dashboard/src/app/debug/Debug.tsx b/apps/dashboard/src/app/debug/Debug.tsx
new file mode 100644
index 00000000..2693177a
--- /dev/null
+++ b/apps/dashboard/src/app/debug/Debug.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { api } from '@/trpc/client';
+import { useState } from 'react';
+
+export function Debug() {
+  const [sameSite, setSameSite] = useState<'lax' | 'strict' | 'none'>('lax');
+  const [domain, setDomain] = useState<string>('localhost');
+  const cookiePost = api.user.debugPostCookie.useMutation();
+  const cookieGet = api.user.debugGetCookie.useQuery({
+    domain,
+    sameSite,
+  });
+  return (
+    <div className="col gap-8">
+      <input
+        className="border p-4"
+        type="text"
+        value={domain}
+        onChange={(e) => setDomain(e.target.value)}
+      />
+      <select
+        className="border p-4"
+        value={sameSite}
+        onChange={(e) =>
+          setSameSite(e.target.value as 'lax' | 'strict' | 'none')
+        }
+      >
+        <option value="lax">Lax</option>
+        <option value="strict">Strict</option>
+        <option value="none">None</option>
+      </select>
+      <Button onClick={() => cookiePost.mutate({ domain, sameSite })}>
+        Set Cookie (POST)
+      </Button>
+      <Button onClick={() => cookieGet.refetch()}>Set Cookie (GET)</Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/debug/page.tsx b/apps/dashboard/src/app/debug/page.tsx
new file mode 100644
index 00000000..f9365ace
--- /dev/null
+++ b/apps/dashboard/src/app/debug/page.tsx
@@ -0,0 +1,5 @@
+import { Debug } from './Debug';
+
+export default function Page() {
+  return <Debug />;
+}
diff --git a/apps/dashboard/src/app/providers.tsx b/apps/dashboard/src/app/providers.tsx
index fedbd324..12bfed47 100644
--- a/apps/dashboard/src/app/providers.tsx
+++ b/apps/dashboard/src/app/providers.tsx
@@ -37,6 +37,13 @@ function AllProviders({ children }: { children: React.ReactNode }) {
       links: [
         httpLink({
           url: `${process.env.NEXT_PUBLIC_API_URL}/trpc`,
+          fetch(url, options) {
+            return fetch(url, {
+              ...options,
+              credentials: 'include',
+              mode: 'cors',
+            });
+          },
           async headers() {
             const token = await getToken();
             if (token) {
diff --git a/packages/trpc/src/routers/user.ts b/packages/trpc/src/routers/user.ts
index 5edc6e9f..6ffcc40e 100644
--- a/packages/trpc/src/routers/user.ts
+++ b/packages/trpc/src/routers/user.ts
@@ -32,4 +32,36 @@ export const userRouter = createTRPCRouter({
 
       return updatedUser;
     }),
+  debugPostCookie: protectedProcedure
+    .input(
+      z.object({
+        sameSite: z.enum(['lax', 'strict', 'none']),
+        domain: z.string(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      ctx.setCookie('debugCookie', new Date().toISOString(), {
+        domain: input.domain,
+        sameSite: input.sameSite,
+        httpOnly: true,
+        secure: true,
+        path: '/',
+      });
+    }),
+  debugGetCookie: protectedProcedure
+    .input(
+      z.object({
+        sameSite: z.enum(['lax', 'strict', 'none']),
+        domain: z.string(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      ctx.setCookie('debugCookie', new Date().toISOString(), {
+        domain: input.domain,
+        sameSite: input.sameSite,
+        httpOnly: true,
+        secure: true,
+        path: '/',
+      });
+    }),
 });
diff --git a/packages/trpc/src/trpc.ts b/packages/trpc/src/trpc.ts
index 44318c78..702a101a 100644
--- a/packages/trpc/src/trpc.ts
+++ b/packages/trpc/src/trpc.ts
@@ -15,14 +15,7 @@ export function createContext({ req, res }: CreateFastifyContextOptions) {
     session: getAuth(req),
     // we do not get types for `setCookie` from fastify
     // so define it here and be safe in routers
-    setCookie: (
-      key: string,
-      value: string,
-      options: {
-        maxAge: number;
-        path: string;
-      },
-    ) => {
+    setCookie: (key: string, value: string, options: any) => {
       // @ts-ignore
       res.setCookie(key, value, options);
     },