README.md

PowerSync + Supabase React Native Demo: Todo List

Overview

Demo app demonstrating use of the PowerSync SDK for React Native together with Supabase.

A step-by-step guide on Supabase<>PowerSync integration is available here.

Set up Supabase Project

Create a new Supabase project, and paste and run the contents of database.sql in the Supabase SQL editor.

It does the following:

1. Create lists and todos tables.
2. Create a publication called powersync for lists and todos.
3. Enable row level security and storage policies, allowing users to only view and edit their own data.
4. Create a trigger to populate some sample data when a user registers.

Set up PowerSync Instance

Create a new PowerSync instance, connecting to the database of the Supabase project (find detailed instructions in the Supabase<>PowerSync integration guide).

Then deploy the following sync rules:

bucket_definitions:
  user_lists:
    # Separate bucket per todo 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

Configure The App

Replace the necessary credentials in the .env file. Generally, the .env file is used for storing common environment variables shared across all instances of the application, while .env.local is for overriding or providing environment-specific configurations, particularly for local development. As .env.local is normally not checked into source control (this project has a git-ignore rule), you can copy .env, name it .env.local, and then configure as needed.

EAS Build configuration

Take note that you will need an Expo account if you want to use EAS for your builds. The Expo project ID should then also be configured in the environment file.

For secret/sensitive environment variables which shouldn't be checked into source control, you can configure them as EAS secrets. They can be added via either the Expo website or the EAS CLI, both are explained here.

General information on defining environment variables with Expo can be found here here.

Run the App

Install the dependencies, including the React Native SDK:

pnpm i

Run on iOS

pnpm ios

Run on Android

pnpm android

Here are some helpful links

• PowerSync Website
• PowerSync Docs
• PowerSync React Native Client SDK Reference
• Supabase Docs
• Expo Docs