Supabase: Die Open-Source Firebase-Alternative

• 1. Allgemeines
• 2. Preisgestaltung
• 3. Funktionen und Features
  • 3.1 Datenbank
  • 3.2 Echtzeit-Funktionen
  • 3.3 Authentifizierung
  • 3.4 Analyse-Tools
  • 3.5 Self Hosting
• 4. Vergleich mit anderen Anbietern
  • 4.1 Datenbank
  • 4.2 Echtzeitfunktionen
  • 4.3 Authentifizierung
  • 4.4 Analysetools
  • 4.5 Preisgestaltung
• 5 Supabase in der Praxis: Eine Einführung mit Beispiel
  • 5.1 Supabase: Self-Hosting oder gehostete Variante?
  • 5.2 Ein Beispiel: Eine Todo-App mit Supabase
    • 5.2.1 Supabase-Projekt einrichten
    • 5.2.2 Frontend Implementierung
    • 5.2.3 Supabase Client einrichten
    • 5.2.4 HTML-Struktur
    • 5.2.5 Hauptfunktionen implementieren
  • 5.3 Zusammenfassung
• Literatur

1. Allgemeines

Supabase ist eine Open-Source-Platform, welche Entwicklern die einfache Erstellung von skalierbaren Echtzeit-Anwendungen mit einer Vielzahl von bereitgestellten Backend-Services und Tools ermöglicht. Dies beinhaltet zum Beispiel eine PostgreSQL Datenbank, einfache Authentifizierungsmöglichkeiten sowie Analytics und APIs, welche eine einfache Abfrage der Datenbank aus der Anwendung heraus ermöglicht.

Seit seiner Gründung 2020 ist Supabase stetig gewachsen und hat in der Entwicklercommunity als Open-Source Firebase-Alternative hohes Ansehen erlangen können und wird mittlerweile in zahlreichen Unternehmen wie Audi, facebook, salesforce und Google genutzt (vgl. [8]).

2. Preisgestaltung

Das Bezahlmodell bei Supabase ist in 4 bzw. 5 Kategorien unterteilt: Free, Pro, Team, Enterprise und Self-host. Im Free Modell erhält man nur begrenzte Funktionalitäten und Rechenkapizitäten, muss dafür aber nichts bezahlen. Im Pro Modell bezahlt man 25 $ pro Monat und erhält dafür eine Erweiterung der Features und Leistungen aus dem Free Modell. Ähnlich zu Firebase wird hier bei Überschreitung der Rechenkapazitäten (z.B. Speicherplatz, Bandbreite, Lesevorgänge usw.) ein Pay-As-You-Go Ansatz verfolgt, bei dem man nur so viel bezahlt, wie man tatsächlich verbraucht/benötigt hat, was eine einfache und vorhersehbare Preiskalkulation ermöglicht. Im Team Modell gibt es für 599 $ pro Monat erneut ein Upgrade der Leistungen, wobei hier noch zusätzliche Features hinzukommen, welche für große Projekte und Teams nützlich sind. Das Enterprise Modell wird individuell mit dem Kunden vereinbart, sodass Preis, Leistung und Funktionen von den getroffenen Vereinbarungen abhängig sind (vgl. [7]). Supabase kann auch auf eigener Hardware gehostet werden, wobei keine Entgelte an Supabase entrichtet werden müssen. Mehr dazu in Kapitel 3.5. In allen Modellen kann eine Preisgrenze festgelegt werden, sodass bei Fehlern im Programm oder plötzlichem Anstieg der Nutzerzahl keine unerwartet hohen Rechnungen entstehen können.

3. Funktionen und Features

Supabase bietet eine breite Palette an Funktionen, die auch Entwicklern ohne tiefgehende Kenntnisse in Serverarchitektur ermöglicht, eine vollständige Backend-Lösung für ihren Anwendungsfall zu erstellen. Hier ein Überblick über die wichtigsten Features:

3.1 Datenbank

Die zentrale Funktion von Supabase ist dessen Datenbank. Hierbei kommt die Open-Source Datenbank PostgreSQL zum Einsatz, welche eine hohe Performance und Skalierbarkeit bietet; trotz relationalem Datenbankmodell. Entwickler können die Datenbank über die Web-Oberfläche oder über die API mithilfe von normalen SQL Abfragen einsehen und manipulieren. Da die Daten somit in einer zu Supabase abgekoppelten Datenbank liegen, ist eine spätere Entfernung von Supabase aus dem Techstack problemlos möglich, da alle Daten behalten werden können (vgl. [1]).

