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

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

<AiPrompt id="reflex" />

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

## 3. Create a Reflex app

Create a new directory for your Reflex app, initialize a project with `uv`, add Reflex as a dependency, and scaffold a blank app with `--template blank`.

```bash
mkdir my_app && cd my_app
uv init
uv add reflex
uv run reflex init --template blank
```

## 4. Set up AI tooling (optional)

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

## 5. Install the Supabase client library

The fastest way to get started is to use the `supabase-py` client library, which provides a convenient interface for working with Supabase from a Reflex app.

Install `supabase-py` and `python-dotenv` to load environment variables.

```bash
uv add supabase python-dotenv
```

## 6. Declare Supabase environment variables

Create a `.env` file in your project root and populate it with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&connectTab=frameworks):

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

```text name=.env
SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
```

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

## 7. Create the Supabase client

Open `my_app/my_app.py` and add the following code to create an async Supabase client from your environment variables. Reflex's event handlers run inside an async event loop, so the client is created once with `acreate_client` and reused across requests, rather than recreated per page load.

```python name=my_app/my_app.py
import os
import reflex as rx
from supabase import acreate_client, AsyncClient
from dotenv import load_dotenv

load_dotenv()

_supabase: AsyncClient | None = None


async def get_supabase() -> AsyncClient:
    global _supabase
    if _supabase is None:
        _supabase = await acreate_client(
            os.environ.get("SUPABASE_URL"),
            os.environ.get("SUPABASE_PUBLISHABLE_KEY"),
        )
    return _supabase
```

## 8. Query data from the app

Add a `State` class that holds the query result, an async event handler that fetches data from your `instruments` table, and a page that renders the result. `on_load` triggers the handler when the page is opened.

```python name=my_app/my_app.py
from postgrest import APIError


class State(rx.State):
    instruments: list[dict] = []
    error: str = ""

    async def load_instruments(self):
        supabase = await get_supabase()
        try:
            response = await supabase.table("instruments").select("*").execute()
        except APIError as error:
            self.error = f"Error loading instruments: {error.message}"
            return
        self.instruments = response.data


def index() -> rx.Component:
    return rx.container(
        rx.heading("Instruments"),
        rx.cond(
            State.error,
            rx.text(State.error),
            rx.foreach(
                State.instruments,
                lambda instrument: rx.text(instrument["name"]),
            ),
        ),
    )


app = rx.App()
app.add_page(index, on_load=State.load_instruments)
```

## 9. Start the app

Run the Reflex development server, go to http://localhost:3000 in a browser, and you should see the list of instruments.

```bash
uv run reflex run
```

<$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)