---
title: Supabase | Integrations
keywords: 'supabase, db'
contributors:
  - manucorporat
  - hamatoyogi
  - igorbabko
  - Benny-Nottonson
  - mrhoodz
  - samijaber
  - aendel
updated_at: '2023-10-03T18:53:23Z'
created_at: '2023-04-25T11:05:50Z'
---

import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
import { Note } from '~/components/note/note';

# Supabase

The `Supabase` JS library plays nicely with the server-side APIs from Qwik such as `routeLoader$`, `routeAction$` or `server$`.

First, install supabase in your Qwik project:


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm install @supabase/supabase-js supabase-auth-helpers-qwik
```
</span>
<span q:slot="npm">
```shell
npm install @supabase/supabase-js supabase-auth-helpers-qwik
```
</span>
<span q:slot="yarn">
```shell
yarn add @supabase/supabase-js supabase-auth-helpers-qwik
```
</span>
<span q:slot="bun">
```shell
bun install @supabase/supabase-js supabase-auth-helpers-qwik
```
</span>
</PackageManagerTabs>

The second step would be to add the `PUBLIC_SUPABASE_URL` and `PUBLIC_SUPABASE_ANON_KEY` environment variables to `.env` file, the "anon" key is safe to be exposed in the client-side.

```bash
PUBLIC_SUPABASE_URL=https://xxxxxxx.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJhb.......
```

You should be able to get these values from the Supabase dashboard, create a new `.env.local` file at the root of the project and paste them there.

<Note>It's possible to use Supabase with Qwik completely client-side, however, you would lose some of the performance benefits that you can achieve with leveraging the server. For a working example and code head over to [this repository](https://github.com/hamatoyogi/qwik-supabase-example).</Note>

## Server-side

The Supabase client can now be used server-side - in `routeLoader`s and `routeAction`s - by calling the `createServerClient` function.

```tsx
import { routeLoader$ } from '@qwik.dev/router';
import { createServerClient } from 'supabase-auth-helpers-qwik';

export const useDBTest = routeLoader$(async (requestEv) => {
  const supabaseClient = createServerClient(
    requestEv.env.get("PUBLIC_SUPABASE_URL")!,
    requestEv.env.get("PUBLIC_SUPABASE_ANON_KEY")!,
    requestEv
  );
  const { data } = await supabaseClient.from('test').select('*')
  return { data };
});
```