Auch Dateien können in Supabase gespeichert werden. Neben der PostgreSQL Datenbank gibt es auch einen Open-Source S3 kompatiblen Object-Store. Die darin gespeicherten Assets können über die gleiche REST-API angefragt werden wie normale Datenbank Querys. Ein global aufgespanntes Content-Delivery-Network (CDN) kann aus über 285 Städten die gespeicherten Dateien an die Nutzer verteilen, wodurch die Latenz erheblich verringert wird (vgl. [3]).

3.2 Echtzeit-Funktionen

Ebenfalls werden Echtzeit-Updates unterstützt, sodass Änderungen der Daten in Echtzeit verfolgt und von verbundenen Clients entsprechend dargestellt werden können. Auch die Synchronisierung verschiedener Client-States ist möglich. Diese Funktion ist besonders nützlich für Anwendungen, die auf zeitnahe Aktualisierungen der Daten angewiesen sind, wie z.B. Chat-Anwendungen, kollaborative Whiteboards oder Live-Ticker. (vgl. [4])

3.3 Authentifizierung

Supabase ermöglicht die einfache Implementierung von diversen Authentifizierungslösungen. Unterstützte Dienste sind grob in E-Mail und OAuth unterteilt. Bei E-Mail Authentifizierung müssen sich die Nutzer mit der bei der Registrierung angegebenen E-Mail-Adresse und Passwort anmelden. Diese Form muss größtenteils selber gemanagt werden, z.B. wenn es um Mail-Server für Registrierungsbestätigungen geht. Bei OAuth werden die meisten großen Dienste bereitgestellt, dazu gehören unter anderem Google, Facebook und GitHub. Zusätzlich sind erweiterte Sicherheitsmechanismen wie 2-Faktor-Authentifizierung oder rollenbasierte Zugriffskontrollen verfügbar (vgl. [2]).

3.4 Analyse-Tools

Mithilfe diverser Analysewerkzeuge können Anwendungsentwickler Statistiken über die Nutzung ihrer Anwendung einsehen. Über Echtzeit-Statistiken lassen sich Daten und Zugriffsmuster der Nutzer nachvollziehen, was eine bessere Anpassung an Nutzerbedürfnisse ermöglicht und die Skalierung für die Zukunft vereinfacht. Auch die Logs der Anfragen auf die REST-APIs ist möglich, sodass eventuell sehr häufig auftretende Anfragen erkannt werden können um das Nutzererlebnis und die Serverauslastung zu optimieren (vgl. [6]).

3.5 Self Hosting

Das Team hinter Supabase stellt diverse Docker-Images zur Verfügung, mit denen man eine eigene Supabase-Instanz auf eigener Hardware betreiben kann. Eine in einem GitHub Repository liegende Docker-Compose Datei ermöglicht das einfache Starten und Kombinieren der einzelnen Services. Nach dem Start kann dann über den Browser auf Supabase-Studio zugegriffen werden. Diese Variante der Nutzung von Supabase ist, ausgenommen der Betriebskosten für die Hardware, völlig kostenfrei und es müssen keine Abgaben an Supabase geleistet werden (vgl [5]).

4. Vergleich mit anderen Anbietern

Supabase bezeichnet sich selbst als open source Firebase alternative (vgl. [8]) und teilt daher viele Eigenschaften mit seinem selbst ernannten Konkurrenten. Der Hauptunterschied ist die Verfügbarkeit des Quellcodes, welcher bei Supabase auf GitHub öffentlich einsehbar ist, während es sich bei den Konkurrenzprodukten wie Googles Firebase oder Amazons AWS Amplify um proprietäre Software handelt, deren Quellcode nicht öffentlich zugänglich ist. Die Zugänglichkeit des Quellcodes ermöglicht es Nutzern außerdem, eine eigene Instanz des Programms selber zu hosten, wie in Kapitel 2 erklärt wurde.

4.1 Datenbank

Ein weiterer Unterschied besteht auf der technischen Ebene, und zwar benutzt Supabase ein relationales Datenbankmodell mit dem SQL-Dialekt PostgreSQL als Abfragesprache (siehe Kapitel 3.1), während Firebase auf ein eigenes, cloudbasiertes und dokumentenorientiertes NoSQL-Datenbankmanagementsystem namens Firestore zurückgreift. Amplify verwendet ebenfalls ein klassisches RDBMS, welches Aurora heißt und mit dem verbreiteten SQL-Dialekt MySQL verwaltet werden kann.

4.2 Echtzeitfunktionen

Firebase ermöglicht es, einzelne Dokumente mit einem Listener auszustatten, welcher Änderungen am jeweiligen Dokument registriert und die gewünschte Callbackfunktion ausführt. Amplify bietet die Möglichkeit, Änderungen an den Daten in der Cloud mittels eines Subscription-Prinzips automatisch vom Server an diejenigen Clients zu schicken, die auf der Subscription-Liste stehen.

