auth-helpers icon indicating copy to clipboard operation
auth-helpers copied to clipboard

[@supabase/ssr] Documentation for `createServerClient` & createBrowserClient

Open biasedbit opened this issue 1 year ago • 1 comments

Improve documentation

Link

Describe the problem

Function names are pretty much self-explanatory but as I was reading through the implementation, both createServerClient and createBrowserClient have some conditional logic based on whether they're running on a browser, which I found to be surprising.

Describe the improvement

Add docs to clarify difference between functions and consequences of using them in the wrong env (e.g. what happens when createBrowserClient is used in server-side components and vice-versa).

Additionally:

  • If the functions aren't meant to be used outside their envs, log a warning or raise an error.
  • If it's okay to use either function in either env, explicitly state in docs.

Additional context

n/a


Happy to submit a PR with proposed changes once I understand the crossed-env usage caveats (mainly createBrowserClient on server-side, since createServerClient with cookies() on client-side will naturally fail due to "(...) importing a component that needs next/headers (...)".

biasedbit avatar Mar 28 '24 00:03 biasedbit

I'm also wondering if there are any issues with initialising just once:

import { createBrowserClient } from "@supabase/ssr";
import { env } from "@/env.mjs";

export const createClient = (): any =>
  createBrowserClient(
    env.NEXT_PUBLIC_SUPABASE_URL,
    env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  );

export const browserClient = createClient();

elie222 avatar Jun 05 '24 16:06 elie222