Skip to main content

​
Overview

Portal Ciudadano Manta uses Supabase as its Backend as a Service (BaaS), providing PostgreSQL database, authentication, file storage, and real-time capabilities.

​
Create Supabase Project

1

Create Account

Go to https://supabase.com and create a free account.
2

Create New Project

Click “New Project” and fill in:
  • Project Name: Portal Ciudadano Manta
  • Database Password: Strong password (save this securely)
  • Region: Choose closest to Ecuador (e.g., us-east-1)
  • Pricing Plan: Free tier is sufficient for development
3

Wait for Provisioning

Project creation takes 1-2 minutes. You’ll see a progress indicator.

​
Get API Credentials

1

Navigate to Settings

In your project dashboard, go to Settings → API
2

Copy Credentials

You’ll need two values:
# Project URL
https://your-project-id.supabase.co

# Anonymous (public) key
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
3

Save to Environment Variables

Add these to your .env file:
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Never commit the anon key to version control if your repository is public. Use environment variables in your deployment platform.

​
Database Schema Setup

1

Open SQL Editor

In Supabase dashboard, go to SQL Editor
2

Execute Schema

Copy the contents of supabase-schema.sql from your project and execute it.This creates all tables:
  • usuarios - User profiles
  • administradores - Admin accounts
  • noticias - News articles
  • encuestas - Surveys
  • respuestas_encuestas - Survey responses
  • reportes - Citizen reports
3

Verify Tables

Go to Table Editor and confirm all tables are created.

​
Database Tables

The schema includes:
TablePurpose
usuariosCitizen user profiles with parroquia/barrio
administradoresMunicipal administrator accounts
noticiasNews articles with geotargeting
encuestasSurveys with multiple types
respuestas_encuestasSurvey responses from citizens
reportesUrban problem reports with geolocation

​
Configure Authentication

1

Enable Email Auth

Go to Authentication → Providers → Email
  • Enable “Email” provider
  • Configure email templates (optional)
2

Configure Site URL

Go to Authentication → URL ConfigurationSet your site URL:
# Development
http://localhost:5173

# Production
https://your-domain.com
3

Add Redirect URLs

Add allowed redirect URLs for authentication callbacks:
http://localhost:5173/**
https://your-domain.com/**

​
Configure Storage

1

Create Storage Bucket

Go to Storage → Create Bucket
  • Name: imagenes
  • Public: OFF (controlled by policies)
  • File size limit: 5MB (5242880 bytes)
  • Allowed MIME types: image/jpeg, image/jpg, image/png, image/webp
2

Apply Storage Policies

Execute the SQL from sql/storage_policies.sql to enable:
  • Public read access for all images
  • Admin upload/delete for news images
  • User upload/delete for report images
See Storage Policies for details.

​
Apply Row Level Security

Row Level Security (RLS) is critical for data security. Without it, any authenticated user can access all data.
1

Enable RLS on Tables

Execute SQL to enable RLS:
ALTER TABLE public.usuarios ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.administradores ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.noticias ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.encuestas ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.respuestas_encuestas ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.reportes ENABLE ROW LEVEL SECURITY;
2

Apply Policies

Execute the SQL files:
  • sql/noticias_rls.sql - News policies
  • sql/reportes_rls.sql - Reports policies
See Row Level Security for complete policy details.
3

Verify Policies

Run diagnostic SQL:
SELECT tablename, policyname, cmd
FROM pg_policies
WHERE schemaname = 'public'
ORDER BY tablename, policyname;

​
Test Connection

Verify your setup works:
1

Start Development Server

npm run dev
2

Check Console

Open browser console. You should NOT see:
⚠️ Faltan las credenciales de Supabase
3

Test Authentication

Try creating an account. Check Supabase dashboard under Authentication → Users.
4

Test Database

After signup, check if user appears in usuarios table.

​
Supabase Client Configuration

The application configures Supabase with: 
import { createClient } from '@supabase/supabase-js';
import type { Database } from '../types/database.types';

const supabase = createClient<Database>(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY,
  {
    auth: {
      persistSession: true,
      autoRefreshToken: true,
      detectSessionInUrl: true,
      flowType: 'pkce', // More secure for SPAs
    },
    db: {
      schema: 'public',
    },
    global: {
      headers: {
        'X-Client-Info': '[email protected]',
      },
    },
  }
);
Location: src/lib/supabase.ts:16

​
Next Steps

Environment Variables

Configure all required variables

Row Level Security

Understand security policies

Build docs developers (and LLMs) love

Get started for freeTalk to us