magic-supabase-auth-cookie-bridge

This package aims at bridging the old format of the @supabase/[email protected] that is array based with the newer format of @supabase/ssr that can contain an larger object spread across multiple projects. This package is useful for cases where you have a project that is the authenticator for other projects.

How to use it

The new @supabase/ssr packages defines thes standard way of reading and setting up cookies in a Next.JS project:

// Source: https://supabase.com/docs/guides/auth/server-side/nextjs
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
    const cookieStore = await cookies();

    return createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            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.
                    }
                }
            }
        }
    );
}

As you can alrady see we have two cases where cookies are read and written back into the environment where the supabase client is created.

import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';
import {
    normalizeCookiesCollectionAndApplyPatch,
    patchSupabaseCookieFormatReader
} from '@pluslabs/supabase-auth-cookie-bridge';

export async function createClient() {
    const cookieStore = await cookies();

    return createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() {
-                   return cookieStore.getAll();
+                   const cookies = cookieStore.getAll();
+
+                   // This ensures that the auth cookie is always in the correct format
+                   return patchSupabaseCookieFormatReader(
+                       SUPABASE_AUTH_WORKSPACE_COOKIE_NAME,
+                       cookies
+                   );
                },
                setAll(cookiesToSet) {
                    try {
-                       cookiesToSet.forEach(({ name, value, options }) =>
-                           cookieStore.set(name, value, options)
-                       );
+                       // Normalizes cookies collections and applies the patch
+                       // between the two formats
+                       normalizeCookiesCollectionAndApplyPatch({
+                           cookies: cookiesToSet,
+                           cookieAuthName: SUPABASE_AUTH_WORKSPACE_COOKIE_NAME,
+                           writeCookie: (cookie: {
+                                name: string;
+                                value: string;
+                                options: CookieOptions;
+                            }) => {
+                                cookieStore.set(cookie.name, cookie.value, cookie.options);
+                           }
+                         });
                    } catch {
                        // The `setAll` method was called from a Server Component.
                        // This can be ignored if you have middleware refreshing
                        // user sessions.
                    }
                }
            }
        }
    );
}