Skip to content

Commit c838290

Browse files
pinkeshmarspinkeshmars
authored
Merge pull request #503 from FlutterFlow/update/supabase-connection-method
Add New Supabase Connection Method
2 parents 1709084 + b478e59 commit c838290

1 file changed

Lines changed: 65 additions & 38 deletions

File tree

‎docs/ff-integrations/supabase/supabase-setup.md‎

Lines changed: 65 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,79 @@ keywords: [FlutterFlow, Supabase, Setup, Integration]
99

1010
# Supabase Setup
1111

12-
Connecting your FlutterFlow app to Supabase is quick and easy. Simply add your Supabase **API
13-
URL** and **Anon Key** in the **Settings & Integrations** section, and your data will be ready to
14-
use in FlutterFlow. With this integration, you can authenticate users and store and retrieve data from Supabase.
12+
You can either use [Supabase OAuth](#connect-with-supabase-oauth) for a quick and secure setup or [connect using API Keys](#connect-with-supabase-api-keys) for self-hosted setups.
13+
14+
## Connect with Supabase OAuth
15+
16+
To connect with Supabase using the OAuth method, follow the steps below:
17+
18+
1. Open **Settings & Integrations** and go to the **Supabase** section.
19+
2. Select the **Connect with Supabase OAuth** tab.
20+
3. Click **Connect to Supabase** to start the connection flow.
21+
4. Choose your Supabase organization and authorize access.
22+
5. After authorization, either select an existing Supabase project or click **Create New Project** to make a new one.
23+
6. If creating a new project, enter the project name and region, then click **Create**.
24+
7. Copy and save the database password, since it will not be shown again.
25+
8. Click **Done** to finish the setup.
26+
9. Once connected, you can view and manage the Supabase project from the Supabase settings, switch projects, or open it in a new browser tab.
27+
28+
<div style={{
29+
position: 'relative',
30+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
31+
height: 0,
32+
width: '100%'}}>
33+
<iframe
34+
src="https://demo.arcade.software/4RrHnQSlk7xXhbf1WMWn?embed&show_copy_link=true"
35+
title=""
36+
style={{
37+
position: 'absolute',
38+
top: 0,
39+
left: 0,
40+
width: '100%',
41+
height: '100%',
42+
colorScheme: 'light'
43+
}}
44+
frameborder="0"
45+
loading="lazy"
46+
webkitAllowFullScreen
47+
mozAllowFullScreen
48+
allowFullScreen
49+
allow="clipboard-write">
50+
</iframe>
51+
</div>
52+
<p></p>
53+
54+
:::tip
55+
After [**creating**](#create-tables-in-supabase) or updating tables in your Supabase database, make sure to click **Get Schema** to refresh and sync the latest table structure in FlutterFlow.
56+
:::
1557

16-
Follow the steps below to setup the Supabase:
17-
## Create Keys
58+
## Connect with Supabase API Keys
1859

19-
- Create a new [**Supabase account**](https://app.supabase.com/sign-up). If you already
20-
have an account, [login](https://app.supabase.com/sign-in).
60+
To connect using Supabase API Keys, you will manually link your Supabase project with FlutterFlow by providing the required credentials.
2161

22-
- To use Supabase with your FlutterFlow project, you'll need to create a project in Supabase
23-
first. If you haven't done so already, simply click on **+ New Project**, fill in the required information, and wait a few minutes for the process to complete.
62+
:::warning
63+
Please note that this method is only intended for **self-hosted Supabase databases**.
64+
:::
2465

25-
<figure>
26-
<div class="video-container"><iframe src="https://www.loom.
27-
com/embed/19ede54035c54b88bb07e043c5c0d60e?sid=dc8e9438-ffc9-4b51-ab44-02ed4931224c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
66+
1. First, create a project in Supabase from the Supabase dashboard.
67+
2. In your Supabase project, navigate to [Project Settings > API](https://app.supabase.com/project/cwnjvtflygqlpxdpsujv/settings/api). Copy the **Project URL**.
68+
3. Return to FlutterFlow, navigate to **Settings and Integrations > Integrations > Supabase**. Turn on the toggle (i.e., enable Supabase) and paste the **API URL**.
69+
4. Similarly, from the Supabase [API section](https://app.supabase.com/project/cwnjvtflygqlpxdpsujv/settings/api), copy the **anon key** (under **Project API keys**) and paste it inside the **FlutterFlow > Settings and Integrations > Integrations > Supabase > Anon Key.**
70+
5. Click on the **Get Schema** button. This will show the list of all tables with their schema (structure) created in Supabase.
71+
6. (Optional) If you have defined an *Array* for any *Column Data Type* in Supabase, you must set its type here. To do so, tap the "**Click to set Array type**" and choose the right one.
2872

73+
:::tip
74+
After [**creating**](#create-tables-in-supabase) or updating tables in your Supabase database, make sure to click **Get Schema** to refresh and sync the latest table structure in FlutterFlow.
75+
:::
76+
77+
<figure>
78+
<div class="video-container"><iframe src="https://www.loom.
79+
com/embed/47e1478146f04e83a9cfef5a873ad49b?sid=dea01d9a-7262-4fdd-9cbe-4d7bc50f9ff3" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
80+
81+
2982
<figcaption class="centered-caption"></figcaption>
3083
</figure>
3184

32-
3385
## Create Tables in Supabase
3486

3587
If you haven't already, [create table(s)](https://supabase.com/docs/guides/database/tables#creating-tables). If you're just getting started, you can uncheck the **Enable Row Level Security (**[**RLS**](https://supabase.com/docs/guides/auth/row-level-security)**)** option to remove any restrictions on accessing the table data.
@@ -54,28 +106,3 @@ To use Supabase authentication, you must
54106

55107
:::
56108

57-
## Add Keys to FlutterFlow
58-
59-
60-
Follow the steps below to add the API URL and Anon key:
61-
62-
1. In your Supabase project, navigate to [Project Settings > API](https://app.supabase.com/project/cwnjvtflygqlpxdpsujv/settings/api). Copy the **Project URL**.
63-
2. Return to FlutterFlow, navigate to **Settings and Integrations > Integrations > Supabase**. Turn on the toggle (i.e., enable Supabase) and paste the **API URL**.
64-
3. Similarly, from the Supabase [API section](https://app.supabase.com/project/cwnjvtflygqlpxdpsujv/settings/api), copy the **anon key** (under **Project API keys**) and paste it inside the **FlutterFlow > Settings and Integrations > Integrations > Supabase > Anon Key.**
65-
4. Click on the **Get Schema** button. This will show the list of all tables with their schema (structure) created in Supabase.
66-
5. (Optional) If you have defined an *Array* for any *Column Data Type* in Supabase, you must set its type here. To do so, tap the "**Click to set Array type**" and choose the right one.
67-
68-
:::note
69-
Whenever you make changes related to tables in Supabase, hit the **Get Schema** button again to reflect the changes here.
70-
:::
71-
72-
<figure>
73-
<div class="video-container"><iframe src="https://www.loom.
74-
com/embed/47e1478146f04e83a9cfef5a873ad49b?sid=dea01d9a-7262-4fdd-9cbe-4d7bc50f9ff3" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
75-
76-
77-
<figcaption class="centered-caption"></figcaption>
78-
</figure>
79-
80-
81-
Now you have completed the Supabase Setup! You can continue to learn about how to add Supabase [Authentication](../authentication/supabase-auth/initial-setup.md) and [Database](../database/supabase/database-actions.md).

0 commit comments

Comments
 (0)