Docs
Supabase Client Libraries
Supabase Client Libraries
Supabase client for React Router
Installation
Folder structure
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_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
First, add a .env
file to your project with the following environment variables:
VITE_SUPABASE_URL=
VITE_SUPABASE_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
orsupabase status
(if you already have it running).