Skip to content

Clarify key location in Supabase #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion integration-guides/flutterflow-+-powersync.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

1. Create a new Blank project in FlutterFlow.
2. Under **"App Settings" -> "Integrations"**, enable "Supabase".
1. Enter your Supabase "API URL" and public "Anon Key". You can find these under **"Project Settings" -> "API"** in your Supabase dashboard.
1. Enter your Supabase "API URL" and public "Anon Key". You can find these under **"Project Settings" -> "API Keys" -> `anon` `public`** in your Supabase dashboard.
2. Click "Get Schema".
3. Add the [PowerSync Library](https://marketplace.flutterflow.io/item/dm1cuOwYzDv6yQL2QOFb) to your FlutterFlow account.
4. Under **"App Settings" -> "Project Dependencies" -> "FlutterFlow Libraries"** click "Add Library".
Expand Down Expand Up @@ -287,7 +287,7 @@

1. Check that there are no project issues or errors.
2. Reload your app or start another test session.
3. Notice that your homepage is still blank. This is because the `lists` table is empty in Supabase. Create a test row in the table by clicking on "Insert" -> "Insert Row" in your Supabase Table Editor.

Check warning on line 290 in integration-guides/flutterflow-+-powersync.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

integration-guides/flutterflow-+-powersync.mdx#L290

Did you really mean 'created_at'?
1. Leave `id` and `created_at` blank.
2. Enter a name such as "Test from Supabase".
3. Click "Select Record" for `owner_id` and select your test user.
Expand Down Expand Up @@ -357,7 +357,7 @@
5. Click "Confirm".

<Frame>
<img src="/images/integration-guides/flutterflow/json-parameters.png" />

Check warning on line 360 in integration-guides/flutterflow-+-powersync.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

integration-guides/flutterflow-+-powersync.mdx#L360

Did you really mean 'onData'?
</Frame>

5. Still under "Component Parameters", configure the "onData" action:
Expand Down Expand Up @@ -429,7 +429,7 @@

1. Under the **"Page Selector"**, select your `HomePage` page.
2. Under the **"Widget Palette"**, search for "float" and drag the "FAB" widget onto your page.
3. In the **"Actions"** panel on the right, click "Add Action".

Check warning on line 432 in integration-guides/flutterflow-+-powersync.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

integration-guides/flutterflow-+-powersync.mdx#L432

Did you really mean 'powersyncWrite'?
1. Under "Custom Action" -> "PowerSync", select "powersyncWrite".
2. Under the "Set Action Arguments" -> "sql" section, add the SQL query to create a new list item. For the purpose of this guide we are hardcoding the list's name, normally you would build UI for this.
1. Paste the following into the "Value" field:
Expand Down Expand Up @@ -466,7 +466,7 @@
4. Click "Open Slidable".
5. Select the "SlidableActionWidget".
<Frame>
<img src="/images/integration-guides/flutterflow/slidable-action-widget.png" />

Check warning on line 469 in integration-guides/flutterflow-+-powersync.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

integration-guides/flutterflow-+-powersync.mdx#L469

Did you really mean 'powersyncWrite'?
</Frame>

6. In the **"Actions"** panel on the right, click "Add Action".
Expand Down Expand Up @@ -549,7 +549,7 @@

## (Optional) Display Connectivity and Sync Status

The PowerSync library provides a built-in component that displays real-time connectivity and synchronization status. Since the sync state is available globally as part of your app state, you can easily monitor the database status throughout your application. To add this status indicator:

Check warning on line 552 in integration-guides/flutterflow-+-powersync.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

integration-guides/flutterflow-+-powersync.mdx#L552

Did you really mean 'ato'?

1. Under the **Widget Palette**, select the "Components and custom widgets imported from library projects" panel.
<Frame>
Expand Down Expand Up @@ -607,7 +607,7 @@

## Arrays, JSON and Other Types

For column values, PowerSync supports three basic types: Integers, doubles, and strings. These types have been chosen because

Check warning on line 610 in integration-guides/flutterflow-+-powersync.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

integration-guides/flutterflow-+-powersync.mdx#L610

'to' is repeated!
they're natively supported by SQLite while also being easy to transport as JSON.

Of course, you may want to to store other values in your Postgres database as well. When syncing a value that doesn't
Expand Down
2 changes: 1 addition & 1 deletion integration-guides/supabase-+-powersync.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ SUPABASE_ANON_KEY=foo
</CodeGroup>


1. In the relevant config file, replace the values for `supabaseUrl` and `supabaseAnonKey` (you can find these under **"Project Settings"** \-> **"API"** in your Supabase dashboard — under the "URL" section, and `anon` `key` under "Project API keys")
1. In the relevant config file, replace the values for `supabaseUrl` and `supabaseAnonKey` (you can find these under **"Project Settings" -> "API Keys"** in your Supabase dashboard — `anon` `public` under "API keys")
2. For the value of `powersyncUrl`, click the copy icon on your instance to copy its URL:

<Frame>
Expand Down
2 changes: 1 addition & 1 deletion snippets/supabase-database-connection.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</Frame>
7. Verify your setup by clicking **Test Connection** and resolve any errors.
8. Click **Next**.
9. PowerSync will detect the Supabase connection and prompt you to enable Supabase auth. To enable it, copy your JWT Secret from the Supabase Dashboard's API settings and paste it here:
9. PowerSync will detect the Supabase connection and prompt you to enable Supabase auth. To enable it, copy your JWT Secret from the Supabase Dashboard's API settings (available under **"Configuration" -> "Data API"**) and paste it here:
<img src="/images/installation/overview-supabase-auth.png" width="60%" />
10. Click **Enable Supabase auth** to finalize your connection settings.

Expand Down