Refactored Supabase Clients using the new recommended approach by Supabase by centralizing all clients around one single implementation. (#51)

The previous clients have been marked as deprecated and will be removed at some point.

packages/supabase/src/clients/middleware-client.ts

@@ -0,0 +1,38 @@
+import 'server-only';
+
+import { type NextRequest, NextResponse } from 'next/server';
+
+import { createServerClient } from '@supabase/ssr';
+
+import { Database } from '../database.types';
+import { getSupabaseClientKeys } from '../get-supabase-client-keys';
+
+/**
+ * Creates a middleware client for Supabase.
+ *
+ * @param {NextRequest} request - The Next.js request object.
+ * @param {NextResponse} response - The Next.js response object.
+ */
+export function createMiddlewareClient<GenericSchema = Database>(
+  request: NextRequest,
+  response: NextResponse,
+) {
+  const keys = getSupabaseClientKeys();
+
+  return createServerClient<GenericSchema>(keys.url, keys.anonKey, {
+    cookies: {
+      getAll() {
+        return request.cookies.getAll();
+      },
+      setAll(cookiesToSet) {
+        cookiesToSet.forEach(({ name, value }) =>
+          request.cookies.set(name, value),
+        );
+
+        cookiesToSet.forEach(({ name, value, options }) =>
+          response.cookies.set(name, value, options),
+        );
+      },
+    },
+  });
+}

packages/supabase/src/clients/middleware.client.ts

@@ -1,65 +0,0 @@
-import { type NextRequest, NextResponse } from 'next/server';
-
-import { type CookieOptions, createServerClient } from '@supabase/ssr';
-
-import { Database } from '../database.types';
-import { getSupabaseClientKeys } from '../get-supabase-client-keys';
-
-/**
- * Creates a middleware client for Supabase.
- *
- * @param {NextRequest} request - The Next.js request object.
- * @param {NextResponse} response - The Next.js response object.
- */
-export function createMiddlewareClient<GenericSchema = Database>(
-  request: NextRequest,
-  response: NextResponse,
-) {
-  const keys = getSupabaseClientKeys();
-
-  return createServerClient<GenericSchema>(keys.url, keys.anonKey, {
-    cookies: getCookieStrategy(request, response),
-  });
-}
-
-function getCookieStrategy(request: NextRequest, response: NextResponse) {
-  return {
-    set: (name: string, value: string, options: CookieOptions) => {
-      request.cookies.set({ name, value, ...options });
-
-      response = NextResponse.next({
-        request: {
-          headers: request.headers,
-        },
-      });
-
-      response.cookies.set({
-        name,
-        value,
-        ...options,
-      });
-    },
-    get: (name: string) => {
-      return request.cookies.get(name)?.value;
-    },
-    remove: (name: string, options: CookieOptions) => {
-      request.cookies.set({
-        name,
-        value: '',
-        ...options,
-      });
-
-      response = NextResponse.next({
-        request: {
-          headers: request.headers,
-        },
-      });
-
-      response.cookies.set({
-        name,
-        value: '',
-        ...options,
-      });
-    },
-  };
-}

packages/supabase/src/clients/route-handler-client.ts

@@ -20,6 +20,7 @@ const keys = getSupabaseClientKeys();
 
 /**
  * @name getSupabaseRouteHandlerClient
+ * @deprecated Use `getSupabaseServerClient` instead.
  * @description Get a Supabase client for use in the Route Handler Routes
  */
 export function getSupabaseRouteHandlerClient<GenericSchema = Database>(

packages/supabase/src/clients/server-actions-client.ts

@@ -25,6 +25,11 @@ function createServerSupabaseClient<
   });
 }
 
+/**
+ * @name getSupabaseServerComponentClient
+ * @deprecated Use `getSupabaseServerClient` instead.
+ * @param params
+ */
 export function getSupabaseServerActionClient<
   GenericSchema extends Database = Database,
 >(params?: { admin: boolean }) {

packages/supabase/src/clients/server-admin-client.ts

@@ -0,0 +1,31 @@
+import 'server-only';
+
+import { unstable_noStore as noStore } from 'next/cache';
+
+import { createClient } from '@supabase/supabase-js';
+
+import { Database } from '../database.types';
+import {
+  getServiceRoleKey,
+  warnServiceRoleKeyUsage,
+} from '../get-service-role-key';
+import { getSupabaseClientKeys } from '../get-supabase-client-keys';
+
+/**
+ * @name getSupabaseServerAdminClient
+ * @description Get a Supabase client for use in the Server with admin access to the database.
+ */
+export function getSupabaseServerAdminClient<GenericSchema = Database>() {
+  noStore();
+  warnServiceRoleKeyUsage();
+
+  const url = getSupabaseClientKeys().url;
+
+  return createClient<GenericSchema>(url, getServiceRoleKey(), {
+    auth: {
+      persistSession: false,
+      detectSessionInUrl: false,
+      autoRefreshToken: false,
+    },
+  });
+}

packages/supabase/src/clients/server-client.ts

@@ -0,0 +1,39 @@
+import 'server-only';
+
+import { unstable_noStore as noStore } from 'next/cache';
+import { cookies } from 'next/headers';
+
+import { createServerClient } from '@supabase/ssr';
+
+import { Database } from '../database.types';
+import { getSupabaseClientKeys } from '../get-supabase-client-keys';
+
+/**
+ * @name getSupabaseServerClient
+ * @description Creates a Supabase client for use in the Server.
+ */
+export function getSupabaseServerClient<GenericSchema = Database>() {
+  noStore();
+
+  const cookieStore = cookies();
+  const keys = getSupabaseClientKeys();
+
+  return createServerClient<GenericSchema>(keys.url, keys.anonKey, {
+    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.
+        }
+      },
+    },
+  });
+}

packages/supabase/src/hooks/use-supabase.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { getSupabaseBrowserClient } from '../clients/browser.client';
+import { getSupabaseBrowserClient } from '../clients/browser-client';
 
 export function useSupabase() {
   return useMemo(() => getSupabaseBrowserClient(), []);