Supabase
Wire up Supabase for authentication and database access.
Zutra uses Supabase for authentication and Postgres. The UI pages (login, signup, forgot-password) are already built — you wire in the credentials.
1. Create a project
- Go to supabase.com and create a new project
- Copy your Project URL and anon key from Settings → API
2. Add environment variables
# .env
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
3. Enable auth providers
In Supabase Dashboard → Authentication → Providers, enable the ones you need.
The template supports:
// src/config.ts
export const AUTH = {
providers: {
github: true, // shows GitHub OAuth button
google: true, // shows Google OAuth button
discord: false, // hidden
},
magicLink: true, // shows passwordless option
}
Flip any provider to false to hide its button without touching the component.
4. Set redirect URLs
In Supabase → Authentication → URL Configuration, add:
https://yourdomain.com/auth/callback
http://localhost:4321/auth/callback ← for local dev
5. Install the Supabase client
pnpm add @supabase/supabase-js
Create src/lib/supabase.ts:
import { createClient } from '@supabase/supabase-js';
import { AUTH } from '../config';
export const supabase = createClient(AUTH.supabaseUrl, AUTH.supabaseAnonKey);
Row-Level Security
Always enable RLS on every table. Example policy for user-owned rows:
alter table documents enable row level security;
create policy "Users can read own documents"
on documents for select
using (auth.uid() = user_id);