fix: small improvements/fixes to cookie chunker in ssr (#760)

supabase · Apr 10, 2024 · ef61542 · ef61542
1 parent 5f3ef0a
commit ef61542
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 73 deletions.
diff --git a/.changeset/bright-ravens-confess.md b/.changeset/bright-ravens-confess.md
@@ -0,0 +1,5 @@
+---
+'@supabase/ssr': minor
+---
+
+Improves the cookie chunker in @supabase/ssr to get rid of edge cases in saving and removing cookies.
diff --git a/packages/ssr/src/createBrowserClient.ts b/packages/ssr/src/createBrowserClient.ts
@@ -58,6 +58,38 @@ export function createBrowserClient<
 		};
 	}
 
+	const deleteAllChunks = async (key: string) => {
+		await deleteChunks(
+			key,
+			async (chunkName) => {
+				if (typeof cookies.get === 'function') {
+					return await cookies.get(chunkName);
+				}
+				if (isBrowser()) {
+					const documentCookies = parse(document.cookie);
+					return documentCookies[chunkName];
+				}
+			},
+			async (chunkName) => {
+				if (typeof cookies.remove === 'function') {
+					await cookies.remove(chunkName, {
+						...DEFAULT_COOKIE_OPTIONS,
+						...cookieOptions,
+						maxAge: 0
+					});
+				} else {
+					if (isBrowser()) {
+						document.cookie = serialize(chunkName, '', {
+							...DEFAULT_COOKIE_OPTIONS,
+							...cookieOptions,
+							maxAge: 0
+						});
+					}
+				}
+			}
+		);
+	};
+
 	const cookieClientOptions = {
 		global: {
 			headers: {
@@ -85,26 +117,30 @@ export function createBrowserClient<
 					return chunkedCookie;
 				},
 				setItem: async (key: string, value: string) => {
+					// first remove all chunks so there is no overlap
+					await deleteAllChunks(key);
+
 					const chunks = await createChunks(key, value);
-					await Promise.all(
-						chunks.map(async (chunk) => {
-							if (typeof cookies.set === 'function') {
-								await cookies.set(chunk.name, chunk.value, {
+
+					for (let i = 0; i < chunks.length; i += 1) {
+						const chunk = chunks[i];
+
+						if (typeof cookies.set === 'function') {
+							await cookies.set(chunk.name, chunk.value, {
+								...DEFAULT_COOKIE_OPTIONS,
+								...cookieOptions,
+								maxAge: DEFAULT_COOKIE_OPTIONS.maxAge
+							});
+						} else {
+							if (isBrowser()) {
+								document.cookie = serialize(chunk.name, chunk.value, {
 									...DEFAULT_COOKIE_OPTIONS,
 									...cookieOptions,
 									maxAge: DEFAULT_COOKIE_OPTIONS.maxAge
 								});
-							} else {
-								if (isBrowser()) {
-									document.cookie = serialize(chunk.name, chunk.value, {
-										...DEFAULT_COOKIE_OPTIONS,
-										...cookieOptions,
-										maxAge: DEFAULT_COOKIE_OPTIONS.maxAge
-									});
-								}
 							}
-						})
-					);
+						}
+					}
 				},
 				removeItem: async (key: string) => {
 					if (typeof cookies.remove === 'function' && typeof cookies.get !== 'function') {
@@ -114,35 +150,7 @@ export function createBrowserClient<
 						return;
 					}
 
-					await deleteChunks(
-						key,
-						async (chunkName) => {
-							if (typeof cookies.get === 'function') {
-								return await cookies.get(chunkName);
-							}
-							if (isBrowser()) {
-								const documentCookies = parse(document.cookie);
-								return documentCookies[chunkName];
-							}
-						},
-						async (chunkName) => {
-							if (typeof cookies.remove === 'function') {
-								await cookies.remove(chunkName, {
-									...DEFAULT_COOKIE_OPTIONS,
-									...cookieOptions,
-									maxAge: 0
-								});
-							} else {
-								if (isBrowser()) {
-									document.cookie = serialize(chunkName, '', {
-										...DEFAULT_COOKIE_OPTIONS,
-										...cookieOptions,
-										maxAge: 0
-									});
-								}
-							}
-						}
-					);
+					await deleteAllChunks(key);
 				}
 			}
 		}

diff --git a/packages/ssr/src/createServerClient.ts b/packages/ssr/src/createServerClient.ts
@@ -46,6 +46,26 @@ export function createServerClient<
 		};
 	}
 
+	const deleteAllChunks = async (key: string) => {
+		await deleteChunks(
+			key,
+			async (chunkName) => {
+				if (typeof cookies.get === 'function') {
+					return await cookies.get(chunkName);
+				}
+			},
+			async (chunkName) => {
+				if (typeof cookies.remove === 'function') {
+					return await cookies.remove(chunkName, {
+						...DEFAULT_COOKIE_OPTIONS,
+						...cookieOptions,
+						maxAge: 0
+					});
+				}
+			}
+		);
+	};
+
 	const cookieClientOptions = {
 		global: {
 			headers: {
@@ -69,18 +89,22 @@ export function createServerClient<
 					return chunkedCookie;
 				},
 				setItem: async (key: string, value: string) => {
-					const chunks = createChunks(key, value);
-					await Promise.all(
-						chunks.map(async (chunk) => {
-							if (typeof cookies.set === 'function') {
-								await cookies.set(chunk.name, chunk.value, {
-									...DEFAULT_COOKIE_OPTIONS,
-									...cookieOptions,
-									maxAge: DEFAULT_COOKIE_OPTIONS.maxAge
-								});
-							}
-						})
-					);
+					if (typeof cookies.set === 'function') {
+						// first delete all chunks so that there would be no overlap
+						await deleteAllChunks(key);
+
+						const chunks = createChunks(key, value);
+
+						for (let i = 0; i < chunks.length; i += 1) {
+							const chunk = chunks[i];
+
+							await cookies.set(chunk.name, chunk.value, {
+								...DEFAULT_COOKIE_OPTIONS,
+								...cookieOptions,
+								maxAge: DEFAULT_COOKIE_OPTIONS.maxAge
+							});
+						}
+					}
 				},
 				removeItem: async (key: string) => {
 					if (typeof cookies.remove === 'function' && typeof cookies.get !== 'function') {
@@ -90,23 +114,7 @@ export function createServerClient<
 						return;
 					}
 
-					deleteChunks(
-						key,
-						async (chunkName) => {
-							if (typeof cookies.get === 'function') {
-								return await cookies.get(chunkName);
-							}
-						},
-						async (chunkName) => {
-							if (typeof cookies.remove === 'function') {
-								return await cookies.remove(chunkName, {
-									...DEFAULT_COOKIE_OPTIONS,
-									...cookieOptions,
-									maxAge: 0
-								});
-							}
-						}
-					);
+					await deleteAllChunks(key);
 				}
 			}
 		}

diff --git a/packages/ssr/src/utils/chunker.ts b/packages/ssr/src/utils/chunker.ts
@@ -99,7 +99,6 @@ export async function deleteChunks(
 
 	if (value) {
 		await removeChunk(key);
-		return;
 	}
 
 	for (let i = 0; ; i++) {