What you're actually doing when you connect Supabase to Superblocks

Connecting Supabase to Superblocks means telling Superblocks where your database lives and giving it permission to read from or write to that database. Supabase is a database service that stores your data in the cloud. Superblocks is a tool for building internal applications and dashboards without writing code. When you connect them, you're creating a bridge so that Superblocks can pull data from your Supabase database and display it in your app, or let users submit data back to Supabase through a Superblocks form.

The connection happens through an API key — a unique string of characters that acts like a password. You generate this key in Supabase, paste it into Superblocks, and Superblocks uses it to prove to Supabase that it's allowed to access your data. This is safer than storing your actual password because you can delete the key at any time without changing your password.

Key Takeaways

  • You need a Supabase project already created and a Superblocks account before you start the connection process.
  • The connection uses an API key from Supabase, which you generate in your Supabase project settings and then paste into Superblocks.
  • Superblocks stores this key as a "resource" so you can use it in multiple apps and dashboards without re-entering it each time.
  • After connecting, you can query your Supabase database directly from Superblocks using SQL or REST API calls.

Getting your Supabase API key

Log into your Supabase account and open the project you want to connect. On the left sidebar, click Settings, then click API. You'll see several keys listed: the Project URL and the anon public key are what you need for Superblocks.

The Project URL looks like https://yourprojectname.supabase.co. The anon public key is a long string starting with eyJ. Copy both of these — you'll paste them into Superblocks in the next step. Do not share these with anyone outside your team, and do not post them in public code repositories.

Creating the connection in Superblocks

Log into Superblocks and open the app or dashboard where you want to use your Supabase data. In the left panel, look for Resources or Integrations (the exact name depends on your Superblocks version). Click the button to add a new resource.

Search for or select Supabase from the list of available integrations. Superblocks will ask you for two things: the Supabase URL and the Supabase Key. Paste the Project URL into the first field and the anon public key into the second. Give the resource a name you'll recognize — something like "Production Database" or "Customer Data" — then save it.

Superblocks now has permission to talk to your Supabase database. This resource stays in your Superblocks workspace, so you can use it in other apps without setting it up again.

Querying your database from Superblocks

Once the resource is created, you can pull data from Supabase into your Superblocks app. In your app editor, add a component like a table or a form. In the data settings for that component, you'll see an option to connect a data source. Select your Supabase resource.

Superblocks will let you write a SQL query directly. For example, to show all customers from a table called customers, you'd write SELECT * FROM customers. To show only customers in a specific city, you'd write SELECT * FROM customers WHERE city = 'New York'. Superblocks runs this query against your Supabase database and displays the results in your component.

You can also use Superblocks' query builder if you prefer not to write SQL — it has a visual interface where you pick the table, the columns, and any filters you want.

Sending data back to Supabase

If you want users to submit data through a Superblocks form and have it saved to Supabase, you'll create a write query instead of a read query. In your form settings, add an action that runs when the user clicks Submit. Choose your Supabase resource and write an INSERT query that adds the form data to your table.

For example, if you have a form with fields for name and email, your query might be INSERT INTO customers (name, email) VALUES ('{{ form1.data.name }}', '{{ form1.data.email }}'). The double-brace syntax tells Superblocks to replace those placeholders with whatever the user typed into the form. When the user submits, Superblocks sends this query to Supabase, and the data gets saved to your database.

Troubleshooting common connection problems

If Superblocks can't reach your Supabase database, the most common cause is a wrong URL or key. Double-check that you copied both strings exactly — even one missing character will break the connection. Make sure you're using the anon public key, not the service role key or any other key listed on the API page.

If your query runs but returns no data, check that the table name is spelled correctly and that the table actually exists in your Supabase project. Supabase table names are case-sensitive, so Customers and customers are different. If you're trying to insert data and it's not showing up, make sure your Supabase table has the columns your query is trying to fill, and that the column names match exactly.

If you see a permission error, it may mean your Supabase project has row-level security (RLS) enabled. RLS restricts which rows different users can see. If you're just getting started, you can disable RLS on your tables in Supabase settings. For production apps, you'll want to set up RLS policies that match your security needs, but that's a separate step beyond the basic connection.

When to use Supabase with Superblocks versus other options

This setup works well if you want to build an internal tool or dashboard quickly without writing backend code. Superblocks handles the interface, and Supabase handles the data storage. You don't need to set up servers or write API endpoints yourself.

If you're building a public-facing app that needs to scale to thousands of users, or if you need complex business logic that can't fit into straightforward database queries, you might want a different approach — like writing a custom backend in Node.js or Python that sits between your frontend and Supabase. But for internal dashboards, admin panels, and small to medium apps, Supabase plus Superblocks is a straightforward path.

Frequently Asked Questions

Can I use the service role key instead of the anon public key?

Technically yes, but you shouldn't. The service role key has more permissions and is meant for backend code you control, not for client-facing apps. Use the anon public key in Superblocks. If you need to restrict what data users can see, set up row-level security policies in Supabase instead of using a more powerful key.

What happens if someone steals my Supabase key from Superblocks?

They can read and write data to your database until you delete the key. Go to your Supabase project settings, find the key in the API section, and delete it. Then generate a new one and update it in Superblocks. This takes a few minutes and stops the stolen key from working when ready.

Can I connect multiple Supabase projects to one Superblocks app?

Yes. Create a separate resource in Superblocks for each Supabase project, using each project's own URL and key. Then in your queries, choose which resource to use. This is useful if you have separate databases for different environments — like one for testing and one for production.

Do I need to write SQL, or can I use a visual query builder?

Superblocks has both. You can write SQL directly if you know it, or use the visual query builder to point and click your way through selecting tables and filters. Start with the visual builder if SQL is new to you — you can always switch to SQL later once you're comfortable.