Skip to content
Zutra HyperSaaS — 6 langues, auth UI, dashboard UI, 69 tests
Obtenir sur Gumroad

Zutra v1.5.0 — Kit UI landing & dashboard SaaS, 6 langues, 69 tests. Apportez votre propre backend.

Voir ce qui est inclus

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

  1. Go to supabase.com and create a new project
  2. 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);