Supabase

Supabase extends Webflow with a full PostgreSQL database, built-in auth (email/password, magic links, OAuth, SSO), file storage, and WebSocket-based real-time subscriptions. No custom backend required.

Load the Supabase JS client via custom code or skip code entirely with apps like Wized and BuildShip. With Webflow's native User Accounts feature permanently removed on January 29, 2026, Supabase Auth has emerged as a leading replacement for login and access control on Webflow sites.

How to integrate Supabase with Webflow

What is Supabase? Supabase is an open-source Backend-as-a-Service built on PostgreSQL. Every Supabase project includes a dedicated Postgres database with auto-generated REST and GraphQL APIs, authentication (email/password, magic links, OAuth, SSO), file storage with CDN delivery, Edge Functions for server-side logic, and real-time subscriptions over WebSockets. Supabase is available as a managed cloud service or self-hosted.

Teams pair Supabase with Webflow when a site needs functionality that goes beyond static pages and CMS content. Authenticated member portals, form data stored in a relational database, live dashboards that update without page refreshes, and file upload workflows all require a backend. Supabase provides that backend while Webflow handles the visual frontend and hosting.

The Supabase-Webflow integration supports 4 approaches:

• Third-party Webflow apps like Wized and BuildShip connect to Supabase tables and auth without writing code.
• Custom code with the Supabase JS client lets you add authentication forms, database queries, and real-time subscriptions using Code Embed elements and site-level scripts.
• Automation platforms like n8n trigger workflows between Webflow events and Supabase database actions.
• The Webflow and Supabase APIs give you full control over CMS syncing, webhook-driven data flows, and server-side operations, but require development resources.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Connect Supabase with third-party Webflow apps

No native Supabase app exists in the Webflow Apps directory. Two third-party apps listed in the directory connect to Supabase directly: Wized and BuildShip. Both install into your Webflow project and provide visual interfaces for configuring Supabase as a data source, removing the need to write JavaScript.

Wized for visual data binding

Wized connects Webflow elements to Supabase tables and auth through a visual dashboard. After installing Wized by pasting a single script tag into Site Settings > Custom Code (head), all configuration happens inside the Wized interface. You point data sources at Supabase tables, then map database fields to Webflow text elements, images, or Collection List components visually.

To set up Wized with Supabase:

1. Install the Wized app from the Webflow Apps directory by pasting a single script tag into Site Settings > Custom Code (head).
2. Open the Wized dashboard and configure a data source pointing to your Supabase tables using your project URL and anon key.
3. Map Supabase table fields to Webflow text elements, images, or Collection Lists using Wized's visual interface.

Wized handles both read and write operations. You can display Supabase data on the page, submit forms that insert rows into Supabase tables, and bind authentication state to show or hide elements. A cloneable demo built by Finsweet with Wized and Supabase has been cloned over 300 times in Webflow's community showcase.

BuildShip for workflow automation

BuildShip creates visual workflows that route Webflow form submissions to Supabase automatically. It can also act as middleware, creating custom API endpoints that fetch and transform Supabase data for Webflow pages. BuildShip runs server-side, so it can handle operations that should not execute in the browser.

To set up BuildShip with Supabase:

1. Install the BuildShip app from the Webflow Apps directory.
2. Create a new workflow in the BuildShip visual builder and add Supabase as a connected service.
3. Configure triggers (such as Webflow form submission) and actions (such as Create Row, Update Row, Update Row with Token, or Upload File to a Supabase Storage Bucket).

BuildShip supports bidirectional data flow. You can sync Webflow CMS collections to Supabase tables, route form data, and trigger automated workflows when database rows change. Because BuildShip handles API calls server-side, sensitive credentials stay out of your Webflow site's client-side code.

Add Supabase with custom code

For direct control over authentication, database queries, and real-time features, load the Supabase JavaScript client via CDN and write scripts in Webflow's custom code areas. This approach requires a Core, Growth, Agency, or Freelancer Workspace, or an active paid Site plan. Custom code is not available on free Starter plans. You will need your Supabase project URL and anon (public) key, both found in Supabase Dashboard > Project Settings > API.

Initialize the Supabase client site-wide

Loading the Supabase JS library in your site's head code makes it available on every page. This is the foundation for all other custom code methods.

To initialize the Supabase client:

1. Open Site Settings > Custom Code and paste the following into the Head Code field:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

2. Paste the following into the Footer Code field (before </body>):

<script>
  const { createClient } = supabase;
  const _supabase = createClient(
    'YOUR_SUPABASE_PROJECT_URL',
    'YOUR_SUPABASE_ANON_KEY',
    {
      auth: {
        persistSession: true,
        autoRefreshToken: true,
        detectSessionInUrl: true
      }
    }
  );
