Supabase + PowerSync

​

Architecture

​

Integration Guide/Tutorial Overview

​

Configure Supabase

​

Create the Demo Database Schema

create table
  public.lists (
    id uuid not null default gen_random_uuid (),
    created_at timestamp with time zone not null default now(),
    name text not null,
    owner_id uuid not null,
    constraint lists_pkey primary key (id),
    constraint lists_owner_id_fkey foreign key (owner_id) references auth.users (id) on delete cascade
  ) tablespace pg_default;

create table
  public.todos (
    id uuid not null default gen_random_uuid (),
    created_at timestamp with time zone not null default now(),
    completed_at timestamp with time zone null,
    description text not null,
    completed boolean not null default false,
    created_by uuid null,
    completed_by uuid null,
    list_id uuid not null,
    constraint todos_pkey primary key (id),
    constraint todos_created_by_fkey foreign key (created_by) references auth.users (id) on delete set null,
    constraint todos_completed_by_fkey foreign key (completed_by) references auth.users (id) on delete set null,
    constraint todos_list_id_fkey foreign key (list_id) references lists (id) on delete cascade
  ) tablespace pg_default;

​

Create a PowerSync Database User

-- Create a role/user with replication privileges for PowerSync
CREATE ROLE powersync_role WITH REPLICATION BYPASSRLS LOGIN PASSWORD 'myhighlyrandompassword';
-- Set up permissions for the newly created role
-- Read-only (SELECT) access is required
GRANT SELECT ON ALL TABLES IN SCHEMA public TO powersync_role;  

-- Optionally, grant SELECT on all future tables (to cater for schema additions)
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT SELECT ON TABLES TO powersync_role; 

​

Create the Postgres Publication

-- Create a publication to replicate tables. The publication must be named "powersync"
CREATE PUBLICATION powersync FOR ALL TABLES;

​

Configuring PowerSync

​

Create a PowerSync Cloud Instance

1. In the dashboard, select your project and open the instance selection dropdown. Click Add Instance.

2. Give your instance a name, such as “Production”.
3. [Optional] You can change the default cloud region from US to EU, JP (Japan), AU (Australia) or BR (Brazil) if desired.
   • Note: Additional cloud regions will be considered on request, especially for customers on our Enterprise plan. Please contact us if you need a different region.
4. Click Create Instance.

​

Connect PowerSync to Your Supabase

1. From your Supabase Dashboard, select Connect in the top navigation bar (or follow this link):
   
2. In the Direct connection section, copy the complete connection string (including the [YOUR-PASSWORD] placeholder)
   
3. In the PowerSync Dashboard, select your project and instance and go to the Database Connections view.
4. Click Connect to Source Database and ensure the “Postgres” tab is selected.
5. Paste the connection string into the URI field. PowerSync will automatically parse this URI to populate the database connection details.
6. Update the Username and Password fields to use the powersync_role and password you created when configuring your Supabase for PowerSync (see Source Database Setup).
7. Note: PowerSync includes Supabase’s CA certificate by default, so you can use verify-full SSL mode without additional configuration.

Your Supabase connection details should look similar to this.

7. Verify your setup by clicking Test Connection and resolve any errors.
8. Click Save Connection.

​

Enable Supabase Auth

1. In the PowerSync Dashboard, go to the Client Auth view.
2. Enable the “Use Supabase Auth” checkbox.
3. If your Supabase project uses the legacy JWT signing keys, copy your JWT Secret from your project’s settings (JWT Keys) and paste the secret into the “Supabase JWT Secret (optional) Legacy” field. If you’re using Supabase’s new JWT signing keys, you can leave this field empty.
4. Click Save and Deploy to apply the changes.

​

Configure Sync Rules

1. In the PowerSync Dashboard, select your project and instance and go to the Sync Rules view.
2. Edit the Sync Rules in the editor and replace the contents with the below:

bucket_definitions:
  user_lists:
    # Separate bucket per To-Do list
    parameters: select id as list_id from lists where owner_id = request.user_id()
    data:
      - select * from lists where id = bucket.list_id
      - select * from todos where list_id = bucket.list_id

2. Click “Validate” and ensure there are no errors. This validates your Sync Rules against your Postgres database.
3. Click “Deploy” to deploy your Sync Rules.

​

Test Everything (Using Our Demo App)

​

Clone the demo app

git clone https://github.com/powersync-ja/powersync.dart.git
cd powersync.dart/demos/supabase-todolist/

​

Configure the demo app to use your PowerSync instance

cp lib/app_config_template.dart lib/app_config.dart

# Edit `lib/app_config.dart` and insert the necessary credentials as detailed below.

1. In the relevant config file, replace the values for supabaseUrl (from the Project URL section in the Supabase dashboard) and supabaseAnonKey (from the API Keys section in the Supabase dashboard)
2. For the value of powersyncUrl, click Connect in the top bar of the PowerSync Dashboard and copy the instance URL from the dialog.

​

Run the app

# Ensure you have [melos](https://melos.invertase.dev/~melos-latest/getting-started) installed.

melos bootstrap
flutter run

​

Bonus: Optional Extras

create function public.handle_new_user_sample_data()
returns trigger as $$
declare
  new_list_id uuid;
begin
  insert into public.lists (name, owner_id)
    values ('Shopping list', new.id)
    returning id into new_list_id;

  insert into public.todos(description, list_id, created_by)
    values ('Bread', new_list_id, new.id);

  insert into public.todos(description, list_id, created_by)
    values ('Apples', new_list_id, new.id);

  return new;
end;
$$ language plpgsql security definer;

create trigger new_user_sample_data after insert on auth.users for each row execute procedure public.handle_new_user_sample_data();