@supabase/supabase-js and @supabase/ssr - difference?

[nicitaacom]

Tell me difference between @supabase/supabase-js and @supabase/ssr

As I see I also can use @supabase/supabase-js in server component and get SSG page

import { createClient } from "@supabase/supabase-js"

export const supabaseAdmin = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY)

export default supabaseAdmin

[GaryAustin1]

supabase-js is the main supabase client used for all REST API access in javascript.
ssr is a set of functions that use supabase-js and coordinate server and browser access with cookies.
supabase-js will only work on a server or on a browser but not both as it uses local storage only for session storage.

[nicitaacom]

supabase-js will only work on a server or on a browser

You mean supabase-js may work on server or client?

• Because I can use supabaseServer() (with cookies access) on server URL + ANON
• I can use supabaseClient to use it in client components URL + ANON
• I can use supabaseAdmin on server (in server components/API routes/server actions) URL + SERVICE_ROLE

supabase-js is the main supabase client used for all REST API access in javascript.

I don't understand that

supabase-js is the main supabase client

Do you mean supabase-js it's something I can create SDK instance from?
Like that

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import { Database } from "@/interfaces/types_db"

const supabaseClient = createClientComponentClient<Database>()

export default supabaseClient

Also I want to add that it's a little bit confusing when I have too much options to create supabase SDK instance
Like

  const supabase = createRouteHandlerClient({ cookies })
  
  const supabaseClient = createClientComponentClient<Database>()
  
  export const supabaseAdmin = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.SUPABASE_SERVICE_ROLE_KEY,
)


const supabaseServer = () => {
  cookies().getAll() // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient<Database>({ cookies })
}

I understand about supabaseAdmin and supabaseClient and supabaseServer
But this createRouteHandlerClient - as I see its something that has access to cookies
But what's the point to use createClientComponentClient (supabase) when I can use createServerComponentClient (supabaseServer)

And I didn't find YouTube video on supabase channel about difference between those all

Assuming we are speaking in context of Next.js 14 (app router)

[gc-ft]

The pure supabase JS Client comes from createClient in @supabase/supabase-js - All other createClient versions (@supabase/ssr or @supabase/auth-helpers... and so on) use createClient adding some helpers around them to help integrating supabase in certain environments.

Choose the one that fits yours the best, but understand the environment well if you use one that is "further down the chain" so to speak, in order to not make mistakes.

So for SSR use the @supabase/ssr library and the create*Client's present in there, in order to make sure they work correctly together, especially when handing sessions from server to client and such...

Use createClient from @supabase/supabase-js for clients you use in places like edge functions which are server-sided only.

That's how I would explain it.. not sure if that helps you.

Fabian

[nicitaacom]

but understand the environment well if you use one that is "further down the chain" so to speak, in order to not make mistakes.

I don't understand what you mean by that - provide example please - so I understand it better

---

So for SSR use the @supabase/ssr library and the create*Client's present in there

Why? - when I can use supabaseAdmin URL + SERVICE_ROLE

---

Use createClient from @supabase/supabase-js for clients you use in places like edge functions which are server-sided only.

What? - I don't understand what do you mean
Use createClient from @supabase/supabase-js for clients (clients?) - I have a website but I don't have clients that use my website
If you mean clients in way components - please write - in client components (that I mark as "use client" at top of .tsx file)

---

For me to better understand this

Please provide 1 example for each

(ChatGPT stuff)
Here is expected response

  const supabase = createRouteHandlerClient({ cookies })
  // use it in API route because in docs they use it to make auth work
  
  const supabaseClient = createClientComponentClient<Database>()
  // Use it in client components to select/insert/update/delete something in DB (make sure RLS policy return true)
  // Also keep in mind that it has no access to cookies so RLS will not work because it don't get user id from cookies (to compare is id = auth.uid())
  
  export const supabaseAdmin = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.SUPABASE_SERVICE_ROLE_KEY,
)
// use it on server - make sure you never expose SUPABASE_SERVICE_ROLE_KEY on client - don't add NEXT_PUBLIC_ to name of this env - this bypass RLS


const supabaseServer = () => {
  cookies().getAll() // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient<Database>({ cookies })
}
// use this in server components or server actions or API routes if you need to allow only specific users to do something based on RLS
// for example you allow users to update their own rows - so by using this - you make sure that even if hacker get access to SUPABASE URL and ANON_KEY - which are public - they do not update rows of other users because RLS

// add here something from @supabase/ssr and add explanation to it

[GaryAustin1]

You should go thru the docs for SSR.

https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=environment&environment=client

It provides specific examples.

[nicitaacom]

I don't like when somebody send me jsut docs as answer on question

In docs I read

But why do I need

one-time setup code to configure your Supabase client to use cookies

When I can use @supabase/auth-helpers-nextjs and @supabase/supabase-js to create SDK instance in this way to use cookies

const supabaseServer = () => {
  cookies().getAll() // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient<Database>({ cookies })
}
// use this in server components or server actions or API routes if you need to allow only specific users to do something based on RLS
// for example you allow users to update their own rows - so by using this - you make sure that even if hacker get access to SUPABASE URL and ANON_KEY - which are public - they do not update rows of other users because RLS

Please reply to my question above

I don't understand what you mean by that - provide example please - so I understand it better

[GaryAustin1]

Sorry, The link I provided has lots of examples. I don't know what kind of example beyond that you are looking for, and as a user also, I'm not going to go looking for more examples for you. Your topic was the difference between supabase-js and ssr. Two of us answered that. Now you are asking for other things. I don't use SSR so can't help more. Maybe someone else will come along or you can ask a new question about how to use SSR.

[nicitaacom]

I don't know what kind of example beyond that you are looking for

I'm looking for example where somebody use supabaseServer and something from @supabase/ssr and telling me the difference

[bendur]

This discussion post explains that @supabase/ssr is what they expect people to use instead of @supabase/auth-helpers-x going forward.