Supabase Integration

Supabase is a powerful open-source backend-as-a-service (BaaS) platform designed to help developers build and scale web and mobile applications.

It’s a robust alternative to Firebase, offering a range of features such as a PostgreSQL database, real-time data synchronization, secure authentication and authorization, file storage, and serverless edge functions. Supabase is highly flexible, giving developers the freedom to self-host or use its managed services, making it an ideal choice for projects that require scalability, performance, and control.

​

Supabase setup

Connecting your Trickle app to Supabase is quick and easy. Just follow these simple steps to get started:

​

Step 1 - Create a Supabase Account

Set up your Supabase account. You can create a new account here, or log in if you already have one.

​

Step 2 - Create a New Project

Once logged in, navigate to the Projects dropdown and click ‘+ New Project’ to create a new Supabase project.

​

Step 3 - Connect Supabase to Trickle

To link your Supabase project with your Trickle app, follow these steps:

1. At your project Home, scroll down to ‘Connecting to your new project.’ Get your Supabase Project URL and the Anonymous Public API Key.

2. Copy your Trickle App Link.

3. Go to Authentication and click on URL Configuration in Supabase. Paste the Trickle App Link into the Site URL and click Save. By doing this, your Supabase project will redirect to this site url when your app user finish account sign up and email verification.

​

Trickle setup

Go back to Trickle and navigate to the specific project you want to connect to Supabase:

​

Step 1 - Knowledge Configuration

Copy the following setup instructions into the Knowledge panel. Insert your Project URL and Anonymous Public API Key into the corresponding fields, and replace the Site URL for Authentication and Redirect URL with your own values.

#### Supabase
- Supabase project url: `https://XXXX.supabase.co`
- Supabase anon public api key: `XXXX`
- Site URL for Authentication: `https://XXXX.trickle.host`
- Redirect URL for post authentication: `https://XXXX.trickle.host/onauthsuccess`
- Requirements when integrating with Supabase:
	- For authentication, remember to build page (served at route /onauthsuccess) to handle the process after the user finish sign up and the email verification.
	- For database, always use SQL file for table configuration, including add and update operations. Each time database table configuration is needed, create an SQL file in the directory `supabase_operations/`. The naming format for the SQL files is as follows: `supabase_operations/1_create_chat_table.sql`. The leading number is very important, it will increase by one for a new SQL file each time the database table configuration is need to updated. For each `create` command used in SQL file, always add `check if exist` logic for it. And remember to info the user to copy the sql file content and run it in the supabase project.
	- Use `https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2` to import the supabase javascript client.
	- Use the following way to create supabase client.
	```
	const supabase = window.supabase.createClient(
	    '<Supabase project url>',
	    '<Supabase anon public api key>',
	    '<options>'
	);
	```

​

​

Step 2 - Add account sign-up and sign-in functionality using Supabase authentication

1. Prompt “Add login/signup page using Supabase,” and Trickle AI will automatically build the onboarding page and integrate it with Supabase using the authentication API.

2. Create an account on your Trickle App. When you sign up with your email, Supabase will send a verification email to your address.3. Check the user account in your Supabase project.

​

Step 3 - Save and Retrieve Data with Supabase

Save or fetch data using the Supabase database. By using a prompt like “Save data using Supabase database,” Trickle AI will automatically generate the data structure and utilize the Supabase database API to save or retrieve data. Below is an example:

1. Prompt “All logged-in users can submit questions or answer other users’ questions, and save the questions using the Supabase database.”2. Copy and paste the SQL file content into your Supabase project and run the SQL script. 3. Now you can create a new question in your app and save data to your Supabase database.