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.

Create a new project with Supabase.


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).

Create a new table in Supabase.


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

These are the necessary table settings for Supabase.


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.)
Add values directly to a Supabase table manually or via a csv.
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

Get your API credentials from Supabase.

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

Create a new API connection in toddle

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.
Set up your Supabase credentials in toddle's API panel.

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.`

Create a repeat item in toddle.


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.)

How to declare data you want to repeat from your API in toddle.


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.

This is how you add a formula to a text element to have it update dynamically in toddle.


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

Insert text dynamically in toddle with formulas.

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.

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!

ยฉ Copyright 2024 toddle. All rights reserved.