feat : new supabase instance

lib/supabase/browser-client.ts

@@ -0,0 +1,8 @@
+import { createBrowserClient } from '@supabase/ssr';
+
+export function createSupabaseBrowserClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+}

lib/supabase/server-client.ts

@@ -0,0 +1,54 @@
+import { type NextRequest, type NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import { getCookie, setCookie } from "cookies-next";
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+
+// server component can only get cookies and not set them, hence the "component" check
+export function createSupabaseServerClient(component: boolean = false) {
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return cookies().get(name)?.value;
+        },
+        set(name: string, value: string, options: CookieOptions) {
+          if (component) return;
+          cookies().set(name, value, options);
+        },
+        remove(name: string, options: CookieOptions) {
+          if (component) return;
+          cookies().set(name, "", options);
+        },
+      },
+    }
+  );
+}
+
+export function createSupabaseServerComponentClient() {
+  return createSupabaseServerClient(true);
+}
+
+export function createSupabaseReqResClient(
+  req: NextRequest,
+  res: NextResponse
+) {
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return getCookie(name, { req, res });
+        },
+        set(name: string, value: string, options: CookieOptions) {
+          setCookie(name, value, { req, res, ...options });
+        },
+        remove(name: string, options: CookieOptions) {
+          setCookie(name, "", { req, res, ...options });
+        },
+      },
+    }
+  );
+}

lib/supabase/use-session.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createSupabaseBrowserClient } from "./browser-client";
+import { Session } from "@supabase/supabase-js";
+
+export default function useSession() {
+  const [session, setSession] = useState<Session | null>(null);
+
+  useEffect(() => {
+    const supabase = createSupabaseBrowserClient();
+
+    const getSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+
+      setSession(session);
+    };
+
+    getSession();
+  }, []);
+
+  return session;
+}

package.json

@@ -14,11 +14,13 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@supabase/ssr": "^0.0.10",
+    "@supabase/supabase-js": "^2.39.3",
     "@tanstack/react-query": "^5.4.3",
     "@tanstack/react-query-devtools": "^5.8.1",
     "@tanstack/react-query-next-experimental": "^5.18.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "cookies-next": "^4.1.1",
     "lucide-react": "^0.291.0",
     "next": "14.0.1",
     "next-themes": "^0.2.1",