Connect your Supabase project

Add your project

Open Connectors and choose Supabase. The connector takes a hosted project address of the form https://your-project.supabase.co and a publishable key (or a legacy anon key). Secret and service-role keys are rejected.

Use separate Supabase projects for Test and Live, so trying things never touches real data.

1. Name the connection and enter the Test project's address and publishable key.
2. Add the Live project when you have one, choose the schema, and pick the active configuration.
3. Check the connection, then open Explore to see the tables, columns and functions the project exposes.

Read the check for what it is

A successful check applies to the exact address, key and schema it checked. Explore reads the schema's metadata only; it never reads rows or changes your project. A check does not verify your access policies or any app flow.

Row Level Security, Storage policies and functions are set up in Supabase, and they are what protect your data once the app runs.

Use the client in your app

Import getSupabase from @appsanic/connectors with your connection's id to get the official Supabase client. Database reads and writes, sign-in screens, Storage, Realtime, RPC and calls to your existing Edge Functions all go through it, in code you write or Sanic AI writes for you.

import { getSupabase } from "@appsanic/connectors";

export async function listTrips() {
  const supabase = getSupabase("my-supabase");
  const { data, error } = await supabase
    .from("trips")
    .select("id, name, rating")
    .order("rating", { ascending: false })
    .limit(6);
  if (error) throw error;
  return data;
}

Sessions and sign-in

In the browser preview a Supabase session lives in memory and resets when the preview reloads. On a phone the native app keeps it in secure storage. Sign-in with a provider or an emailed link needs redirect addresses and callback handling set up in Supabase and in your app code; the preview has no automatic pop-up for it.