Authentifizierte Webapps mit Supabase Auth und Cloudflare entwickeln

Hallo, ich bin Matsun von Liberogic.
Dies ist mein erster Beitrag.

Nach PHP2Shell und HTTP2Shell reißen die Sicherheitsmeldungen nicht ab.
Cloudflare hat außerdem WAF-Schutzmaßnahmen gegen die PHP-Schwachstellen angekündigt.
Ich habe den Eindruck, dass wir künftig nicht nur Webssysteme, sondern auch Mitarbeiter-PCs und Netzwerkumgebungen stärker in den Blick nehmen müssen.

Unser CTO Otsuka hat kürzlich darüber geschrieben, wie er eine individuelle Web-App mit Supabase und Cloudflare entwickelt.
Als Fortsetzung dazu werde ich nun über das für Geschäftsanwendungen unverzichtbare Thema Authentifizierung sprechen.

Bei internen Systemen und Portalen für Geschäftspartner reicht es nicht aus, dass sich Nutzer nur anmelden können. Je nach Nutzer müssen unterschiedliche Informationen sichtbar und unterschiedliche Funktionen verfügbar sein. Dafür setzen wir Supabase Auth ein.

In Geschäftsanwendungen ist eine Anmeldung meist erforderlich

• Internes Antrags- und Genehmigungssystem
• Mitgliederbereich
• Portal für Geschäftspartner
• Aufwands- und Zeiterfassung
• Projektverwaltung
• Verwaltungssystem für Filialen und Standorte

Bei solchen Webanwendungen wird in den meisten Fällen eine Anmeldefunktion benötigt.
Allerdings reicht es nicht aus, dass man sich lediglich mit Benutzername und Passwort anmelden kann.
Bei einem internen Antragssystem beispielsweise gilt:

• Mitarbeitende
• Vorgesetzte
• Standortverwaltung
• Hauptadministrator
• Systemadministrator

Auch wenn mehrere Personen dieselbe App nutzen, hängt ab von ihrer Rolle, was sie tun dürfen.
Bei einem Partnerportal wäre es problematisch, wenn Mitarbeiter von Firma A die Informationen von Firma B einsehen könnten.
Bei einer Web-App mit Authentifizierung sollte man

• die Authentifizierung, die prüft, wer jemand ist
• die Autorisierung, die festlegt, was jemand tun darf

getrennt betrachten.

Anmeldung mit Supabase Auth bündeln

Supabase Auth ist die Authentifizierungsfunktion, die Supabase bereitstellt. Zum Beispiel:

• E-Mail-Adresse + Passwort
• Magic Link
• Einmalpasswort (OTP)
• Soziale Anmeldung mit Google und weiteren Anbietern

unterstützt werden.
Bei Business-Anwendungen erfolgt die Anmeldung meist zunächst über E-Mail-Adresse und Passwort. Je nach Anwendungsfall lässt sich aber auch auf ein Passwort verzichten und stattdessen ein Magic Link verwenden. Der große Vorteil besteht darin, dass Sie diese Funktionen nicht von Grund auf selbst implementieren und betreiben müssen.
Auf den ersten Blick wirkt Authentifizierung wie ein einfaches Anmeldeformular. Im Hintergrund sind jedoch unter anderem folgende Prozesse erforderlich:

• Registrierung von Benutzern
• Passwortverwaltung
• Bestätigung der E-Mail-Adresse
• Verwaltung des Anmeldestatus
• Zurücksetzen des Passworts
• Sitzungsverwaltung

und viele weitere Vorgänge.
Diese grundlegenden Authentifizierungsfunktionen können Sie an Supabase übergeben.

So sieht die Kombination mit Cloudflare aus

Im letzten Artikel über das CTO-Thema

Cloudflare als Einstiegspunkt und Supabase als Datenbasis

habe ich dargelegt. Mit Authentifizierung ändert sich das Grundprinzip jedoch nicht.

ユーザー
  ↓
Cloudflare
  ↓
Next.js
  ↓
Supabase Auth
  ↓
Supabase
 ├ Database
 └ RLS

Nutzer greifen auf die Web-App zu und melden sich über Supabase Auth an.
Auf Basis der Informationen des authentifizierten Nutzers steuert Next.js, welche Oberfläche angezeigt wird, und ruft bei Bedarf die benötigten Daten aus Supabase ab.
Cloudflare bleibt dabei weiterhin der Einstiegspunkt der Web-App. Je nach Bedarf kommen hier außerdem externe APIs

