Connect Supabase to Refine

Learn how to connect your Supabase database to Refine and generate a working admin panel or dashboard in minutes.

Connect your Supabase project to Refine and get a working admin panel in minutes.

⏱️ Time to complete: ~5 minutes

What You'll Build

Refine reads your Supabase tables and generates a complete React application:

Data tables with sorting, filtering, and pagination
Create/edit forms matching your column types
Authentication using your Supabase auth setup
Full code ownership — export and deploy anywhere

Prerequisites

Before you start:

A Supabase account (sign up free at supabase.com)
A Supabase project with at least one table
A Refine account (sign up free at refine.dev)

Tip

Don't have a Supabase project yet? You can create one during setup, but you'll get better results if you have some tables and data already.

How to Connect

You can connect Supabase in two ways:

Method	When to use
From /start	Starting a new project
From Console	Adding Supabase to an existing project

Option A: Connect from /start

Step 1: Start the connection

Go to refine.dev/start and click Connect to Supabase.

If you're not signed in, you'll be prompted to authenticate with Google or GitHub first.

Result: A modal opens asking you to connect your Supabase organization.

Step 2: Authorize Refine

Click Add Organization
You'll be redirected to Supabase
Grant the requested permissions
You'll return to Refine automatically

Tip

You can connect multiple Supabase organizations. Use the dropdown at the top of the modal to switch between them.

Result: Your Supabase projects appear in the modal.

Step 3: Select your project

You'll see your projects listed with:

Project name
Creation date
Status (Active/Inactive)

Click the project you want to connect.

Make sure your Supabase project is active, not paused. Paused projects won't connect.

Result: Refine starts analyzing your database.

Step 4: Wait for database analysis

Refine reads your database schema — tables, columns, relationships — and creates a Refine Schema Language (RSL) file. Think of RSL as a map that helps the AI understand your data structure.

Database Size	Analysis Time
Small (< 20 tables)	~1 minute
Medium (20-50 tables)	~2 minutes
Large (50+ tables)	Up to 5 minutes

You'll see a loading animation while this runs. Don't close the tab.

Result: The Resources page appears showing your schema.

Step 5: Review your resources

The Resources page displays your database structure:

Tables and their columns
Relationships between tables
Data types for each field

This confirms Refine understands your data. Take a quick look to make sure everything looks right.

Tip

If something looks wrong, click Regenerate to re-analyze your schema.

Result: You're ready to build.

Step 6: Start building

Click Continue to enter the Refine Console.

Now describe what you want in the chat:

Create an admin panel for my users table

Build a dashboard showing orders by status

Generate a CRUD interface for products with filters

Refine generates a working application connected to your Supabase data.

Result: A live preview of your application appears in the right panel.

Option B: Connect from Console

Already in a project? Connect Supabase from the Settings tab.

Open Settings in the Console
Go to Integrations
Click Supabase
Pick a project from the dropdown (or connect a new organization)
Click Connect

The same OAuth and analysis flow runs. When complete, your project is connected.

Tip

Use this method to switch Supabase projects or add Supabase to a project you started with chat.

Empty vs Existing Databases

How the AI handles your database depends on whether it has data:

Database State	AI Behavior
Empty (no tables or data)	AI creates tables, columns, and sample data for you
Has data	AI reads your schema but never writes to the database

Empty database

If your Supabase project is empty, the AI can:

Create tables based on what you're building
Set up relationships between tables
Add sample data to work with

This is great for rapid prototyping — describe what you want and let the AI scaffold everything.

Existing database

If your Supabase project already has tables or data, the AI will:

Read your schema to understand the structure
Generate UI that connects to your existing tables
Never create, modify, or delete anything in your database

The AI respects your data. It only reads the schema to generate the right code — all database operations happen through the generated app, not during code generation.

What Gets Generated

Data layer

Refine creates a Supabase data provider with:

Type-safe queries for your tables
Automatic relationship handling via foreign keys
Real-time updates (if enabled in Supabase)

UI components

Based on your column types:

Column Type	Generated UI
text, varchar	Text input
integer, numeric	Number input
boolean	Toggle switch
date, timestamp	Date picker
uuid (foreign key)	Dropdown select
json, jsonb	JSON editor

Authentication

If you have Supabase Auth configured:

Login/logout flows
Protected routes
User session handling

Refine respects your Row Level Security (RLS) policies. The generated app only shows data users are allowed to see.

After Connecting

Iterate with chat

Use the AI to refine your application:

"Add a status filter to the orders table"
"Make the email field required on the user form"
"Add a chart showing revenue by month"

Edit code directly

Switch to the Editor tab to modify the generated React/TypeScript code. It uses the Refine open-source framework — standard patterns you can customize.