4.3 Authentifizierung

Die Authentifizierungsmöglichkeiten von Supabase, Firebase und Amplify unterscheiden sich in ihrer Vielfalt kaum. E-Mail, OAuth über verschiedene Services sowie Multifaktorautorisierung können bei allen Anbietern eingerichtet werden.

4.4 Analysetools

Firebase bietet durch die Integration von Google Analytics ein mächtiges Analysetool zur Überwachung der Nutzeraktivitäten. Ähnlich verhält es sich mit Amplify und Amazon Pinpoint. Supabase hingegen hat kein eigenes Analysetool, ermöglicht jedoch die Integration von Drittanbietern (vgl. [9]).

4.5 Preisgestaltung

Ähnlich wie Supabase bietet Firebase eine kostenlose Nutzung seiner Dienste bis zu einer bestimmten Grenze. Wird diese Grenze überschritten, zahlt man proportional zur Nutzung des jeweiligen Dienstes. Im Unterschied zu Supabase sind die Bezahlmodelle hier jedoch nicht gestaffelt (vgl. [10]).

Auch Amazon Web Services wirbt mit einem kostenlosen Kontingent für sein Produkt Amplify. Dieses beinhaltet unter einer zwölfmonatigen Bereitstellung der Anwendung, 1.000 Build-Minuten pro Monat und fünf Gigabyte Datenspeicher. Ist dieses Kontingent verbraucht, bezahlt man für alles, was darüber hinausgeht. Die Kosten orientieren sich dabei an der tatsächlichen Nutzung und sind nicht pauschal. Man zahlt also pro Gigabyte, pro Zugriff, pro Stunde etc. (vgl. [11]).

Sowohl Firebase als auch Amplify stellen auf ihrer Website einen Kostenrechner zur Verfügung.

5 Supabase in der Praxis: Eine Einführung mit Beispiel

5.1 Supabase: Self-Hosting oder gehostete Variante?

Supabase bietet zwei Möglichkeiten zur Nutzung:

• Self-Hosting mit Docker: Für maximale Kontrolle über Daten und Infrastruktur. Ideal für Unternehmen mit spezifischen Compliance-Anforderungen.
• Gehostete Variante: Eine einfache und schnelle Möglichkeit, Supabase ohne Aufwand einzurichten. Perfekt für Entwickler, die schnell starten möchten.

In diesem Artikel nutzen wir die gehostete Variante, um eine Todo-App zu erstellen. So kannst du die Funktionen von Supabase ohne komplexe Einrichtung direkt ausprobieren.

5.2 Ein Beispiel: Eine Todo-App mit Supabase

Wir entwickeln eine einfache Todo-App mit folgenden Features:

• Nutzer können sich mit E-Mail und Passwort anmelden
• Aufgaben werden in einer Supabase-Datenbank gespeichert
• Sicherheitsregeln sorgen für den Schutz der Daten

5.2.1 Supabase-Projekt einrichten

1. Melde dich bei Supabase an und erstelle ein neues Projekt
2. Notiere dir die API-URL und den API-Key unter Project Settings > API
3. Aktiviere Email Auth unter Authentication > Providers > Email
4. Erstelle die Datenbanktabelle für Todos im SQL-Editor:

create table todos (
    id serial primary key,
    user_id uuid references auth.users(id) default auth.uid(),
    title text not null,
    completed boolean default false,
    created_at timestamp default now()
);

5. Setze die Sicherheitsregel für die Tabelle:

create policy "Todos sind privat"
on todos
for all
using (auth.uid() = user_id)
with check (auth.uid() = user_id);

Diese Regel stellt sicher, dass Nutzer nur ihre eigenen Todos sehen und bearbeiten können.

6. Aktiviere die Row-Level-Security für die Tabelle:

alter table todos enable row level security;

Nun ist die Regel aktiv und die Tabelle gesichert.

5.2.2 Frontend Implementierung

Für jede Tabelle stellt Supabase automatisch eine REST-API bereit, welche die Datenbankoperationen ermöglicht (vgl. [12]).

Es steht eine Vielzahl an SDKs zur Verfügung, um alle gängigen Programmiersprachen und Plattformen für REST Anfragen an Supabase zu unterstützen. In diesem Beispiel verwenden wir die offizielle Supabase JavaScript SDK, um die Authentifizierung und Datenbankoperationen zu implementieren.

5.2.3 Supabase Client einrichten

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  const { createClient } = supabase;
  const supabaseClient = createClient(
    "YOUR_SUPABASE_URL",
    "YOUR_SUPABASE_ANON_KEY"
  );
</script>

