Supabase JS Has a Free API That Replaces Your Entire Backend

#supabase #javascript #webdev #database

Supabase is the open-source Firebase alternative, and its JavaScript client exposes a complete backend API — database, auth, storage, real-time, and edge functions.

The Query Builder: PostgreSQL Power

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// Complex queries with joins
const { data } = await supabase
  .from("products")
  .select(`
    id, title, price,
    categories (name),
    reviews (rating, comment, user:profiles(name))
  `)
  .gte("price", 10)
  .lte("price", 100)
  .order("price", { ascending: true })
  .range(0, 49);

Full PostgreSQL power — joins, aggregations, full-text search — from the client.

Real-Time Subscriptions

const channel = supabase
  .channel("price-changes")
  .on("postgres_changes", {
    event: "UPDATE",
    schema: "public",
    table: "products",
    filter: "category=eq.electronics"
  }, (payload) => {
    console.log("Price changed:", payload.old.price, "→", payload.new.price);
  })
  .subscribe();

// Presence — who's online
const room = supabase.channel("room:1");
room.on("presence", { event: "sync" }, () => {
  const state = room.presenceState();
  console.log("Online users:", Object.keys(state).length);
}).subscribe(async (status) => {
  if (status === "SUBSCRIBED") {
    await room.track({ user_id: "123", online_at: new Date().toISOString() });
  }
});

Auth with Row Level Security

// Sign up
const { data, error } = await supabase.auth.signUp({
  email: "user@example.com",
  password: "securepassword"
});

// OAuth
const { data } = await supabase.auth.signInWithOAuth({
  provider: "github",
  options: { redirectTo: "https://myapp.com/callback" }
});

// After auth, ALL queries are automatically filtered by RLS policies
const { data: myData } = await supabase.from("user_data").select("*");
// Only returns rows where user_id = auth.uid() — enforced at DB level

Storage API: S3-Compatible

// Upload
const { data, error } = await supabase.storage
  .from("exports")
  .upload(`${userId}/report.csv`, csvFile, {
    contentType: "text/csv",
    upsert: true
  });

// Generate signed URL
const { data: { signedUrl } } = await supabase.storage
  .from("exports")
  .createSignedUrl(`${userId}/report.csv`, 3600);

// Transform images on the fly
const { data: { publicUrl } } = supabase.storage
  .from("images")
  .getPublicUrl("photo.jpg", {
    transform: { width: 300, height: 200, quality: 80 }
  });

Edge Functions: Server-Side Logic

// Call from client
const { data, error } = await supabase.functions.invoke("scrape-url", {
  body: { url: "https://example.com" }
});

Full-Text Search

const { data } = await supabase
  .from("articles")
  .select()
  .textSearch("title", "web scraping guide", { type: "websearch", config: "english" });