Skip to content

🧭 Optimal Division of Responsibilities: Next.js + FastAPI + Supabase (Hybrid Architecture)

This hybrid architecture works great across web, mobile, and desktop.

Let Supabase handle fast, low-risk interactions, and let FastAPI handle complex or sensitive operations.

📊 Division of Responsibilities

Type of Operation Handled By Why / Notes
User Auth (sign up, login, logout) ✅ Supabase SDK Supabase Auth handles JWTs, sessions, password reset, etc.
Session / JWT Management ✅ Supabase SDK Handles refresh tokens and session persistence
Fetching public or user-owned data ✅ Supabase SDK (with RLS) Fastest path; use Row-Level Security for access control
Realtime subscriptions (live updates) ✅ Supabase Realtime WebSocket push from Supabase; fast and scalable
Inserts/updates/deletes with business logic ✅ FastAPI Central place for validation, permission checks, logging
Admin or privileged actions ✅ FastAPI Never expose to frontend directly
Complex queries or joins ✅ FastAPI Abstract DB schema from frontend; Postgres views or raw SQL
File uploads (images, etc.) ✅ Supabase Storage OR FastAPI Use Supabase for user uploads; FastAPI for secure preprocessing
Analytics / logs / internal metrics ✅ FastAPI Easier to centralize and process
Multi-table transactions ✅ FastAPI Wrap in DB transactions
Custom dashboards, metrics, aggregates ✅ FastAPI Compose and cache efficiently server-side
Device discovery, IoT interactions ✅ FastAPI Best handled by backend logic and devices

🧱 Folder/Service Structure Suggestion

✅ FastAPI (Backend)

Handles: - /api/users/me – returns enriched user profile - /api/tasks/ – task CRUD with validation - /api/admin/... – admin-only endpoints - /api/devices/ – device management, discovery, etc.

🔐 Verifies Supabase JWTs via: - Public JWKs: https://<your-project>.supabase.co/auth/v1/keys - Adds user context to request via dependency injection

✅ Next.js (Frontend)

Uses: - @supabase/auth-helpers/nextjs for auth/session management - @supabase/supabase-js for: - Realtime subscriptions - Authenticated reads with RLS - Simple inserts/updates

Calls FastAPI for: - Anything requiring cross-table logic - Custom APIs or secured logic

✅ Supabase (Postgres + Auth + Storage)

Enables: - Row-Level Security (RLS) to enforce per-user access - Postgres Functions (RPC) for efficient direct calls - Realtime for live updates - Storage for user-uploaded media

🔒 Supabase RLS Example

CREATE POLICY "Users can access their own tasks"
  ON tasks
  FOR ALL
  USING (user_id = auth.uid());

This allows safe read/write access to tasks from the frontend.

📌 Decision Tree (Frontend Developer Perspective)

🧠 Ask yourself:

  1. Is this data public or user-specific?
    → Use Supabase directly if RLS can safely control access.

  2. Does this write action need validation, side effects, or audit logging?
    → Go through FastAPI.

  3. Is this action admin-level or involves other users’ data?
    → Go through FastAPI.

  4. Does this require aggregating multiple tables or joining with business logic?
    → Go through FastAPI.

  5. Is this realtime or chat/live dashboard?
    → Use Supabase Realtime directly.

🔄 Example Workflows

➤ User Views Their Task List

Frontend → Supabase (RLS): 

select * from tasks where user_id = auth.uid()

➤ User Creates a New Task

Frontend → FastAPI /api/tasks/

FastAPI does the following: - Verifies JWT - Validates fields - Adds created_at, owner_id - Inserts into Supabase

➤ User Watches for Realtime Task Updates

  • Frontend subscribes to Supabase Realtime on tasks table (filtered by user_id)

✅ Summary This hybrid setup gives you:

  • The speed of Supabase
  • The control of FastAPI
  • Clean scalability for web, mobile, and desktop