Chore: Implement singleton pattern for createClientComponentClient fu…

…nction (#550) * implement singleton pattern for createClientComponentClient
supabase · May 21, 2023 · 008a08c · 008a08c
1 parent 5d338e8
commit 008a08c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 38 deletions.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -1,27 +1,27 @@
 {
-  "mode": "pre",
-  "tag": "next",
-  "initialVersions": {
-    "@example/nextjs": "0.0.0",
-    "@example/nextjs-server-components": "0.0.0",
-    "@example/sveltekit": "0.0.0",
-    "config": "0.1.0",
-    "@supabase/auth-helpers-nextjs": "0.6.0",
-    "@supabase/auth-helpers-react": "0.3.1",
-    "@supabase/auth-helpers-remix": "0.1.8",
-    "@supabase/auth-helpers-shared": "0.3.3",
-    "@supabase/auth-helpers-sveltekit": "0.9.3",
-    "tsconfig": "0.1.1"
-  },
-  "changesets": [
-    "brave-lizards-thank",
-    "cyan-dancers-care",
-    "eighty-chefs-protect",
-    "eleven-radios-share",
-    "lazy-cows-shake",
-    "plenty-seas-build",
-    "silly-beds-watch",
-    "six-eggs-search",
-    "violet-frogs-know"
-  ]
+	"mode": "pre",
+	"tag": "next",
+	"initialVersions": {
+		"@example/nextjs": "0.0.0",
+		"@example/nextjs-server-components": "0.0.0",
+		"@example/sveltekit": "0.0.0",
+		"config": "0.1.0",
+		"@supabase/auth-helpers-nextjs": "0.6.0",
+		"@supabase/auth-helpers-react": "0.3.1",
+		"@supabase/auth-helpers-remix": "0.1.8",
+		"@supabase/auth-helpers-shared": "0.3.3",
+		"@supabase/auth-helpers-sveltekit": "0.9.3",
+		"tsconfig": "0.1.1"
+	},
+	"changesets": [
+		"brave-lizards-thank",
+		"cyan-dancers-care",
+		"eighty-chefs-protect",
+		"eleven-radios-share",
+		"lazy-cows-shake",
+		"plenty-seas-build",
+		"silly-beds-watch",
+		"six-eggs-search",
+		"violet-frogs-know"
+	]
 }
diff --git a/.changeset/silly-laws-give.md b/.changeset/silly-laws-give.md
@@ -0,0 +1,5 @@
+---
+'@supabase/auth-helpers-nextjs': patch
+---
+
+Implement singleton pattern for createClientComponentClient to simplify implementation
diff --git a/packages/nextjs/src/clientComponentClient.ts b/packages/nextjs/src/clientComponentClient.ts
@@ -4,6 +4,9 @@ import {
 	SupabaseClientOptionsWithoutAuth,
 	createSupabaseClient
 } from '@supabase/auth-helpers-shared';
+import { SupabaseClient } from '@supabase/supabase-js';
+
+let supabase: SupabaseClient | undefined;
 
 export function createClientComponentClient<
 	Database = any,
@@ -27,18 +30,27 @@ export function createClientComponentClient<
 		);
 	}
 
-	return createSupabaseClient<Database, SchemaName>(supabaseUrl, supabaseKey, {
-		...options,
-		global: {
-			...options?.global,
-			headers: {
-				...options?.global?.headers,
-				'X-Client-Info': `${PACKAGE_NAME}@${PACKAGE_VERSION}`
+	const _supabase =
+		supabase ??
+		createSupabaseClient<Database, SchemaName>(supabaseUrl, supabaseKey, {
+			...options,
+			global: {
+				...options?.global,
+				headers: {
+					...options?.global?.headers,
+					'X-Client-Info': `${PACKAGE_NAME}@${PACKAGE_VERSION}`
+				}
+			},
+			auth: {
+				storageKey: cookieOptions?.name,
+				storage: new BrowserCookieAuthStorageAdapter(cookieOptions)
 			}
-		},
-		auth: {
-			storageKey: cookieOptions?.name,
-			storage: new BrowserCookieAuthStorageAdapter(cookieOptions)
-		}
-	});
+		});
+
+	// For SSG and SSR always create a new Supabase client
+	if (typeof window === 'undefined') return _supabase;
+	// Create the Supabase client once in the client
+	if (!supabase) supabase = _supabase;
+
+	return supabase;
 }