How to connect Supabase to a site you host
Last updated
Give a site built with AI its Supabase database: find the keys, add them safely and check the connection works.
1. Which Supabase keys your site needs
Most sites built with AI talk to Supabase through its API. They need the project URL and the anon (public) key, usually named SUPABASE_URL and SUPABASE_ANON_KEY, or with a VITE_ or NEXT_PUBLIC_ prefix.
A site that connects to the database itself needs a connection string instead, starting postgresql://.
Never put the service role key in code that runs in the browser. It can read and change everything.
2. Never put keys in your code
Keep keys in your site's environment variables, not in its files. If you upload a folder with a .env file, we leave the file out and offer to add its values for you, saved as sensitive.
3. Connect Supabase in one click
- In the console, open your site and go to its Database tab.
- Under Supabase, select Connect Supabase, sign in to Supabase and allow access. Cloudzyro can read your projects and their keys, and can't change anything in your Supabase account.
- Choose the project for this site and select Use this project.
- If your site connects to the database directly, enter your database password.
- We test the connection and show what we'll save. Select Save and deploy.
If your code reads settings such as SUPABASE_URL, the Database tab lists them and marks each one Set or Not set, so you can see nothing's missing.
4. Or paste the keys yourself
In Supabase, open your project and select Connect. Copy the .env lines from App Frameworks, or a connection string. On the Database tab, paste them under Paste a connection string, select Check, then Save and deploy. We name each value the way your code expects.
5. Why the pooler, not the direct connection
Supabase's direct connection uses IPv6 only, unless you pay for its IPv4 add-on. Sites on Cloudzyro connect over IPv4, so they use Supabase's connection pooler instead. If you paste a direct connection string, we switch it to the pooler for you.
6. Check it works
Saving puts your site online again with the new settings. Open it and use a page that reads from Supabase. If something's missing, the Database tab says which setting your code still needs.