Supabase: auth and databases

BrightSite can host a real web app (user accounts, a sign-in flow, and a database) by pairing its pages with a Supabase backend. Your marketing site, blog, and gated app all live on one platform, and Supabase handles auth and data.

This is a pattern customers already run in production: client portals, internal dashboards, and booking tools built as BrightSite pages talking to Supabase from the browser.

How the architecture works

BrightSite serves your pages: fast hosting, a custom domain, the visual editor, forms, and SEO for everything public. Supabase provides the backend: a hosted Postgres database, user authentication, and file storage. The two connect with supabase-js, Supabase's official JavaScript client, running in the visitor's browser.

There is no server to deploy and no build pipeline. Sign-in credentials travel directly from the browser to Supabase over HTTPS and never touch BrightSite's servers. Application data loads after sign-in, governed by Supabase's Row Level Security rules.

Division of labor: BrightSite owns pages, hosting, domain, forms, media, blog, and analytics. Supabase owns accounts, sessions, database tables, and access rules.

Build a gated portal

1. Create a Supabase project

At supabase.com, create a project and copy two values from the API settings: the project URL and the publishable (anon) key. The publishable key is safe to use in page scripts; that is what it exists for.

2. Build your pages in BrightSite

Keep your public site as normal pages. Add the app pages, for example /login and /portal, the same way. You can build them in the visual editor, by hand, or by asking Claude or ChatGPT through the BrightSite MCP server.

3. Load supabase-js sitewide

Put the client setup in your site's global JavaScript so every page can use it.

import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

window.supabase = createClient(
  "https://YOUR-PROJECT.supabase.co",
  "YOUR-PUBLISHABLE-KEY"
);

4. Wire up sign-in

Intercept your login form's submit and call Supabase Auth. Password sign-in and email magic links both work from a BrightSite page.

document.querySelector("#login-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const { error } = await supabase.auth.signInWithPassword({
    email: e.target.email.value,
    password: e.target.password.value,
  });
  if (!error) window.location.href = "/portal";
});

5. Gate the portal page

On /portal, check for a session before rendering anything private, and route signed-out visitors back to the login page.

const { data: { session } } = await supabase.auth.getSession();

if (!session) {
  window.location.href = "/login";
} else {
  const { data } = await supabase.from("projects").select("*");
  renderProjects(data);
}

6. Lock down the data with Row Level Security

In Supabase, enable RLS on every table and write policies so each user can only read and write their own rows. This is the security boundary of the whole app, so do it before inviting anyone in.

Security: what to get right

The publishable key is public by design. Anyone can see it in your page source, exactly as they can on a React site. It grants nothing by itself.

RLS is your only real gate. The client-side redirect keeps honest people out of the portal page, but the HTML of a BrightSite page is public. Never put private data in the page itself; fetch it from Supabase after sign-in, where RLS decides who sees what.

Let AI build it

With the BrightSite MCP server connected, you can hand this whole setup to an assistant. Send it this prompt:

Read https://onbrightsite.com/integrations/supabase and build what it
describes on my BrightSite site: a login page and a session-gated portal
page backed by Supabase. Use the BrightSite MCP server to create the pages.
Ask me for my Supabase project URL and publishable (anon) key first, and
walk me through the Row Level Security checklist before anything goes live.

For repeat builds, the open-source brightsite-skills repo includes a supabase-portal skill that walks Claude, Cursor, or any MCP client through these steps with the pitfalls and security checklist built in. Install it with npx skills add BrightSiteHQ/brightsite-skills, then ask your assistant for a Supabase portal. See Ready-made AI skills for more.

Related

• Connecting an AI tool
• Global code
• Ready-made AI skills