• Cloudflare Workers
• R2
• SendGrid
• Box
• hinzu

usw.
Es ist weder nötig, alles nur mit Supabase umzusetzen, noch alles ausschließlich mit Cloudflare.
Jede Plattform wird dort eingesetzt, wo sie ihre Stärken hat.

Die Anzeige abhängig vom angemeldeten Nutzer gestalten

Angenommen, wir entwickeln ein Portal für Geschäftspartner. Nach dem Login wird

○○株式会社
森本様

現在の案件
資料一覧
お問い合わせ
アカウント設定

eine Oberfläche angezeigt, wie sie hier dargestellt ist.
Meldet sich ein Mitarbeiter eines anderen Unternehmens an, werden nur die Projekte und Materialien dieses Unternehmens angezeigt.
Meldet sich ein Administrator an, wird stattdessen

• alle Geschäftspartner
• Alle Projekte
• Benutzerverwaltung
• Dateiverwaltung
• Verlauf

usw. und zeigt das Menü für Administratoren an.
Auf den ersten Blick wirkt das einfach, aber im Hintergrund

muss zunächst ermittelt werden, wer der angemeldete Benutzer ist

. Anschließend werden die Daten abgerufen, die diesem Benutzer zugeordnet sind.
Mit Supabase Auth erhält jeder authentifizierte Benutzer eine ID zur Identifikation, die anschließend mit den Geschäftsdaten verknüpft wird.

Authentifizierung nicht nur im Browser prüfen

Bei Webanwendungen mit Next.js werden Anmeldedaten nicht immer nur im Browser verarbeitet. Auch auf dem Server stellt sich häufig die Frage, ob ein Benutzer angemeldet ist.
Supabase bietet für SSR-Umgebungen eine cookiebasierte Authentifizierung an, mit der sich der Sitzungsstatus in Next.js sowohl auf der Client- als auch auf der Serverseite verwalten lässt. Dieser Mechanismus ist sehr wichtig. Zum Beispiel

/login

ist öffentlich einsehbar, während

/dashboard

nur für angemeldete Personen,

/admin

nur für Administratoren. Auf diese Weise steuern wir den Zugriff auf Ebene einzelner URLs.
Das bloße Ausblenden der Schaltfläche „Verwaltung“ auf dem Bildschirm sorgt jedoch nicht für Sicherheit.
Auch wenn eine URL direkt aufgerufen oder die API direkt angesprochen wird, muss alles abgesichert sein. Deshalb prüfen wir die Berechtigungen zusätzlich auf Server- und Datenbankseite.

Authentifizierung und Rechteverwaltung sind zwei verschiedene Dinge

Authentifizierung und Rechteverwaltung sollten beim Entwurf einer Geschäftsanwendung getrennt betrachtet werden.
Mit Supabase Auth lässt sich feststellen,

„Frau Morimoto hat sich angemeldet“

ist damit bestätigt. Offen bleibt jedoch,

„welche Daten Frau Morimoto einsehen darf“

. Das ist eine andere Frage. Zum Beispiel muss die Beziehung

ユーザー
 ↓
所属会社
 ↓
所属拠点
 ↓
役割
 ↓
閲覧できるデータ

klar definiert werden.
In Geschäftsanwendungen unterscheidet sich dieser Teil von App zu App erheblich.
Bei „Administrator“ und „normalem Benutzer“ ist das einfach, doch bei

• Hauptverwaltung
• Zweigstelle
• Filiale
• Geschäftspartner
• Vertriebspartner
• externe Mitarbeitende

kommen weitere Beteiligte wie externe Mitarbeitende hinzu, wird die Rechtevergabe schnell komplex.
Bei Supabase spielt dabei insbesondere **RLS (Row Level Security)** eine zentrale Rolle.
Mit RLS lassen sich Zugriffsregeln direkt auf Datenbankebene durchsetzen, sodass

• nur die eigenen Daten
• nur die Daten des eigenen Unternehmens
• nur die Daten des eigenen Standorts
• für Administratoren alle Daten

…und ähnliche Kontrollen durchführen.
Die konkrete Gestaltung von RLS behandeln wir im nächsten Artikel.

Absicherung auch auf Cloudflare-Seite

