feat: integrate Supabase authentication and database client into the web application

Author: Arun-kushwaha007

apps/backend/prisma/schema.prisma

@@ -3,8 +3,9 @@ generator client {
 }
 
 datasource db {
-  provider = "postgresql"
-  url      = env("SUPABASE_DATABASE_URL")
+  provider  = "postgresql"
+  url       = env("SUPABASE_DATABASE_URL")
+  directUrl = env("DIRECT_URL")
 }
 
 enum GroupRole {

apps/web/app/supabase-test/page.tsx

@@ -0,0 +1,37 @@
+import { createClient } from '@/utils/supabase/server';
+import { cookies } from 'next/headers';
+
+export default async function Page() {
+  const cookieStore = await cookies();
+  const supabase = createClient(cookieStore);
+
+  // Note: This expects a 'todos' table to exist in your Supabase project.
+  const { data: todos, error } = await supabase.from('todos').select();
+
+  if (error) {
+    return (
+      <div className="p-8">
+        <h1 className="text-2xl font-bold text-red-500">Supabase Connection Error</h1>
+        <pre className="mt-4 p-4 bg-gray-100 rounded">{JSON.stringify(error, null, 2)}</pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8">
+      <h1 className="text-2xl font-bold mb-4">Supabase Connection Success</h1>
+      <p className="mb-4 text-gray-600">Successfully connected to: {process.env.NEXT_PUBLIC_SUPABASE_URL}</p>
+      
+      <h2 className="text-xl font-semibold mb-2">Todos:</h2>
+      {todos && todos.length > 0 ? (
+        <ul className="list-disc pl-5">
+          {todos.map((todo: any) => (
+            <li key={todo.id}>{todo.name}</li>
+          ))}
+        </ul>
+      ) : (
+        <p className="text-gray-500 italic">No todos found or 'todos' table is empty.</p>
+      )}
+    </div>
+  );
+}

apps/web/middleware.ts

@@ -2,13 +2,14 @@ import { NextRequest, NextResponse } from 'next/server';
 import { authCookies, accessCookieOptions, refreshCookieOptions } from './src/lib/authCookies';
 import { getBackendBaseUrl } from './src/lib/env';
 import { isJwtExpiringSoon } from './src/lib/jwt';
+import { createClient } from './utils/supabase/middleware';
 
 function isProtectedPath(pathname: string): boolean {
   return pathname === '/dashboard' || pathname.startsWith('/dashboard/');
 }
 
 function isAuthPage(pathname: string): boolean {
-  return pathname === '/login' || pathname === '/register';
+  return pathname === '/login' || pathname === '/register' || pathname === '/supabase-test';
 }
 
 function parseCookieValue(setCookieHeader: string | null, cookieName: string): string | null {
@@ -84,12 +85,23 @@ export async function middleware(req: NextRequest) {
   const pathname = req.nextUrl.pathname;
   const accessToken = req.cookies.get(authCookies.accessToken)?.value ?? null;
 
+  // 1. Handle Supabase session refreshing
+  let res = NextResponse.next({
+    request: {
+      headers: req.headers,
+    },
+  });
+  
+  const supabase = createClient(req, res);
+  // This refreshes the session if needed
+  await supabase.auth.getUser();
+
   if (isAuthPage(pathname) && accessToken) {
     return NextResponse.redirect(new URL('/dashboard', req.url));
   }
 
   if (!isProtectedPath(pathname)) {
-    return NextResponse.next();
+    return res;
   }
 
   if (!accessToken) {
@@ -99,20 +111,19 @@ export async function middleware(req: NextRequest) {
   }
 
   if (!isJwtExpiringSoon(accessToken, 60_000)) {
-    return NextResponse.next();
+    return res;
   }
 
   const refreshed = await tryRefreshTokens(req);
   if (!refreshed) {
-    return NextResponse.next();
+    return res;
   }
 
-  const res = NextResponse.next();
   res.cookies.set(authCookies.accessToken, refreshed.accessToken, accessCookieOptions);
   res.cookies.set(authCookies.refreshToken, refreshed.refreshToken, refreshCookieOptions);
   return res;
 }
 
 export const config = {
-  matcher: ['/dashboard/:path*', '/login', '/register'],
+  matcher: ['/dashboard/:path*', '/login', '/register', '/supabase-test'],
 };

apps/web/package.json

@@ -11,6 +11,8 @@
     },
     "dependencies": {
         "@fairshare/shared-types": "workspace:*",
+        "@supabase/ssr": "^0.9.0",
+        "@supabase/supabase-js": "^2.100.1",
         "@types/gsap": "^3.0.0",
         "framer-motion": "^12.35.0",
         "gsap": "^3.14.2",

apps/web/tsconfig.json

@@ -16,11 +16,16 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "plugins": [
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": [
     "**/*.ts",

apps/web/utils/supabase/client.ts

@@ -0,0 +1,11 @@
+import { createBrowserClient } from "@supabase/ssr";
+import { type SupabaseClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+export const createClient = (): SupabaseClient =>
+  createBrowserClient(
+    supabaseUrl!,
+    supabaseKey!,
+  );

apps/web/utils/supabase/middleware.ts

@@ -0,0 +1,26 @@
+import { createServerClient } from "@supabase/ssr";
+import { type SupabaseClient } from "@supabase/supabase-js";
+import { type NextRequest, NextResponse } from "next/server";
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+export const createClient = (request: NextRequest, response: NextResponse): SupabaseClient => {
+  return createServerClient(
+    supabaseUrl!,
+    supabaseKey!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
+          cookiesToSet.forEach(({ name, value, options }) =>
+            response.cookies.set(name, value, options)
+          )
+        },
+      },
+    },
+  );
+};

apps/web/utils/supabase/server.ts

@@ -0,0 +1,29 @@
+import { createServerClient } from "@supabase/ssr";
+import { type SupabaseClient } from "@supabase/supabase-js";
+import { cookies } from "next/headers";
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+export const createClient = (cookieStore: Awaited<ReturnType<typeof cookies>>): SupabaseClient => {
+  return createServerClient(
+    supabaseUrl!,
+    supabaseKey!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
+          } catch {
+            // The `setAll` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
+      },
+    },
+  );
+};