Skip to content
Zutra HyperSaaS — 6 languages, auth UI, dashboard, 69 tests
Get it on Gumroad

Zutra v1.3.0 — 6 languages, auth UI, dashboard, 69 tests. Saves 80+ hours.

See what's included

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);