</script>

3. Replace YOUR_SUPABASE_PROJECT_URL and YOUR_SUPABASE_ANON_KEY with values from your Supabase dashboard.

The _supabase variable becomes globally available to all other scripts on your site, including Code Embed elements. Sessions persist in localStorage and tokens refresh automatically. The anon key is safe to include in client-side code only when Row Level Security (RLS) is enabled on your Supabase tables. Without RLS, anyone who extracts the key from browser DevTools can read, modify, or delete all data.

Build authentication forms with Code Embed

Once the Supabase client is initialized site-wide, you can place authentication forms at specific locations on any page using Code Embed elements. Drag a Code Embed element onto the canvas and double-click it to open the inline code editor.

To add a magic link login form:

1. Add a Code Embed element to your login page.
2. Paste the following HTML and JavaScript into the editor:

<div id="auth-container">
  <input id="email" type="email" placeholder="Your email" />
  <button id="login-btn">Send Magic Link</button>
  <p id="auth-message"></p>
</div>

<script>
  document.getElementById('login-btn').addEventListener('click', async () => {
    const email = document.getElementById('email').value;
    const { error } = await _supabase.auth.signInWithOtp({ email });
    document.getElementById('auth-message').textContent =
      error ? error.message : 'Check your email for the login link!';
  });
</script>

3. Publish your site and test the form on the live domain.

The same pattern works for email/password sign-up (_supabase.auth.signUp({ email, password })), password-based sign-in (_supabase.auth.signInWithPassword({ email, password })), and sign-out (_supabase.auth.signOut()). Place an onAuthStateChange listener in your site-wide footer code to react to login and logout events across all pages. For auth decisions, always use _supabase.auth.getUser() instead of getSession(), because getUser() verifies the session against the server while getSession() only reads from local storage.

Query and display Supabase data

Client-side database queries let you fetch data from Supabase tables and render it into Webflow elements at runtime. This works for content that exceeds Webflow CMS limits, requires relational structure, or needs to be scoped per user.

To display data from a Supabase table:

1. Add a Code Embed element where you want the data to appear.
2. Use the Supabase JS client to query your table:

const { data, error } = await _supabase
  .from('your_table')
  .select('column1, column2')
  .eq('user_id', userId);

3. Use DOM manipulation to inject the returned data into Webflow elements by targeting element IDs or custom attributes.

You can also insert rows from form submissions by intercepting the form's submit event with e.preventDefault() and calling _supabase.from('table').insert({...}). Webflow's native forms submit data to Webflow's own backend by default. To route submissions to Supabase instead, you must intercept the form event in JavaScript.

Add real-time subscriptions

Supabase Realtime delivers database changes to the browser over WebSockets. New rows, updates, and deletions appear on the page the moment they happen, with no page refresh required.

To subscribe to real-time updates:

1. Run the following SQL in the Supabase SQL Editor to enable full row data on updates:

ALTER TABLE your_table REPLICA IDENTITY FULL;

2. Add a Code Embed element and subscribe to changes:

const channel = _supabase
  .channel('my-changes')
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'your_table'
  }, payload => {
    // payload.new contains the updated row
    // Use DOM manipulation to update the page
  })
  .subscribe();

3. Clean up the subscription when the user leaves the page by calling _supabase.removeChannel(channel).

Tables must be added to the supabase_realtime publication before subscriptions receive events. Missing this step is the most common first-deploy mistake with Supabase Realtime.

Connect with n8n

Automation platforms connect Webflow triggers (form submissions, CMS item changes, site publishes) to Supabase actions (create rows, update rows, run queries) without writing code. n8n supports direct Webflow-to-Supabase connections with a dedicated integration page and pre-built templates.

n8n provides both Webflow and Supabase nodes with a dedicated integration page and pre-built community workflows. Supported Webflow actions include Webflow Create Item, Webflow Delete Item, Webflow Get Item, Webflow Get Many Items, and Webflow Update Item. Supabase actions include Supabase Create Row, Supabase Delete Row, Supabase Get Row, Supabase Get Many Rows, and Supabase Update Row. A community workflow demonstrates converting Supabase FAQ entries to audio and embedding them in Webflow CMS pages.

Build with the Webflow and Supabase APIs

For full programmatic control over data sync, webhook-driven workflows, and server-side operations, use the Webflow Data API and Supabase REST API together. This path requires server-side development, typically implemented through Supabase Edge Functions that receive webhook payloads and call the Webflow API.

