Tutorial-style integration guide for creating offline-first apps with Supabase and PowerSync, using a demo to-do list app in Flutter, React Native, Web, Kotlin Multiplatform and Swift.
Video walkthrough of the integration guide.
Used in conjunction with Supabase, PowerSync enables developers to build local-first & offline-first apps that are robust in poor network conditions and that have highly responsive frontends while relying on Supabase for their backend. This guide provides instructions for how to configure PowerSync for use with your Supabase project.
Before you proceed, this guide assumes that you have already signed up for free accounts with both Supabase and PowerSync Cloud (our cloud-hosted offering). If you haven’t signed up for a PowerSync (Cloud) account yet, click here (and if you haven’t signed up for Supabase yet, click here).
For mobile/desktop apps, this guide assumes that you already have Flutter / React Native / Kotlin Multiplatform / Xcode set up.
For web apps, this guide assumes that you have pnpm installed.
This guide takes 10-15 minutes to complete.
Upon successful integration of Supabase + PowerSync, your system architecture will look like this: (click to enlarge image)
The local SQLite database embedded in the PowerSync SDK is automatically kept in sync with the Supabase Postgres database (based on configured sync rules as you will see later in this guide). Client-side data modifications are persisted in the local SQLite database as well as stored in an upload queue that gets processed via the Supabase client library when network connectivity is available. Therefore reads and writes can happen in the app regardless of whether the user is online or offline, by using the local SQLite database.
For more details on PowerSync’s general architecture, see here.
We will follow these steps to get an offline-first ‘To-Do List’ demo app up and running:
Configure Supabase:
Configure PowerSync:
Test the configuration
Test the configuration using our provided PowerSync-Supabase ‘To-Do List’ demo app with your framework of choice.
Create a new Supabase project (or use an existing project if you prefer) and follow the below steps.
To set up the Postgres database for our To-Do List demo app, we will create two new tables: lists
and todos
. The demo app will have access to these tables even while offline.
Run the below SQL statements in your Supabase SQL Editor:
PowerSync uses the Postgres Write Ahead Log (WAL) to replicate data changes in order to keep PowerSync SDK clients up to date.
Run the below SQL statement in your Supabase SQL Editor to create a Postgres role/user with replication privileges:
To restrict read access to specific tables, explicitly list allowed tables for both the SELECT
privilege, and for the publication mentioned in the next step (as well as for any other publications that may exist).
Run the below SQL statement in your Supabase SQL Editor to create a Postgres publication:
If you’ve previously created an instance in your project, you can create an additional instance by navigating to Manage instances and clicking Create new instance:
You can also create an entirely new project with its own set of instances. Click on the PowerSync icon in the top left corner of the Dashboard or on Admin Portal at the top of the Dashboard, and then click on Create Project.
Next
version of the Service, which may contain early access or experimental features. Always use the Stable
version in production.From your Supabase Dashboard, select Connect in the top navigation bar (or follow this link):
In the Direct connection section, copy the complete connection string (including the [YOUR-PASSWORD]
placeholder)
Back in the PowerSync Dashboard, paste the connection string into the URI field. PowerSync will automatically parse this URI to populate the database connection details.
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).
Note: PowerSync includes Supabase’s CA certificate by default, so you can use verify-full
SSL mode without additional configuration.
Your connection settings should look similar to this:
PowerSync will now create an isolated cloud environment for your instance. This typically takes a minute or two.
You can update your instance settings by navigating to the Manage instances workspace, opening your instance options and selecting Edit instance.
Sync Rules allow developers to control which data gets synced to which user devices using a SQL-like syntax in a YAML file. For the demo app, we’re going to specify that each user can only see their own to-do lists and list items.
sync-rules.yaml
file.
In this step you’ll test your setup using a ‘To-Do List’ demo app provided by PowerSync.
Clone the demo app based on your framework:
Locate the relevant config file for your framework:
supabaseUrl
(from the Project URL section in the Supabase dashboard) and supabaseAnonKey
(from the API Keys section in the Supabase dashboard)powersyncUrl
, click the copy icon on your instance to copy its URL:For ease of use of the demo app, you can disable email confirmation in your Supabase Auth settings. In your Supabase project, go to “Authentication” -> “Providers” -> “Email” and then disable “Confirm email”. If you keep email confirmation enabled, the Supabase user confirmation email will reference the default Supabase Site URL ofhttp://localhost:3000
— you can ignore this.
Once signed in to the demo app, you should see a blank list of to-do lists, so go ahead and create a new list. Try placing your device into airplane mode to test out the offline capabilities. Once the device is back online, you should see the data automatically appear in your Supabase dashboard (e.g. in the Table Editor).
For more information, explore the PowerSync docs or join us on our community Discord where our team is always available to answer questions.
If you plan on sharing this demo app with other people, you may want to set up demo data triggers so that new user signups don’t see an empty screen.
It’s useful to have some data when a user signs up to the demo app. The below trigger automatically creates some sample data when a user registers (you can run it in the Supabase SQL Editor). See Supabase: Managing User Data for more details.
Tutorial-style integration guide for creating offline-first apps with Supabase and PowerSync, using a demo to-do list app in Flutter, React Native, Web, Kotlin Multiplatform and Swift.
Video walkthrough of the integration guide.
Used in conjunction with Supabase, PowerSync enables developers to build local-first & offline-first apps that are robust in poor network conditions and that have highly responsive frontends while relying on Supabase for their backend. This guide provides instructions for how to configure PowerSync for use with your Supabase project.
Before you proceed, this guide assumes that you have already signed up for free accounts with both Supabase and PowerSync Cloud (our cloud-hosted offering). If you haven’t signed up for a PowerSync (Cloud) account yet, click here (and if you haven’t signed up for Supabase yet, click here).
For mobile/desktop apps, this guide assumes that you already have Flutter / React Native / Kotlin Multiplatform / Xcode set up.
For web apps, this guide assumes that you have pnpm installed.
This guide takes 10-15 minutes to complete.
Upon successful integration of Supabase + PowerSync, your system architecture will look like this: (click to enlarge image)
The local SQLite database embedded in the PowerSync SDK is automatically kept in sync with the Supabase Postgres database (based on configured sync rules as you will see later in this guide). Client-side data modifications are persisted in the local SQLite database as well as stored in an upload queue that gets processed via the Supabase client library when network connectivity is available. Therefore reads and writes can happen in the app regardless of whether the user is online or offline, by using the local SQLite database.
For more details on PowerSync’s general architecture, see here.
We will follow these steps to get an offline-first ‘To-Do List’ demo app up and running:
Configure Supabase:
Configure PowerSync:
Test the configuration
Test the configuration using our provided PowerSync-Supabase ‘To-Do List’ demo app with your framework of choice.
Create a new Supabase project (or use an existing project if you prefer) and follow the below steps.
To set up the Postgres database for our To-Do List demo app, we will create two new tables: lists
and todos
. The demo app will have access to these tables even while offline.
Run the below SQL statements in your Supabase SQL Editor:
PowerSync uses the Postgres Write Ahead Log (WAL) to replicate data changes in order to keep PowerSync SDK clients up to date.
Run the below SQL statement in your Supabase SQL Editor to create a Postgres role/user with replication privileges:
To restrict read access to specific tables, explicitly list allowed tables for both the SELECT
privilege, and for the publication mentioned in the next step (as well as for any other publications that may exist).
Run the below SQL statement in your Supabase SQL Editor to create a Postgres publication:
If you’ve previously created an instance in your project, you can create an additional instance by navigating to Manage instances and clicking Create new instance:
You can also create an entirely new project with its own set of instances. Click on the PowerSync icon in the top left corner of the Dashboard or on Admin Portal at the top of the Dashboard, and then click on Create Project.
Next
version of the Service, which may contain early access or experimental features. Always use the Stable
version in production.From your Supabase Dashboard, select Connect in the top navigation bar (or follow this link):
In the Direct connection section, copy the complete connection string (including the [YOUR-PASSWORD]
placeholder)
Back in the PowerSync Dashboard, paste the connection string into the URI field. PowerSync will automatically parse this URI to populate the database connection details.
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).
Note: PowerSync includes Supabase’s CA certificate by default, so you can use verify-full
SSL mode without additional configuration.
Your connection settings should look similar to this:
PowerSync will now create an isolated cloud environment for your instance. This typically takes a minute or two.
You can update your instance settings by navigating to the Manage instances workspace, opening your instance options and selecting Edit instance.
Sync Rules allow developers to control which data gets synced to which user devices using a SQL-like syntax in a YAML file. For the demo app, we’re going to specify that each user can only see their own to-do lists and list items.
sync-rules.yaml
file.
In this step you’ll test your setup using a ‘To-Do List’ demo app provided by PowerSync.
Clone the demo app based on your framework:
Locate the relevant config file for your framework:
supabaseUrl
(from the Project URL section in the Supabase dashboard) and supabaseAnonKey
(from the API Keys section in the Supabase dashboard)powersyncUrl
, click the copy icon on your instance to copy its URL:For ease of use of the demo app, you can disable email confirmation in your Supabase Auth settings. In your Supabase project, go to “Authentication” -> “Providers” -> “Email” and then disable “Confirm email”. If you keep email confirmation enabled, the Supabase user confirmation email will reference the default Supabase Site URL ofhttp://localhost:3000
— you can ignore this.
Once signed in to the demo app, you should see a blank list of to-do lists, so go ahead and create a new list. Try placing your device into airplane mode to test out the offline capabilities. Once the device is back online, you should see the data automatically appear in your Supabase dashboard (e.g. in the Table Editor).
For more information, explore the PowerSync docs or join us on our community Discord where our team is always available to answer questions.
If you plan on sharing this demo app with other people, you may want to set up demo data triggers so that new user signups don’t see an empty screen.
It’s useful to have some data when a user signs up to the demo app. The below trigger automatically creates some sample data when a user registers (you can run it in the Supabase SQL Editor). See Supabase: Managing User Data for more details.