supabase · silentworks · Oct 26, 2023 · Oct 20, 2023 · Oct 20, 2023 · Oct 20, 2023
@@ -0,0 +1,5 @@
+---
+'@supabase/auth-helpers-shared': minor
+---
+
+Add cookie chunking for large JWTs
@@ -99,7 +99,7 @@ export const actions = {
  }
  });
 
- if (!error) {
+ if (error) {
  return fail(500, {
  createMagicLink: {
  values: {

@@ -27,7 +27,7 @@
  {/if}
 
  {#if $page.url.searchParams.get('auth-type') === 'magiclink'}
- <form action="/?/create-magiclink" method="post" use:enhance={handleSubmit}>
+ <form action="/?/send-magiclink" method="post" use:enhance={handleSubmit}>
  <div class="field">
  <label for="email" class="label">Email</label>
  <p class="control">

@@ -16,6 +16,8 @@
  "build:ssr": "turbo run build --filter=@supabase/ssr",
  "dev": "turbo run dev --parallel",
  "lint": "turbo run lint --filter=!@example/*",
+ "test": "turbo run test",
+ "test:watch": "turbo run test:watch",
  "check": "prettier --check .",
  "format": "prettier --write .",
  "docs": "typedoc",
@@ -40,17 +42,6 @@
  "peerDependencies": {
  "typescript": "4.0.x || 4.1.x || 4.2.x || 4.3.x || 4.4.x || 4.5.x || 4.6.x"
  },
- "pnpm": {
- "overrides": {
- "@changesets/assemble-release-plan": "5.2.3"
- },
- "overrides-notes": {
- "@changesets/assemble-release-plan": "patched until https://github.com/changesets/changesets/issues/835 is resolved"
- },
- "patchedDependencies": {
- "@changesets/[email protected]": "patches/@[email protected]"
- }
- },
  "lint-staged": {
  "**/*.{ts,tsx,md}": [
  "prettier --check"

@@ -12,7 +12,9 @@
  ],
  "scripts": {
  "lint": "tsc",
- "build": "tsup"
+ "build": "tsup",
+ "test": "vitest run",
+ "test:watch": "vitest"
  },
  "repository": {
  "type": "git",
@@ -38,7 +40,8 @@
  "react": ">=17.0.2 <18.0.0 || >=18.0.0-0 <19.0.0",
  "react-dom": "^17.0.2 || ^18.0.0-0",
  "tsconfig": "workspace:*",
- "tsup": "^6.7.0"
+ "tsup": "^6.7.0",
+ "vitest": "^0.34.6"
  },
  "dependencies": {
  "jose": "^4.14.4"

@@ -0,0 +1,61 @@
+// No clue why, but 3600 matches 4kb in the browser
+let MAX_CHUNK_SIZE = 3600;
+let re: RegExp | null = new RegExp('.{1,' + MAX_CHUNK_SIZE + '}', 'g');
+
+interface Chunk {
+ name: string;
+ value: string;
+}
+
+export function setMaxChunkSize(size: number) {
+ MAX_CHUNK_SIZE = size;
+ re = null;
+}
+
+/**
+ * create chunks from a string and return an array of object
+ */
+export function createChunks(key: string, value: string): Chunk[] {
+ if (re === null) {
+ re = new RegExp('.{1,' + MAX_CHUNK_SIZE + '}', 'g');
+ }
+
+ // check the length of the string to work out if it should be returned or chunked
+ const chunkCount = Math.ceil(value.length / MAX_CHUNK_SIZE);
+
+ if (chunkCount === 1) {
+ return [{ name: key, value }];
+ }
+
+ const chunks: Chunk[] = [];
+ // split string into a array based on the regex
+ const values = value.match(re);
+ values?.forEach((value, i) => {
+ const name: string = `${key}.${i}`;
+ chunks.push({ name, value });
+ });
+
+ return chunks;
+}
+
+// Get fully constructed chunks
+export function combineChunk(
+ key: string,
+ retrieveChunk: (name: string) => string | null | undefined = () => {
+ return null;
+ }
+) {
+ let values: string[] = [];
+ for (let i = 0; ; i++) {
+ const chunkName = `${key}.${i}`;
+ const chunk = retrieveChunk(chunkName);
+
+ if (!chunk) {
+ break;
+ }
+
+ values.push(chunk);
+ }
+
+ return values.length ? values.join('') : null;
+}
@@ -1,6 +1,7 @@
 import { GoTrueClientOptions, Session } from '@supabase/supabase-js';
 import { DEFAULT_COOKIE_OPTIONS, parseSupabaseCookie, stringifySupabaseSession } from './utils';
 import { CookieOptions, DefaultCookieOptions } from './types';
+import { combineChunk, createChunks } from './chunker';
 
 export interface StorageAdapter extends Exclude<GoTrueClientOptions['storage'], undefined> {}
 
@@ -22,14 +23,20 @@ export abstract class CookieAuthStorageAdapter implements StorageAdapter {
  getItem(key: string): string | Promise<string | null> | null {
  const value = this.getCookie(key);
 
- if (!value) return null;
-
  // pkce code verifier
- if (key.endsWith('-code-verifier')) {
+ if (key.endsWith('-code-verifier') && value) {
  return value;
  }
 
- return JSON.stringify(parseSupabaseCookie(value));
+ if (value) {
+ return JSON.stringify(parseSupabaseCookie(value));
+ }
+
+ const chunks = combineChunk(key, (chunkName) => {
+ return this.getCookie(chunkName);
+ });
+
+ return chunks !== null ? JSON.stringify(parseSupabaseCookie(chunks)) : null;
  }
 
  setItem(key: string, value: string): void | Promise<void> {
@@ -42,10 +49,34 @@ export abstract class CookieAuthStorageAdapter implements StorageAdapter {
  let session: Session = JSON.parse(value);
  const sessionStr = stringifySupabaseSession(session);
 
- this.setCookie(key, sessionStr);
+ // split session string before setting cookie
+ const sessionChunks = createChunks(key, sessionStr);
+
+ sessionChunks.forEach((sess) => {
+ this.setCookie(sess.name, sess.value);
+ });
  }
 
  removeItem(key: string): void | Promise<void> {
- this.deleteCookie(key);
+ this._deleteSingleCookie(key);
+ this._deleteChunkedCookies(key);
+ }
+
+ private _deleteSingleCookie(key: string) {
+ if (this.getCookie(key)) {
+ this.deleteCookie(key);
+ }
+ }
+
+ private _deleteChunkedCookies(key: string, from = 0) {
+ for (let i = from; ; i++) {
+ const cookieName = `${key}.${i}`;
+ const value = this.getCookie(cookieName);
+
+ if (value === undefined) {
+ break;
+ }
+ this.deleteCookie(cookieName);
+ }
  }
 }
@@ -2,5 +2,6 @@ import { DefaultCookieOptions } from '../types';
 
 export const DEFAULT_COOKIE_OPTIONS: DefaultCookieOptions = {
  path: '/',
+ sameSite: 'lax',
  maxAge: 60 * 60 * 24 * 365 * 1000
 };
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { setMaxChunkSize, combineChunk, createChunks } from '../src/chunker';
+import { CHUNK_STRING } from './helper';
+
+describe('chunker', () => {
+ it('should not chunk and return one item', () => {
+ const chunked = createChunks('my-chunks', 'hello-world');
+ expect(chunked.length).toBe(1);
+ });
+
+ it('should chunk and return two chunks', () => {
+ setMaxChunkSize(2000);
+ const chunked = createChunks('my-chunks', CHUNK_STRING);
+ const combined = combineChunk('my-chunks', (name) => {
+ let chunk = chunked.find((chunk) => {
+ return chunk.name === name;
+ });
+ return chunk?.value;
+ });
+ expect(chunked.length).toBe(2);
+ expect(combined).toBe(CHUNK_STRING);
+ });
+
+ it('should chunk and return twelve chunks', () => {
+ setMaxChunkSize(320);
+ const chunked = createChunks('my-chunks', CHUNK_STRING);
+ const combined = combineChunk('my-chunks', (name) => {
+ let chunk = chunked.find((chunk) => {
+ return chunk.name === name;
+ });
+ return chunk?.value;
+ });
+ expect(chunked.length).toBe(12);
+ expect(combined).toBe(CHUNK_STRING);
+ });
+
+ it('should chunk and return one hundred and one chunks', () => {
+ setMaxChunkSize(36);
+ const chunked = createChunks('my-chunks', CHUNK_STRING);
+ const combined = combineChunk('my-chunks', (name) => {
+ let chunk = chunked.find((chunk) => {
+ return chunk.name === name;
+ });
+ return chunk?.value;
+ });
+ expect(chunked.length).toBe(101);
+ expect(combined).toBe(CHUNK_STRING);
+ });
+});
@@ -0,0 +1,2 @@
+export const CHUNK_STRING =
+ 'zDq8KDAdv4PwF3UOp3mnEyx1xY71CaY4ZJdPTG8HpLHy3bCYs1x3vwPXdUqY75d0LYHL8KhxgrKqBEK531igiQNk1KqUKmMsabNlwcaF5E2gXA79vpwlxvi1wecwmKGVig4mJ0dzEEXKNsLgyQCsjKOpI7Nw2gnGAKKFdHle1SJeuFj9PyAHx9stMvQFpRQhoLRt3iI0uFA.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.lww9VHv5CCETYEFj9Q1emgiZI2nXZuvHbyJmIbYgMF9w533oG8ZEsdiKo81LAflQeUHYbbxOXTtroR2bdax0VYgjZ2qg5YeOnekqbgyDXwvmsOMktvg4x7JBJiHjzKK2kSPX0cCAhcU17ydRx19xq1gOUBup1j4kqEBbvKFKt67cfqZhT4kiERgbOt6mIyurSzUPgAhBNiqUJPM3872jVtweoum6mAfSgnG4H1qs2oNZjrbGi6Xv1H5WPALAdNzDwca0evrbbufUCKDX0XO27UTAFh9k4UFf0Dk1pPgKhomuWsfsJAJDvo2ZimmkXrlUo8OfihbpGCLMbEDRpxyIcIGTUQ30WeCyaHo2ds2hs2sh';