Skip to main content

Supabase Setup

Connecting your FlutterFlow app to Supabase is quick and easy. Simply add your Supabase API URL and Anon Key in the Settings & Integrations section, and your data will be ready to use in FlutterFlow. With this integration, you can authenticate users and store and retrieve data from Supabase.

Follow the steps below to setup the Supabase:

Create Keys​

  • Create a new Supabase account. If you already have an account, login.

  • To use Supabase with your FlutterFlow project, you'll need to create a project in Supabase first. If you haven't done so already, simply click on + New Project, fill in the required information, and wait a few minutes for the process to complete.

Create Tables in Supabase​

If you haven't already, create table(s). If you're just getting started, you can uncheck the Enable Row Level Security (RLS) option to remove any restrictions on accessing the table data.

Note

It's important to note that while disabling Row Level Security (RLS) can be useful for testing and development purposes, it's recommended that you re-enable RLS and implement an access policy that aligns with your app's requirements before deploying your app.

Here's an example of creating an "assignments" table with a foreign key relationship from created_by column to public.users.id with on delete cascade. This ensures that if a user is deleted from the "public.users" table, any data related to that user stored in your "assignments" table will also be deleted.

note

To use Supabase authentication, you must create a "users" table.

Add Keys to FlutterFlow​

Follow the steps below to add the API URL and Anon key:

  1. In your Supabase project, navigate to Project Settings > API. Copy the Project URL.
  2. Return to FlutterFlow, navigate to Settings and Integrations > Integrations > Supabase. Turn on the toggle (i.e., enable Supabase) and paste the API URL.
  3. Similarly, from the Supabase API section, copy the anon key (under Project API keys) and paste it inside the FlutterFlow > Settings and Integrations > Integrations > Supabase > Anon Key.
  4. Click on the Get Schema button. This will show the list of all tables with their schema (structure) created in Supabase.
  5. (Optional) If you have defined an Array for any Column Data Type in Supabase, you must set its type here. To do so, tap the "Click to set Array type" and choose the right one.
note

Whenever you make changes related to tables in Supabase, hit the Get Schema button again to reflect the changes here.

Now you have completed the Supabase Setup! You can continue to learn about how to add Supabase Authentication and Database.