Supabase guide improvements (#108)

* Bring supabase guide instructions in line with updated video

* Update another image

Author: benitav

images/installation/copy-instance-url.png

@@ -6,6 +6,7 @@ sidebarTitle: Overview
 
 import CreateCloudInstance from '/snippets/create-cloud-instance.mdx';
 import SupabaseConnection from '/snippets/supabase-database-connection.mdx';
+import ConfigureSyncRules from '/snippets/configure-sync-rules.mdx';
 
 <Frame caption="Video walkthrough of the integration guide.">
   <iframe width="1005" height="420" src="https://www.youtube.com/embed/Xg5FTYGPn5U?si=4TjdYEACDR2g98yh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></Frame>
@@ -118,35 +119,7 @@ create publication powersync for table public.lists, public.todos;
 <SupabaseConnection />
 
 ### Configure Sync Rules
-
-[Sync Rules](/usage/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.
-
-1. To update your sync rules, open the `sync-rules.yaml` file.
-
-<Frame>
-  <img src="/images/integration-5.png" />
-</Frame>
-
-2. Replace the `sync-rules.yaml` file's contents with the below:
-
-```yaml
-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
-```
-
-3. In the top right, click **"Validate sync rules"** and ensure there are no errors. This validates your sync rules against your Postgres database.
-4. In the top right, click **"Deploy sync rules"** and select your instance.
-5. Confirm in the dialog and wait a couple of minutes for the deployment to complete.
-
-<Tip>
-- For additional information on PowerSync's Sync Rules, refer to the [Sync Rules](/usage/sync-rules) documentation.
-- If you're wondering how Sync Rules relate to Supabase Postgres [RLS](https://supabase.com/docs/guides/auth/row-level-security), see [this subsection](/integration-guides/supabase-+-powersync/rls-and-sync-rules). 
-</Tip>
+<ConfigureSyncRules />
 
 ## Test Everything (Using Our Demo App)
 
@@ -234,7 +207,7 @@ SUPABASE_ANON_KEY=foo
 2. For the value of `powersyncUrl`, click the copy icon on your instance to copy its URL:
 
 <Frame>
-  <img src="/images/integration-7.png" width="60%"/>
+  <img src="/images/installation/copy-instance-url.png" width="60%"/>
 </Frame>
 #### Run the app
 

images/installation/create-new-instance.png

@@ -0,0 +1,27 @@
+[Sync Rules](/usage/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.
+
+1. The final step is to replace the Sync Rules file's contents with the below:
+
+```yaml
+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
+```
+
+<Frame>
+  <img src="/images/installation/overview-sync-rules.png" />
+</Frame>
+
+3. Click **"Validate sync rules"** and ensure there are no errors. This validates your sync rules against your Postgres database.
+4. Click **"Save and deploy"** to deploy your Sync Rules.
+
+<Tip>
+- Your Sync Rules can be updated by navigating to the **Manage instances** workspace and selecting the `sync-rules.yaml` file.
+  <img src="/images/installation/update-sync-rules.png" width="60%" />
+- For additional information on PowerSync's Sync Rules, refer to the [Sync Rules](/usage/sync-rules) documentation.
+- If you're wondering how Sync Rules relate to Supabase Postgres [RLS](https://supabase.com/docs/guides/auth/row-level-security), see [this subsection](/integration-guides/supabase-+-powersync/rls-and-sync-rules). 
+</Tip>

images/installation/edit-instance.png

@@ -1,10 +1,13 @@
-1. In the [PowerSync Dashboard](/usage/tools/powersync-dashboard) Project tree, click on "**Create new instance**":
-
-<Frame>
-  <img src="/images/installation/create-new-instance.png" width="60%" />
-</Frame>
-
+1. In the **Overview** workspace of the [PowerSync Dashboard](/usage/tools/powersync-dashboard) you will be prompted to create your first instance:
+  <Frame>
+    <img src="/images/installation/overview-create-instance.png" />
+  </Frame>
+  <Note>
+    If you previously created an instance, you can create a secondary instance by navigating to the **Manage instances** workspace and clicking on **Create new instance**.
+    <img src="/images/installation/create-new-instance.png" width="40%" />
+  </Note>
 2. Give your instance a name, such as "Testing".
-3. Under the "**General**" tab, you can change the default cloud region from US to EU, JP (Japan), AU (Australia) or BR (Brazil) if desired.
+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](/resources/contact-us) if you need a different region.
-4. Under the **"DB Connections"** tab, click on the **+** icon and select your database technology.
+4. [Optional] You can opt in to using the Beta version of the Service, which may contain early access or experimental features. Always use the Stable version in production. 
+5. Click **Next**.

images/installation/overview-connection-details.png

@@ -19,20 +19,19 @@
   Your connection settings should look similar to this:
 
   <Frame>
-    <img src="/images/integration-guides/powersync-supabase-connection.png" />
+    <img src="/images/installation/overview-connection-details.png" />
   </Frame>
 
 2. Verify your setup by clicking **Test Connection** and resolve any errors.
 
-3. Configure authentication:
-   * Navigate to the **Client Auth** tab
-   * Enable **Use Supabase Auth**
-   * Enter your Supabase **JWT Secret**
+3. Click **Next**.
+4. 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 into the form:
+    <img src="/images/installation/overview-supabase-auth.png" width="60%" />
+5. Click **Enable Supabase auth** to finalize your connections settings.
 
-  <Frame caption="PowerSync will use this secret to validate Supabase JWTs">
-    <img src="/images/authentication/use-supabase-auth.png" />
-  </Frame>
-
-4. Click **Save and deploy** to apply your changes.
+<Tip>
+You can update your instance settings by navigating to the **Manage instances** workspace, opening your instance options and selecting **Edit instance**.
+<img src="/images/installation/edit-instance.png" width="60%" />
+</Tip>
 
 PowerSync will now create an isolated cloud environment for your instance. This process typically takes a few minutes.