supabase/apps/docs/content/guides/getting-started/quickstarts/refine.mdx

---
title: 'Use Supabase with Refine'
subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Refine app.'
breadcrumb: 'Framework Quickstarts'
---

<AiPrompt id="refine" />

<$Partial path="quickstart_db_setup.mdx" />

## 3. Create a Refine app

Create a [Refine](https://github.com/refinedev/refine) app using the [create refine-app](https://refine.dev/docs/getting-started/quickstart/).

The `refine-supabase` preset adds `@refinedev/supabase` supplementary package that supports Supabase in a Refine app. `@refinedev/supabase` out-of-the-box includes the Supabase dependency: [supabase-js](https://github.com/supabase/supabase-js).

```bash
npm create refine-app@latest -- --preset refine-supabase my-app
```

<Admonition type="note">

The CLI may prompt for an email address. The `refine-supabase` preset also ships with demo Supabase credentials. Replace them in step 5 with your own project.

To skip the email prompt in a non-interactive shell, pipe a blank line:

```bash
printf '\n' | npm create refine-app@latest -- --preset refine-supabase my-app
```

</Admonition>

## 4. Set up AI tooling (optional)

<$Partial path="quickstart_ai_tooling.mdx" />

## 5. Update `supabaseClient` with environment variables

Create a `.env` file and populate it with your Supabase URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=refine&connectTab=frameworks).

<Button variant="primary" asChild>
  <a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=refine">
    Open Connect panel
  </a>
</Button>

```text name=.env
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
```

The `refine-supabase` preset hardcodes Refine's own demo Supabase project in `src/providers/constants.ts`, and initializes the client from it in `src/providers/supabase-client.ts`. Replace the hardcoded values so the client reads your project credentials from the environment variables above instead:

```ts name=src/providers/constants.ts
export const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL
export const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
```

The `supabaseClient` is used by the auth and data providers to connect your Refine app to Supabase.

<$Partial path="api_settings.mdx" variables={{ "framework": "refine", "tab": "frameworks" }} />

## 6. Add instruments resource and pages

Use the following code to automatically add resources and generate code for the pages to show the `instruments` data using Refine Inferencer.

This defines pages for `list`, `create`, `show` and `edit` actions inside the `src/pages/instruments/` directory with a `<HeadlessInferencer />` component.

The `<HeadlessInferencer />` component depends on `@refinedev/react-table`, `@refinedev/react-hook-form`, and `react-live` packages. To avoid errors, install them as dependencies:

```bash
npm install @refinedev/react-table @refinedev/react-hook-form react-live
```

<Admonition type="note">

The `<HeadlessInferencer />` is a Refine Inferencer component that automatically generates necessary code for the `list`, `create`, `show` and `edit` pages.

Read more on [how the Inferencer works is in the Refine docs](https://refine.dev/docs/packages/documentation/inferencer/).

</Admonition>

```bash
npm run refine create-resource instruments
```

## 7. Add routes for instruments pages

Add routes for the `list`, `create`, `show`, and `edit` pages.

<Admonition type="note">

Remove the `index` route for the Welcome page presented with the `<Welcome />` component.

</Admonition>

```tsx name=src/App.tsx
import { Refine } from '@refinedev/core'
import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar'
import routerProvider, {
  DocumentTitleHandler,
  NavigateToResource,
  UnsavedChangesNotifier,
} from '@refinedev/react-router'
import { liveProvider } from '@refinedev/supabase'
import { BrowserRouter, Route, Routes } from 'react-router'

import './App.css'

import authProvider from './providers/auth'
import { dataProvider } from './providers/data'
import { supabaseClient } from './providers/supabase-client'
import {
  InstrumentsCreate,
  InstrumentsEdit,
  InstrumentsList,
  InstrumentsShow,
} from './pages/instruments'

function App() {
  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          dataProvider={dataProvider}
          liveProvider={liveProvider(supabaseClient)}
          authProvider={authProvider}
          routerProvider={routerProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: 'instruments',
              list: '/instruments',
              create: '/instruments/create',
              edit: '/instruments/edit/:id',
              show: '/instruments/show/:id',
            },
          ]}
        >
          <Routes>
            <Route index element={<NavigateToResource resource="instruments" />} />
            <Route path="/instruments">
              <Route index element={<InstrumentsList />} />
              <Route path="create" element={<InstrumentsCreate />} />
              <Route path="edit/:id" element={<InstrumentsEdit />} />
              <Route path="show/:id" element={<InstrumentsShow />} />
            </Route>
          </Routes>
          <RefineKbar />
          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  )
}

export default App
```

## 8. Allow writes to the instruments table

The scaffolded pages create and edit instruments, but the database setup in step 2 grants read access only. Without write privileges and matching policies, the create and edit pages fail with `permission denied for table instruments`.

Run the following in the [SQL Editor](/dashboard/project/_/sql/new) to grant the privileges and add the policies:

```sql SQL_EDITOR
grant insert, update, delete on public.instruments to anon;

create policy "public can insert instruments"
on public.instruments
for insert to anon
with check (true);

create policy "public can update instruments"
on public.instruments
for update to anon
using (true)
with check (true);

create policy "public can delete instruments"
on public.instruments
for delete to anon
using (true);
```

<Admonition type="caution">

These policies let anyone with your publishable key modify the `instruments` table. They exist so you can try the scaffolded UI against sample data. Scope writes to authenticated users before you put real data in this table.

</Admonition>

## 9. Start the app

Run the development server, then open `/instruments` in your browser (Vite defaults to http://localhost:5173). You should see the instruments pages along the `/instruments` routes. You can edit and add new instruments using the Inferencer-generated UI.

```bash
npm run dev
```

The Inferencer auto-generated code gives you a good starting point on which to keep building your `list`, `create`, `show` and `edit` pages. You can get these by clicking the `Show the auto-generated code` buttons in their respective pages.

<$Partial path="quickstart_going_to_production.mdx" />

## Next steps

- Set up [Auth](/docs/guides/auth) for your app
- [Insert more data](/docs/guides/database/import-data) into your database
- Upload and serve static files using [Storage](/docs/guides/storage)