Nur weil Supabase Auth vorhanden ist, bedeutet das nicht, dass die gesamte Sicherheit der Web-Anwendung allein Supabase überlassen wird. Auf Cloudflare-Seite gilt Folgendes:

• WAF
• DNS
• HTTPS
• Bot-Abwehr
• Ratenbegrenzung
• API-Verarbeitung mit Workers
• bei Bedarf Cloudflare Access

kombiniert werden. Das bedeutet:

Cloudflare
   ↓
Webアプリ
   ↓
Supabase Auth
   ↓
権限制御
   ↓
Database

Entsprechend denken wir in mehreren Schichten.
„Es gibt eine Login-Seite, also ist es sicher“, gilt nicht.
Bei Web-Anwendungen müssen Eingang, Anwendung, API und Datenbank jeweils passend abgesichert werden.

Einsatzbeispiele für diese Anwendung

Die Kombination aus Supabase Auth und Cloudflare lässt sich in vielen unterschiedlichen Geschäftsanwendungen einsetzen.

Interne Antrags- und Genehmigungs-App

• Mitarbeiter melden sich an, erfassen Anträge und Vorgesetzte oder Administratoren genehmigen sie.
• Reguläre Mitarbeiter sehen nur ihre eigenen Anträge.
• Vorgesetzte sehen die Anträge ihrer Abteilung.
• Administratoren sehen alle Anträge.

So werden die Berechtigungen gesteuert.

Portal für Geschäftspartner

Für jeden Geschäftspartner wird ein eigenes Konto ausgestellt,

• Projektinformationen
• Unterlagen
• Dateien
• Ankündigungen
• Anfrageverlauf

werden angezeigt.
Es handelt sich um dieselbe Web-App, die Inhalte unterscheiden sich jedoch je nach angemeldetem Unternehmen.

Mitgliederbereich

Nur die Mitglieder selbst können

• Registrierungsdaten
• Antragsverlauf
• Vertragsinformationen
• Dateien
• verschiedene Einstellungen

einsehen.

Standortverwaltungssystem

Mitarbeitende aus Filialen und Vertriebsbüros im ganzen Land melden sich an und erfassen die Informationen ihres eigenen Standorts.
Die Zentrale kann alle Standorte gesammelt einsehen.
Auch für solche Anwendungsfälle lässt sich Supabase Auth in Kombination mit einer Rechteverwaltung nutzen.

Die Authentifizierungsinfrastruktur muss nicht mehr komplett selbst entwickelt werden

Früher mussten bei der Entwicklung eines Geschäftssystems mit Anmeldung zunächst Grundsatzfragen geklärt werden: Wie betreibt man den Authentifizierungsserver, wie verwaltet man Sitzungen und wie verknüpft man das Ganze mit der Datenbank.
Natürlich ist auch heute noch eine Konzeption erforderlich.
Mit Lösungen wie Supabase Auth lässt sich der Aufwand für den Aufbau der Authentifizierungsinfrastruktur von Grund auf jedoch deutlich reduzieren. Die so gewonnene Zeit lässt sich

• Wer sieht was
• Wer bedient was
• Welche Berechtigungen geschäftlich erforderlich sind

für die Konzeption einsetzen, also für die Fragen, die eigentlich im Mittelpunkt stehen sollten.
Meiner Einschätzung nach liegt genau hier der große Vorteil von Supabase bei Geschäftsanwendungen.

Fazit

Mit Supabase Auth und Cloudflare lässt sich auch mit einer vergleichsweise einfachen Architektur eine Web-Anwendung mit Anmeldung umsetzen.
Entscheidend ist jedoch nicht die Erstellung einer Login-Seite.
Wichtig ist vielmehr, dass für authentifizierte Nutzer klar definiert ist, was

• sie sehen dürfen
• sie bedienen dürfen
• auf welche Daten sie zugreifen dürfen

Erst wenn auch das Design bis ins Detail durchdacht ist, wird daraus eine Web-App, die sich im Arbeitsalltag tatsächlich einsetzen lässt.
Supabase Auth übernimmt dabei die Prüfung, wer der Nutzer ist. Die darauf aufbauende Rechteverwaltung wird anschließend in der Anwendung und auf Datenbankseite umgesetzt.

Im nächsten Beitrag zeige ich, wie sich Supabase RLS in Geschäftsanwendungen einsetzen lässt.