• The Supabase REST API handles database reads, writes, and stored procedure calls at /rest/v1/
• The Supabase Auth API handles sign-up, sign-in, token refresh, and OAuth flows at /auth/v1/
• The Supabase Storage API handles file uploads, downloads, and bucket management at /storage/v1/
• Webflow's Data API handles CMS collections and form submissions
• Webflow webhooks trigger real-time events like form_submission, collection_item_created, and site_publish

API-based integration is the right choice when you need to sync Supabase database changes into Webflow CMS for SEO-indexed content, process webhook payloads with custom business logic, or run server-side operations that cannot safely execute in the browser.

Sync Supabase data to Webflow CMS with Edge Functions

Supabase Database Webhooks fire HTTP POST requests whenever rows are inserted, updated, or deleted. By pointing these webhooks at a Supabase Edge Function, you can transform the payload and push changes to Webflow CMS collections automatically.

To set up a sync pipeline:

1. Create a Supabase Edge Function that receives webhook payloads and calls the Webflow CMS API. Store your Webflow API token as an environment variable in the Supabase dashboard (never in client-side code):

Deno.serve(async (req) => {
  const payload = await req.json();
  const WEBFLOW_API_TOKEN = Deno.env.get('WEBFLOW_API_TOKEN');
  const WEBFLOW_COLLECTION_ID = Deno.env.get('WEBFLOW_COLLECTION_ID');

  if (payload.type === 'INSERT') {
    await fetch(
      `https://api.webflow.com/v2/collections/${WEBFLOW_COLLECTION_ID}/items`,
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${WEBFLOW_API_TOKEN}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          fieldData: {
            name: payload.record.title,
            slug: payload.record.slug,
          }
        })
      }
    );
  }

  return new Response('ok', { status: 200 });
});

2. Configure a Database Webhook in Supabase Dashboard > Database > Webhooks that fires on INSERT, UPDATE, or DELETE events for your target table, pointing to the Edge Function's URL.
3. Generate a Webflow API token in Site Settings > Apps & integrations > API access with both read and write permissions.

The UPDATE webhook payload includes both record (new values) and old_record (previous values), so your Edge Function can compare fields and only call the Webflow API when relevant data has changed. Note that Supabase's pg_net extension has no http_patch() function. For PATCH or UPDATE operations against the Webflow CMS API, you must use Edge Functions rather than direct database triggers.

Forward Webflow form submissions to Supabase

Webflow webhooks can send form submission data to a Supabase Edge Function, which then inserts the data into a Supabase table. This approach keeps form data in a queryable PostgreSQL database for reporting and downstream processing.

To set up form forwarding:

1. Create a Webflow webhook via the Webhooks API with triggerType set to form_submission and the target URL pointing to your Supabase Edge Function. Webhook creation requires an OAuth token from a Data Client App.
2. In the Edge Function, parse the formResponse object from the webhook payload and insert it into your Supabase table using the service role key (safe inside the Edge Function):

Deno.serve(async (req) => {
  const payload = await req.json();
  const supabase = createClient(
    Deno.env.get('SUPABASE_URL'),
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')
  );

  await supabase.from('form_submissions').insert({
    name: payload.formResponse['First Name'],
    email: payload.formResponse['Email'],
    submitted_at: payload.dateSubmitted,
  });

  return new Response('ok', { status: 200 });
});

3. Deploy the Edge Function and test by submitting a form on your published Webflow site.

For CDN-backed read operations that do not count against Webflow API rate limits, use api-cdn.webflow.com instead of api.webflow.com when fetching published CMS items.

What can you build with the Supabase Webflow integration?

Integrating Supabase with Webflow lets you build authenticated, data-driven web applications without managing a custom backend.

• Membership portals with gated content: Build a site where users sign up with email/password or OAuth, then access members-only pages based on subscription status. Supabase Auth handles login flows and RLS restricts database queries to each user's own data. Hide gated sections by default in Webflow and reveal them with JavaScript only after the auth check passes.
• Real-time dashboards: Display live data from a Supabase table that updates the moment rows change. Support ticket queues, inventory trackers, and activity feeds can all refresh in the browser without a page reload, using Supabase Realtime subscriptions over WebSockets in a Code Embed element.
• Dynamic directories and listings: Populate a Webflow page with job listings, product catalogs, or property data stored in Supabase Postgres. Client-side queries filter and sort data at runtime, handling volumes and relational structures that go beyond Webflow CMS capacity.
• File upload workflows: Let authenticated users upload documents, images, or media through a custom HTML file input on your Webflow page. Files go directly to Supabase Storage buckets with access control scoped per user via RLS, and public URLs serve approved assets through Supabase's CDN.

If you need more control over data sync between Supabase and Webflow CMS, or need to run server-side logic before writing data, the API integration path covers those cases with full flexibility.