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

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

<AiPrompt id="hono" />

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

## 3. Create a Hono app

Bootstrap the Hono example app from the Supabase Samples using the CLI.

```bash
npx supabase@latest bootstrap hono
```

## 4. Set up AI tooling (optional)

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

## 5. Install dependencies

The `package.json` file in the project includes the necessary dependencies, including `@supabase/supabase-js` and `@supabase/ssr` to help with server-side auth.

```bash
npm install
```

## 6. Declare Supabase environment variables

Copy the `.env.example` file to `.env`.

```bash
cp .env.example .env
```

Update the values with your Supabase project URL and publishable key, which 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">Open Connect panel</a>
</Button>

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

## 7. Set up anonymous sign-ins

This app signs users in anonymously, so [enable anonymous sign-ins](/dashboard/project/_/auth/providers) in the Auth settings.

Anonymous sign-ins use the `authenticated` role, but the database setup in step 2 grants read access to the `anon` role only. Without the privilege and a matching policy for `authenticated`, the instruments query returns no rows. Run the following in the [SQL Editor](/dashboard/project/_/sql/new) to grant the privilege and add the policy:

```sql SQL_EDITOR
grant select on public.instruments to authenticated;

create policy "authenticated can read instruments"
on public.instruments
for select to authenticated
using (true);
```

## 8. Query data from the app

The bootstrapped app already includes the route that reads your `instruments` table, in `src/index.tsx`. The middleware in `src/middleware/auth.middleware.ts` creates a request-scoped Supabase client, so `getSupabase(c)` returns a client that already carries the signed-in user's auth token. Your RLS policies apply to the query.

```tsx name=src/index.tsx
app.get('/instruments', async (c) => {
  const supabase = getSupabase(c)
  const { data, error } = await supabase.from('instruments').select('*')

  if (error) {
    console.error(error)
    return c.json({ error: error.message }, 500)
  }

  return c.json(data)
})
```

## 9. Start the app

Start the app, go to http://localhost:5173, sign in anonymously, then open the instruments list.

```bash
npm run dev
```

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

## Next steps

- Learn how [server side auth](/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=hono) works with Hono.
- [Insert more data](/docs/guides/database/import-data) into your database
- Upload and serve static files using [Storage](/docs/guides/storage)