Docs
Supabase Client Libraries

Supabase Client Libraries

Supabase client for React Router

Installation

Open in

Folder structure

  • lib
    • supabase
1/// <reference types="vite/types/importMeta.d.ts" />
2import { createBrowserClient } from '@supabase/ssr'
3
4export function createClient() {
5  return createBrowserClient(
6    import.meta.env.VITE_SUPABASE_URL!,
7    import.meta.env.VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY!
8  )
9}

Usage

This block installs Supabase clients for connecting your React Router project to Supabase. They're designed for use in both server-side loaders and actions, as well as client-side components.

If you've already set up Supabase clients in your project, you can just continue using them.

Getting started

After installing the block, you'll have the following environment variables in your .env.local file:

VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=

  • If you're using supabase.com, you can find these values in the Connect modal under App Frameworks or in your project's API settings.

  • If you're using a local instance of Supabase, you can find these values by running supabase start or supabase status (if you already have it running).

Further reading