Dynamic header does not change after a client has been instantiated

[uncvrd]

Bug report

• [ x] I confirm this is a bug with Supabase, not with my own application.
• [ x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I need to send headers with my client requests. To do that I have configured the following:

export function createClient(orgContactId: string | null) {
    const supabase = createBrowserClient<Database>(env.NEXT_PUBLIC_SUPABASE_PROJECT_URL, env.NEXT_PUBLIC_SUPABASE_ANON_KEY, {
        cookies: {},
        cookieOptions: {
            domain: env.NEXT_PUBLIC_APP_DOMAIN,
        },
        global: {
            headers: {
                "org-contact-id": `${orgContactId ?? ""}`,
            },
        },
        isSingleton: false,
    })

    return supabase
}

However the issue is that I can't update this header after the client is created so if the orgContactId changes, I need to create a completely new client

I do that by taking the "singleton" in to my own hands and when I detect an ID change, I create a new client that has the new header

export let supabaseBrowserClient: SupabaseClient<Database> | null = null
let orgContactId: string | null = null

export function getSupabaseBrowserClient(activeOrgContactId: string | null) {
    if (supabaseBrowserClient && activeOrgContactId === orgContactId) {
        return supabaseBrowserClient
    }

    orgContactId = activeOrgContactId
    supabaseBrowserClient = createClient(activeOrgContactId)

    return supabaseBrowserClient
}

function useSupabaseBrowser() {
    const {
        userPreference: { activeOrgContactId },
    } = useAppStore((store) => store)

    return useMemo(() => getSupabaseBrowserClient(activeOrgContactId), [activeOrgContactId])
}

The downside to this is that I get warnings in my console stating there are now multiple clients created and that I may deal with unintended behavior.

I think I'm running in to that unintended behavior now. I use NextJS and just tried running my dev server with next dev --turbo. For some reason, my supabase client will only ever use my first instantiated version of the client (which doesnt contain a org-contact-id) even if a few seconds later a new auth client is instantiated with an org-contact-id. It simply just isn't used for any of my requests (the header is empty since it was the first client instantiated it seems...)

I would love to be able to just simply update the headers in the client after it's created...if possible.

Hope you see the use case for it, let me know if you have any other questions :)

Meant to send this months ago but the recommendation came from this auth/ssr discussion: https://github.com/orgs/supabase/discussions/27037

System information

• OS: macOS
• Version of supabase-js: 2.43.5
• Version of Node.js: 20.12.0

[soedirgo]

Hi! Can you try using .setHeader() for this? E.g. https://github.com/supabase/postgrest-js/blob/e45a2c79231ca6e1469dba80a981501c60d3c8f7/test/basic.ts#L130

[soedirgo]

Closing this for now - feel free to reopen or create a new issue if the proposed solution doesn't work.