5.2.4 HTML-Struktur

<!-- Login Formular -->
<form id="sign-in-form" class="auth-form">
  <h2>Anmelden</h2>
  <input type="email" id="login-email" placeholder="E-Mail" required />
  <input type="password" id="login-password" placeholder="Passwort" required />
  <button type="submit">Anmelden</button>
</form>

<!-- Todo App -->
<div id="todo-app" style="display: none">
  <div class="user-header">
    <span id="user-email"></span>
    <button id="logout-button">Abmelden</button>
  </div>
  <form id="todo-form">
    <input type="text" id="todo-input" placeholder="Neue Aufgabe..." required />
    <button type="submit">Hinzufügen</button>
  </form>
  <ul id="todo-list"></ul>
</div>

5.2.5 Hauptfunktionen implementieren

// Login
document
  .getElementById("sign-in-form")
  .addEventListener("submit", async (e) => {
    e.preventDefault();
    const email = document.getElementById("login-email").value;
    const password = document.getElementById("login-password").value;
    try {
      const { data, error } = await supabaseClient.auth.signInWithPassword({
        email,
        password,
      });
      if (error) throw error;
    } catch (error) {
      alert("Login error: " + error.message);
    }
  });
// Todos laden
async function loadTodos() {
  const { data: todos, error } = await supabaseClient
    .from("todos")
    .select("*")
    .order("created_at", { ascending: false });
  if (error) throw error;
  const todoList = document.getElementById("todo-list");
  todoList.innerHTML = "";
  todos.forEach((todo) => {
    const li = document.createElement("li");
    li.innerHTML = `
      <input type="checkbox" ${todo.completed ? "checked" : ""} 
          onchange="toggleTodo(${todo.id}, this.checked)">
      <span>${todo.title}</span>
      <button onclick="deleteTodo(${todo.id})">Löschen</button>
    `;
    todoList.appendChild(li);
  });
}
// Auth Status überwachen
supabaseClient.auth.onAuthStateChange((event, session) => {
  const todoApp = document.getElementById("todo-app");
  const loginForm = document.getElementById("sign-in-form");
  const userEmail = document.getElementById("user-email");
  if (session) {
    loginForm.style.display = "none";
    todoApp.style.display = "block";
    userEmail.textContent = session.user.email;
    loadTodos();
  } else {
    loginForm.style.display = "flex";
    todoApp.style.display = "none";
    userEmail.textContent = "";
  }
});

5.3 Zusammenfassung

Diese einfache Todo-App demonstriert die Kernfunktionen von Supabase:

• Benutzerauthentifizierung mit E-Mail und Passwort
• Datenbankoperationen mit Row Level Security
• Einfache Integration in Frontend-Anwendungen
• Kein API-Layer notwendig

Die gehostete Variante von Supabase ermöglicht es uns, schnell eine funktionale Anwendung zu erstellen, ohne uns um die Infrastruktur kümmern zu müssen. Die Row Level Security stellt dabei sicher, dass jeder Nutzer nur seine eigenen Daten sehen und bearbeiten kann.

Literatur

[1] „Database | open source sql database“, Supabase. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/database

[2] „Auth | Built-in user management“, Supabase. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/auth

[3] „Storage | Store any digital content“, Supabase. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/storage

[4] „Realtime | Sync your data in real time“, Supabase. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/realtime

[5] Supabase, „Self-Hosting with Docker | Supabase Docs“. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/docs/guides/self-hosting/docker

[6] Supabase, „Self-Hosting | Supabase Docs“. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/docs

[7] „Pricing & Fees“, Supabase. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/pricing

[8] „Supabase | The Open Source Firebase Alternative“, Supabase. Zugegriffen: 25. November 2024. [Online]. Verfügbar unter: https://supabase.com/

[9] CodeParrot. „Firebase vs Supabase“, DEV Community. Zugegriffen: 14. Januar 2025. [Online]. Verfügbar unter: https://dev.to/codeparrot/firebase-vs-supabase-4770

[10] „Firebase Pricing“, Google Firebase. Zugegriffen: 16. Januar 2025. [Online]. Verfügbar unter: https://firebase.google.com/pricing

[11] „Preise für AWS Amplify“, Amazon Web Services. Zugegriffen: 16. Januar 2025. [Online]. Verfügbar unter: https://aws.amazon.com/de/amplify/pricing/

[12] Supabase, „REST API“. Zugegriffen: 16. Januar 2025. [Online]. Verfügbar unter: https://supabase.com/docs/guides/api/rest

[13] Supabase, „JavaScript SDK“. Zugegriffen: 16. Januar 2025. [Online]. Verfügbar unter: https://supabase.com/docs/reference/javascript