ENG-520: break-out infrastructure from ENG-373

.github/workflows/roam-pr.yaml

@@ -16,6 +16,9 @@ env:
 jobs:
   deploy:
     runs-on: ubuntu-latest
+    env:
+      SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+      SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
     steps:
       - name: Checkout Code
         uses: actions/checkout@v4

apps/roam/package.json

@@ -28,6 +28,8 @@
     "@octokit/auth-app": "^7.1.4",
     "@octokit/core": "^6.1.3",
     "@repo/types": "*",
+    "@supabase/auth-js": "^2.70.0",
+    "@supabase/supabase-js": "^2.50.0",
     "@tldraw/tldraw": "^2.0.0-alpha.12",
     "@vercel/blob": "^0.27.0",
     "contrast-color": "^1.0.1",

apps/roam/scripts/compile.ts

@@ -129,6 +129,10 @@ export const compile = ({
       outdir,
       bundle: true,
       format,
+      define: {
+        SUPABASE_URL: JSON.stringify(process.env.SUPABASE_URL!),
+        SUPABASE_ANON_KEY: JSON.stringify(process.env.SUPABASE_ANON_KEY!)
+      },
       sourcemap: process.env.NODE_ENV === "production" ? undefined : "inline",
       minify: process.env.NODE_ENV === "production",
       entryNames: out,

apps/roam/tsconfig.json

@@ -12,7 +12,6 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "forceConsistentCasingInFileNames": true,
-
     "jsx": "react",
     "noUncheckedIndexedAccess": false
   }

apps/website/app/utils/supabase/client.ts

@@ -0,0 +1,14 @@
+import { createClient as createSupabaseClient } from "@supabase/supabase-js";
+import { Database } from "@repo/database/types.gen.ts";
+
+// Inspired by https://supabase.com/ui/docs/nextjs/password-based-auth
+
+export const createClient = () => {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!url || !key) {
+    throw new Error("Missing required Supabase environment variables");
+  }
+  return createSupabaseClient<Database, "public", Database["public"]>(url, key);
+};

apps/website/app/utils/supabase/middleware.ts

@@ -0,0 +1,70 @@
+import { createServerClient } from "@supabase/ssr";
+import { NextResponse, type NextRequest } from "next/server";
+
+// Inspired by https://supabase.com/ui/docs/nextjs/password-based-auth
+
+export const updateSession = async (request: NextRequest) => {
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseKey) {
+    throw new Error("Missing required Supabase environment variables");
+  }
+
+  let supabaseResponse = NextResponse.next({ request });
+
+  const supabase = createServerClient(supabaseUrl, supabaseKey, {
+    cookies: {
+      getAll() {
+        return request.cookies.getAll();
+      },
+      setAll(cookiesToSet) {
+        cookiesToSet.forEach(({ name, value }) =>
+          request.cookies.set(name, value),
+        );
+        supabaseResponse = NextResponse.next({
+          request,
+        });
+        cookiesToSet.forEach(({ name, value, options }) =>
+          supabaseResponse.cookies.set(name, value, options),
+        );
+      },
+    },
+  });
+
+  // Do not run code between createServerClient and
+  // supabase.auth.getUser(). A simple mistake could make it very hard to debug
+  // issues with users being randomly logged out.
+
+  // IMPORTANT: DO NOT REMOVE auth.getUser()
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (
+    !user &&
+    !request.nextUrl.pathname.startsWith("/login") &&
+    !request.nextUrl.pathname.startsWith("/auth")
+  ) {
+    // no user, potentially respond by redirecting the user to the login page
+    const url = request.nextUrl.clone();
+    url.pathname = "/auth/login";
+    return NextResponse.redirect(url);
+  }
+
+  // IMPORTANT: You *must* return the supabaseResponse object as it is.
+  // If you're creating a new response object with NextResponse.next() make sure to:
+  // 1. Pass the request in it, like so:
+  //    const myNewResponse = NextResponse.next({ request })
+  // 2. Copy over the cookies, like so:
+  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
+  // 3. Change the myNewResponse object to fit your needs, but avoid changing
+  //    the cookies!
+  // 4. Finally:
+  //    return myNewResponse
+  // If this is not done, you may be causing the browser and server to go out
+  // of sync and terminate the user's session prematurely!
+
+  return supabaseResponse;
+};

apps/website/app/utils/supabase/server.ts

@@ -2,6 +2,8 @@ import { createServerClient, type CookieOptions } from "@supabase/ssr";
 import { cookies } from "next/headers";
 import { Database } from "@repo/database/types.gen.ts";
 
+// Inspired by https://supabase.com/ui/docs/nextjs/password-based-auth
+
 export const createClient = async () => {
   const cookieStore = await cookies();
   const supabaseUrl = process.env.SUPABASE_URL;

apps/website/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
+    "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },

packages/ui/package.json

@@ -22,8 +22,8 @@
     "ui": "npx shadcn@latest"
   },
   "devDependencies": {
-    "@repo/tailwind-config": "*",
     "@repo/eslint-config": "*",
+    "@repo/tailwind-config": "*",
     "@repo/typescript-config": "*",
     "@turbo/gen": "^1.12.4",
     "@types/eslint": "^8.56.5",
@@ -34,6 +34,8 @@
     "typescript": "5.5.4"
   },
   "dependencies": {
+    "@supabase/auth-ui-react": "0.4.7",
+    "@supabase/supabase-js": "^2.50.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.468.0",

packages/ui/src/lib/supabase/client.ts

@@ -0,0 +1,14 @@
+import { createClient as createSupabaseClient } from "@supabase/supabase-js";
+import { Database } from "@repo/database/types.gen.ts";
+
+declare const SUPABASE_URL: string;
+declare const SUPABASE_ANON_KEY: string;
+
+// Inspired by https://supabase.com/ui/docs/react/password-based-auth
+
+export const createClient = () => {
+  return createSupabaseClient<Database, "public", Database["public"]>(
+    SUPABASE_URL,
+    SUPABASE_ANON_KEY,
+  );
+};