Supabase is a powerful scalable database platform that can be used to power your Frontly apps!
Setup
Frontly requires 4 values from Supabase to be integrated correctly:
Project ID, Public Key, Host, and Database Password
For each of these values, follow the steps below and paste it into the Public Key field in the Frontly Data Source Account Connections settings.
Project ID
In Supabase, go to Project Settings => General and locate the Project ID field.
Public Key
Go to your Supabase Dashboard, go to Project Settings => Data API and copy the anon public key (a large string of random characters).
Host & Password
In Supabase, from the Settings header, click Connect. Locate the Transaction pooler section => Click View parameters, and copy the Host value there.
The Password will not be shown, but it was a password that you would have created for the database when you created the project. If you don't know this password and you're not using Supabase for other services that would be impacted by changing the password, there is an option to Reset Database Password. Be careful, and do this at your own risk.
Other Notes
Ensure your primary key is a field called 'id' in your Supabase table.
In Supabase, in each table you want to use with Frontly, find the Enable Row Level Security setting and disable it. This feature only works when using Supabase's auth system, which we are not. If you don't do this, no records will appear.
Unlike Google Sheets, Supabase supports pagination, meaning results coming from the database in limited pages of results. We default to 25 results per page, but you can adjust this setting with the Results Per Page setting in your Table or Grid setup.
Hidden Filters operate as usual, but are currently limited to Equals, Contains, Greater Than, Less Than operators.
Connecting Supabase Tables To Frontly
In Frontly, on the Data Sources page (previously named the Google Sheets page), click the Add Supabase Table button, and type the name of your table.
Important: Use Lowercase Table Names When Importing from Supabase
When importing a table from Supabase into Frontly, make sure to name your table using only lowercase letters. This is because Supabase runs on PostgreSQL, which treats uppercase table names differently due to its database role settings.
If you use uppercase or mixed-case table names, PostgreSQL automatically wraps them in quotes, which can prevent Frontly from fetching data correctly.
✅ Correct: user_data
❌ Incorrect: UserData or USER_DATA
Your table name will look something like like this:
Press the Import Table button - if everything is setup correctly, you should see that your table is imported and becomes available for use, just like a regular Google Sheet within Frontly.
Final Note: Frontly will need to validate the data schema and its values on your Supabase table before its able to complete a connection with your Frontly account. Therefore, it's important to have at least one row of data in your Supabase table that's aligned with your data schema!
Setting up Relational Data
Showing relational data with Supabase tables will require an extra step of configuration inside your Supabase platform as well.
Within the Supabase table you've set as the child table in Frontly, settings, you'll need to set up a Foreign Key that points its related field to a related field of the parent table.
Using the Orders <> Products example provided in the Setting up Relational Data article, a mirrored setup in Supabase would configured as shown below:
After that, you should be able to visualize your relational data in Frontly!
Supabase is just one of three data source integration options available to Frontly. Follow the links below to learn how to set up the remaining others!
Google Sheets
Airtable