Supabase

Supabase is an open-source Firebase alternative. It includes a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.

Supabase is an excellent choice if you want flexibility and the possibility of scaling to millions of users.

Toddle uses supabase as our primary database, and for authentication.

Connect to Supabase.

This guide helps you connect your Supabase backend to your toddle Frontend. To make it easier to understand, we'll use a basic to-do list app as an example.

Step 1: Set up your backend on Supabase.

On the Supabase dashboard, click `New project` and set the name, Database password, and region of the project.

Once the project has been created, navigate to the `table Editor` on the left navigation bar (It takes a few minutes for Supabase to provision a database and API endpoints, be patient).

To store our to-do's, click `Create a New table` in the `Table Editor.` Make sure you are in the `schema public` view.

Turn `Row Level Security` (RLS) off for this example and create a `new table` called `todo`, with 3 columns:

• `id`: is a unique ID for the entry. Choose the type `uuid` (or Universally unique identifier).
• `created at`: The value `timestamptz` is selected by default. You can keep it as is. It's a timestamp with timezone. Useful to know when the todo was created.
• `name`: This is the to-do list item that you'll want to remember. Set the type to `text`.
• manually You can now import a few todo's via a CSV. (For the purposes of this example we imported three todos manually.)

In this tutorial, we’ve turned off “Row Level Security (RLS).” In practice, you will want to create policies that restrict who can create, edit, and delete posts. By turning this off, any user can modify the database without restrictions.

Step 2: Connect your toddle frontend.

Click on `Project settings` -> `API` and get the credentials to fetch and delete data from your Supabase database. Copy the public API key from Supabase and head over to toddle.dev

Head over to your front-end design in toddle. Click outside the canvas and then click `API` on the right-hand panel.

Enter the `API` credentials in the `API connector` in toddle.dev

• You are fetching data. Make sure your URL is set to `GET`.
• Copy your `URL` from the `API` details in Supabase.
• Insert your `path.` The path to Supabase is `rest/v1/{project-name}.`
• Insert your `APIkey` in the header.
• If you see the data you want to fetch on the right, you can close the dialog and move to the next step.

Step 3: Add data from your Supabase backend to toddle.

Select the element you want to display the todo item and right-click on the element tree and select `Repeat item.`

Once clicked, the `formula editor` will appear. In the `formula editor` select the `Supabase API` and declare the data you want to repeat. (These are your to-do's.)

Once repeated, you'll see the item you repeated on your screen. You'll have one `repeat item` per `item` in your `database.`
Now select the `text` and click the `fx icon` in the box to the right and see the text update dynamically.

Once clicked, the `formula editor` will appear. In the `formula editor,` select `Item` and `name.` You'll now see your data displayed nicely in the repeat item

That's it. You now fetch data from your Supabase database.

Authentication

Supabase has a complete authentication system that allows multiple ways of signing in. You can use a username/password, Magic links, or one of many identity providers, such as Google, Facebook, Discord, etc.

Watch the video below to learn more about using Supabase Auth with toddle.

Tutorial

For a complete tutorial on how to use Supabase, watch this video where we build a to-do app:

You can read more about Supabase here.