GITBOOK-186: Supabase SDK documentation

adnanqaops · gitbook-bot · commit 0fdf7f140e1e · 2024-11-08T10:47:23.000Z
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -80,8 +80,8 @@
     * [Supabase](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/README.md)
       * [Supabase PostgreSQL](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-postgresql.md)
       * [Supabase Assets API](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-assets-api.md)
-      * [Supabase Management API](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-management-api.md)
       * [Supabase RealTime](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-realtime.md)
+      * [Supabase OAuth](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-oauth.md)
     * [PostgreSQL](connect-your-data/data-sources-in-lowcoder/sql-databases/postgresql.md)
     * [Microsoft SQL Server](connect-your-data/data-sources-in-lowcoder/sql-databases/microsoft-sql-server.md)
     * [Oracle](connect-your-data/data-sources-in-lowcoder/sql-databases/oracle.md)
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/README.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/README.md
@@ -20,4 +20,22 @@ Supabase is an open-source backend-as-a-service (BaaS) platform that provides de
 * Storing and managing media files like images, videos, or documents.
 * Rapidly building and scaling applications without setting up custom backend infrastructure.
 
+### Supabase SDK
+
+We have integrated Supabase SDK to Lowcoder, so that our App Users can directly use it in the apps to its full potential.
+
+Users can use all the functionalities provided by Supabase inside Lowcoder using "supabase" object. e.g. to interact with your Postgres database, listen to database changes, build login and user management functionality, and manage large files.
+
+### Initialising Supabase Client&#x20;
+
+Create a new client for use in the browser. You can initialize a new Supabase client using the `createClient()` method.
+
+The Supabase client is your entry point to the rest of the Supabase functionality and is the easiest way to interact with everything Supabase offers within its ecosystem.
+
+```
+const supabase_client = supabase.createClient('supabase-project-url', 'public-anon-key')
+```
+
+Now, using this "supabase\_client" created above, we will interact with PostgreSQL DB in Supabase, explore Supabase Assets/Storage feature, setup an OAuth and use Supabase RealTime feature. Let's explain these one by one.
+
 Let's explore some of the core features of Supabase, one by one.
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-assets-api.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-assets-api.md
@@ -22,3 +22,40 @@ Follow the steps below :&#x20;
 Let's show you how we can use the Supabase Storage feature to Upload and Retrieve data to/from Supabase.&#x20;
 
 {% embed url="https://demos.lowcoder.cloud/demo/cm0p82k14000110hfpa1xr8da" %}
+
+All of the above functionalities can be accessed using Supabase SDK as well.&#x20;
+
+To create a bucket on Supabase Storage, use following code :&#x20;
+
+```
+const { data, error } = await supabase
+  .storage
+  .createBucket('avatars', {
+    public: false,
+    allowedMimeTypes: ['image/png'],
+    fileSizeLimit: 1024
+  })
+```
+
+To List all the buckets present on Supabase Storage, use following code :&#x20;
+
+```
+const { data, error } = await supabase
+  .storage
+  .getBucket('avatars')
+```
+
+To List all files in a specific Bucket, use following code :&#x20;
+
+```
+const { data, error } = await supabase
+  .storage
+  .from('avatars')
+  .list('folder', {
+    limit: 100,
+    offset: 0,
+    sortBy: { column: 'name', order: 'asc' },
+  })
+```
+
+More details can be found here : [https://supabase.com/docs/reference/javascript/storage-createbucket](https://supabase.com/docs/reference/javascript/storage-createbucket)
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-management-api.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-management-api.md
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-oauth.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-oauth.md
@@ -0,0 +1,39 @@
+# Supabase OAuth
+
+Lowcoder App users can authenticate their app users using the Supabase OAuth feature. It can be accessed through "supabase.auth".
+
+Supabase Auth works with many popular Auth methods, including Social and Phone Auth using third-party providers and the list can be found [https://supabase.com/docs/guides/auth#providers](https://supabase.com/docs/guides/auth#providers) .
+
+In order to Sign up a User through OAuth, we can use the following code :
+
+```
+const { data, error } = await supabase.auth.signInWithOAuth({
+  provider: 'google',
+  options: {
+    redirectTo: 'https://example.com/welcome'
+  }
+})
+```
+
+We have to set the "Provider" that we need to use for Sign up. But, before running this query , We need to set the details related to OAuth on Supabase and on the Provider side, in this case Google. For setting up OAuth using Google, please follow the instructions written on this link : [https://supabase.com/docs/guides/auth/social-login/auth-google](https://supabase.com/docs/guides/auth/social-login/auth-google)
+
+After successful sign in through OAuth, we can store the OAuth Provider token using following code :&#x20;
+
+```
+// Register this immediately after calling createClient!
+// Because signInWithOAuth causes a redirect, you need to fetch the
+// provider tokens from the callback.
+
+supabase.auth.onAuthStateChange((event, session) => {
+  if (session && session.provider_token) {
+    window.localStorage.setItem('oauth_provider_token', session.provider_token)
+  }
+})
+```
+
+In the following Demo, we have shown how to setup Google OAuth using Supabase SDK :&#x20;
+
+{% embed url="https://demos.lowcoder.cloud/demo/cm348a4ma1853533h7m9qp11k" %}
+Setting up Google OAuth using Supabase SDK
+{% endembed %}
+
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-postgresql.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-postgresql.md
@@ -23,4 +23,22 @@ Follow the steps below:
 
 {% embed url="https://demos.lowcoder.cloud/demo/clzmno7d50b0prfaixv9i8nxc" %}
 
-\
+All of the above functionalities can be accessed using Supabase SDK as well.&#x20;
+
+To fetch data from DB, we can use the Select method on Supabase object.&#x20;
+
+```
+const { data, error } = await supabase
+  .from('countries')
+  .select()
+```
+
+To insert data into a Table, use following code.&#x20;
+
+```
+const { error } = await supabase
+  .from('countries')
+  .insert({ id: 1, name: 'Denmark' })
+```
+
+More details can be found here : [https://supabase.com/docs/reference/javascript/select](https://supabase.com/docs/reference/javascript/select)
