fix: the cookie error occuring for a long time fixed

src/app/api/auth/callback/route.ts

@@ -1,6 +1,7 @@
+import { cookies } from 'next/headers';
 import { NextResponse } from 'next/server';
 
-import { createSupabaseServerClient } from '@/lib/supabase/server-clients';
+import { createClient } from '@/lib/supabase/server-clients';
 
 export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url);
@@ -11,8 +12,8 @@ export async function GET(request: Request) {
   // const next = searchParams.get('next') ?? '/';
 
   if (code) {
-    const supabase = createSupabaseServerClient();
-
+    const cookieStore = cookies();
+    const supabase = createClient(cookieStore);
     const { error } = await supabase.auth.exchangeCodeForSession(code);
 
     if (!error) {

src/app/layout.tsx

@@ -43,3 +43,4 @@ export default function RootLayout({
 }
 
 //TODO:
+// when no notif in db, it gives an error. fix that

src/components/notifications/notifications-list.tsx

@@ -110,6 +110,10 @@ const NotificationsList = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [readStatus]);
 
+  if (newNotifications?.length === 0 && oldNotifications?.length === 0) {
+    return <p>No unread notifications</p>;
+  }
+
   return (
     <div>
       <div>

src/lib/server-user.ts

@@ -1,15 +1,21 @@
-import { createSupabaseServerClient } from '@/lib/supabase/server-clients';
+import { cookies } from 'next/headers';
+
+import { createClient } from '@/lib/supabase/server-clients';
 
 export async function getUser() {
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
   const {
     data: { user },
-  } = await createSupabaseServerClient().auth.getUser();
+  } = await supabase.auth.getUser();
   return user;
 }
 
 export async function getRole(user_id: string) {
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
   try {
-    const { data, error } = await createSupabaseServerClient()
+    const { data, error } = await supabase
       .from('profiles')
       .select('role')
       .eq('id', user_id);

src/lib/supabase/middleware.ts

@@ -0,0 +1,63 @@
+import { type CookieOptions, createServerClient } from '@supabase/ssr';
+import { type NextRequest, NextResponse } from 'next/server';
+
+import { SUPABASE_ANON_KEY, SUPABASE_URL } from '@/constant/env';
+
+export const createClient = (request: NextRequest) => {
+  // Create an unmodified response
+  let response = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  });
+
+  const supabase = createServerClient(
+    SUPABASE_URL as string,
+    SUPABASE_ANON_KEY,
+    {
+      cookies: {
+        get(name: string) {
+          return request.cookies.get(name)?.value;
+        },
+        set(name: string, value: string, options: CookieOptions) {
+          // If the cookie is updated, update the cookies for the request and response
+          request.cookies.set({
+            name,
+            value,
+            ...options,
+          });
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          });
+          response.cookies.set({
+            name,
+            value,
+            ...options,
+          });
+        },
+        remove(name: string, options: CookieOptions) {
+          // If the cookie is removed, update the cookies for the request and response
+          request.cookies.set({
+            name,
+            value: '',
+            ...options,
+          });
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          });
+          response.cookies.set({
+            name,
+            value: '',
+            ...options,
+          });
+        },
+      },
+    }
+  );
+
+  return { supabase, response };
+};

src/lib/supabase/server-clients.ts

@@ -1,51 +1,60 @@
 import { type CookieOptions, createServerClient } from '@supabase/ssr';
-import { deleteCookie, getCookie, setCookie } from 'cookies-next';
+import { getCookie, setCookie } from 'cookies-next';
 import { cookies } from 'next/headers';
 import { type NextRequest, type NextResponse } from 'next/server';
 
 import { SUPABASE_ANON_KEY, SUPABASE_URL } from '@/constant/env';
 
-// server component can only get cookies and not set them, hence the "component" check
-export function createSupabaseServerClient(component = false) {
+export function createSupabaseReqResClient(
+  req: NextRequest,
+  res: NextResponse
+) {
   cookies().getAll(); // Keep cookies in the JS execution context for Next.js build
   return createServerClient(SUPABASE_URL as string, SUPABASE_ANON_KEY, {
     cookies: {
       get(name: string) {
-        return getCookie(name, { cookies });
+        return getCookie(name, { req, res });
       },
       set(name: string, value: string, options: CookieOptions) {
-        if (component) return;
-        setCookie(name, value, { cookies, ...options });
+        setCookie(name, value, { req, res, ...options });
       },
       remove(name: string, options: CookieOptions) {
-        if (component) return;
-        deleteCookie(name, { cookies, ...options });
+        setCookie(name, '', { req, res, ...options });
       },
     },
   });
 }
 
-export function createSupabaseServerComponentClient() {
-  cookies().getAll(); // Keep cookies in the JS execution context for Next.js build
-  return createSupabaseServerClient(true);
-}
-
-export function createSupabaseReqResClient(
-  req: NextRequest,
-  res: NextResponse
-) {
-  cookies().getAll(); // Keep cookies in the JS execution context for Next.js build
+export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
   return createServerClient(SUPABASE_URL as string, SUPABASE_ANON_KEY, {
     cookies: {
       get(name: string) {
-        return getCookie(name, { req, res });
+        return cookieStore.get(name)?.value;
       },
       set(name: string, value: string, options: CookieOptions) {
-        setCookie(name, value, { req, res, ...options });
+        try {
+          cookieStore.set({ name, value, ...options });
+        } catch (error) {
+          // The `set` method was called from a Server Component.
+          // This can be ignored if you have middleware refreshing
+          // user sessions.
+        }
       },
       remove(name: string, options: CookieOptions) {
-        setCookie(name, '', { req, res, ...options });
+        try {
+          cookieStore.set({ name, value: '', ...options });
+        } catch (error) {
+          // The `delete` method was called from a Server Component.
+          // This can be ignored if you have middleware refreshing
+          // user sessions.
+        }
       },
     },
   });
-}
+};
+
+export const createSupabaseServerClient = () => {
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
+  return supabase;
+};