Understanding the base Supabase client
The @supabase/supabase-js client is a versatile isomorphic package that can run anywhere that JavaScript runs – whether it’s in the browser, on the server (Node.js), or even within a native iOS app (for example, with React Native).
This flexibility allows developers to easily switch between environments without modifying their code.
Note
We’ve already initialized a Supabase client with the plain, framework-independent Supabase JavaScript library (@supabase/supabase-js) and fetched an empty list of buckets from the storage service. So, everything seems to be working.
Why would we need to do anything else?
Well, there are two problems to solve:
-
If we need the Supabase client in multiple components on the frontend, we would need to call
createSupabaseClient()multiple times, which would recreate a client multiple times. That is unnecessary. Also, the default Supabase client from@supabase/supabase-jswill not store anything the server-side will be able to read. So, it will work for a solely frontend-based application. -
Although we can use
createSupabaseClient()on the backend as well, it will not work as expected there and always assumes that no user is logged in, even if you are logged in (due to missing cookie management, as mentioned in the previous subsection).
Let me introduce you to the framework-independent @supabase/ssr package, which solves the process of instantiating a browser-based frontend client as well as a non-browser-based backend client in a streamlined way.