Supabase: The Open Source Firebase Alternative

# Supabase: The Deep Dive into the Open Source Firebase Alternative

### Author: Son Nguyen

> Date: 2024-11-28

Supabase is revolutionizing backend development as the open source alternative to Firebase. Leveraging the power of PostgreSQL along with real-time capabilities, built-in authentication, robust file storage, and edge functions, Supabase delivers a modern, scalable, and developer-friendly platform. This article provides an extensive deep dive into Supabase’s inner workings, complete with numerous code examples, advanced use cases, and best practices to help you harness its full potential.

---

## 1. Introduction

### 1.1. What is Supabase?

Supabase is an open source backend-as-a-service platform designed to simplify the development of scalable applications. By combining PostgreSQL with an ecosystem of tools that automatically generate RESTful and GraphQL APIs, real-time subscriptions, and integrated authentication, Supabase empowers developers to build full-stack applications quickly without vendor lock-in.

### 1.2. The Vision Behind Supabase

Supabase was born out of the need for a transparent, community-driven solution that offered the reliability of traditional databases with the agility of modern backend services. Its goal is to make it as simple to build complex applications as using Firebase - while keeping the code and data fully in your control.

---

## 2. Core Components and Architecture

Supabase is built on several key components that work together to offer a full-featured backend platform:

### 2.1. PostgreSQL: The Heart of Supabase

At its core, Supabase uses PostgreSQL - a powerful, ACID-compliant relational database known for its robustness and advanced features. Supabase leverages PostgreSQL’s extensibility with:

- **Advanced SQL Queries:** Support for joins, window functions, JSON operations, and full-text search.
- **Extensions:** Tools like PostGIS for geospatial queries and pg_cron for scheduling.
- **Auto-generated APIs:** Utilizing [PostgREST](https://postgrest.org/), every table is exposed as a RESTful endpoint instantly.

#### Example: Creating a Table and Querying Data

```
-- Create a table for user profiles
CREATE TABLE profiles (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
username TEXT UNIQUE NOT NULL,
email TEXT UNIQUE NOT NULL,
bio TEXT,
created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Example query to fetch profiles with a specific condition
SELECT id, username, email FROM profiles WHERE created_at > NOW() - INTERVAL '7 days';
```

### 2.2. Auto-Generated APIs

Supabase automatically creates RESTful endpoints for your PostgreSQL tables. This means that once your schema is defined, you have a complete API available without any additional code.

#### Example: Fetching Data via REST API (JavaScript)

```
// Using fetch to retrieve profiles from the Supabase auto-generated API
async function getProfiles() {
const response = await fetch(
"https://your-supabase-url.supabase.co/rest/v1/profiles",
{
headers: {
apiKey: "your-anon-key",
Authorization: "Bearer your-anon-key",
"Content-Type": "application/json",
},
},
);
const data = await response.json();
console.log("Profiles:", data);
}

getProfiles();
```

### 2.3. Authentication & Authorization

Supabase provides a robust authentication system that supports multiple providers including email/password, OAuth (Google, GitHub, etc.), and third-party logins. It integrates seamlessly with PostgreSQL through Row Level Security (RLS) to enforce data access rules.

#### Features:

- **User Registration & Login**
- **Password Recovery & Email Confirmations**
- **Custom Claims and Role Management**

#### Example: User Authentication with Supabase Client

```

const supabaseUrl = "https://your-supabase-url.supabase.co";
const supabaseKey = "your-anon-key";
const supabase = createClient(supabaseUrl, supabaseKey);

// Sign up a new user
async function signUp(email, password) {
const { data, error } = await supabase.auth.signUp({
email,
password,
});
if (error) console.error("Sign-up error:", error);
else console.log("Sign-up successful:", data);
}

// Log in an existing user
async function signIn(email, password) {
const { data, error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) console.error("Sign-in error:", error);
else console.log("Logged in user:", data);
}

signUp("newuser@example.com", "SuperSecure123!");
signIn("newuser@example.com", "SuperSecure123!");
```

### 2.4. Real-Time Subscriptions

One of Supabase’s most powerful features is real-time data updates. Using PostgreSQL’s replication and websockets, Supabase allows you to subscribe to changes on any table, enabling live updates for your application.

#### Example: Subscribing to Real-Time Changes in React

```

const supabaseUrl = "https://your-supabase-url.supabase.co";
const supabaseKey = "your-anon-key";
const supabase = createClient(s