Das Hinzufügen von Registrierung, Login und Benutzerkonten zu einer App bedeutet nicht zwangsläufig, dass du Authentifizierung, Sitzungen, geschützte Routen und Berechtigungen manuell konfigurieren musst. Mit Coderblock kannst du im Chat beschreiben, wie sich deine App verhalten soll, und die technische Einrichtung dem Agenten überlassen.

In diesem Tutorial erfährst du, wie du:

• Registrierung und Login hinzufügst;
• einen geschützten persönlichen Bereich erstellst;
• Sitzungen und geschützte Routen verwaltest;
• Daten mit dem authentifizierten Benutzer verknüpfst;
• Rollen wie Kunde und Administrator einrichtest;
• Daten mit Row Level Security schützt;
• bei Bedarf einen Social Login hinzufügst;
• die Authentifizierung testest, bevor du die App veröffentlichst.

Bevor du beginnst

Öffne das Coderblock-Projekt, dem du eine Authentifizierung hinzufügen möchtest. Du kannst mit einer vorhandenen App beginnen oder ein neues Projekt erstellen, indem du in natürlicher Sprache beschreibst, was du umsetzen möchtest.

Zum Beispiel:

Erstelle eine Plattform für Personal Trainer, auf der jeder Kunde ein Konto anlegen, seine Trainingspläne ansehen und seine Fortschritte verfolgen kann. Trainer sollen einen Administrationsbereich zur Verwaltung ihrer Kunden erhalten.

Wenn die App bereits vorhanden ist, kannst du direkt darum bitten, Benutzerkonten hinzuzufügen:

Füge eine Registrierung und einen Login für Benutzer hinzu. Jeder Benutzer soll nach dem Login einen geschützten persönlichen Bereich erhalten.

Coderblock verwendet Supabase Auth zur Verwaltung der Authentifizierung und konfiguriert die erforderlichen Projektbestandteile, einschließlich Sitzungen, geschützter Routen und Datenbank-Zugriffsrichtlinien.

---

1. Registrierung und Login hinzufügen

Am einfachsten beginnst du, indem du dem Agenten den gewünschten Ablauf für deine Benutzer beschreibst. Zum Beispiel:

Füge eine Registrierungsseite und eine Login-Seite hinzu. Benutzer sollen ein Konto mit E-Mail-Adresse und Passwort erstellen und nach dem Login auf ihren persönlichen Bereich zugreifen können.

Der Agent richtet die erforderlichen Seiten ein und verbindet den Ablauf mit Supabase Auth. Du musst weder manuell eine Tabelle für Passwörter erstellen noch JWTs oder Passwort-Hashing selbst implementieren. Überprüfe nach Abschluss der Änderung die Live-Vorschau und teste Folgendes:

1. ein neues Konto erstellen;
2. sich anmelden;
3. sich abmelden;
4. sich erneut mit demselben Konto anmelden.

Wenn du den Ablauf anpassen möchtest, kannst du einfach im Chat weiterarbeiten. Zum Beispiel:

Vereinfache das Registrierungsformular und zeige verständliche Fehlermeldungen an, wenn die E-Mail-Adresse bereits registriert oder das Passwort ungültig ist.

2. Einen geschützten persönlichen Bereich erstellen

Nachdem der Login eingerichtet ist, kannst du festlegen, was ein authentifizierter Benutzer sehen soll. Zum Beispiel:

Erstelle eine Kontoseite, auf die nur authentifizierte Benutzer zugreifen können. Zeige Name, E-Mail-Adresse, Registrierungsdatum und eine Zusammenfassung der Benutzeraktivitäten an.

Coderblock kann die Seite erstellen und so schützen, dass nicht angemeldete Benutzer keinen Zugriff darauf haben. Du kannst auch mehrere Seiten schützen lassen:

Schütze die Seiten /account, /orders und /settings. Wenn ein nicht authentifizierter Benutzer versucht, darauf zuzugreifen, leite ihn zur Login-Seite weiter.

Versuche anschließend, die geschützten URLs direkt aufzurufen, ohne angemeldet zu sein. Ein nicht authentifizierter Benutzer sollte die geschützten Inhalte nicht sehen können.

3. Daten mit dem authentifizierten Benutzer verknüpfen

Eine Authentifizierung wird besonders nützlich, wenn Benutzer persönliche Daten besitzen können, die ihrem Konto zugeordnet sind. Für eine Buchungsplattform könntest du beispielsweise Folgendes anfordern:

Füge eine Tabelle für Buchungen hinzu. Jede Buchung muss dem authentifizierten Benutzer zugeordnet sein und Datum, Uhrzeit, Dienstleistung und Status enthalten.

Der Agent kann die Datenbankstruktur entwerfen und die Datensätze mit dem authentifizierten Benutzer verknüpfen. Anschließend kannst du Folgendes anfordern:

Zeige auf der Kontoseite ausschließlich die Buchungen des aktuell authentifizierten Benutzers an.

Dieses Prinzip lässt sich auf alle persönlichen Daten anwenden: Bestellungen, Termine, Dokumente, Einstellungen, Nachrichten oder vom Benutzer erstellte Inhalte.

4. Daten mit Row Level Security schützen

Eine Seite zu schützen reicht nicht aus. Wenn eine App private Daten enthält, muss auch die Datenbank verhindern, dass Benutzer Informationen anderer Konten lesen oder ändern können. Coderblock verwendet dafür Row Level Security (RLS) von Postgres. Du kannst beispielsweise Folgendes anfordern:

Stelle sicher, dass jeder Benutzer ausschließlich seine eigenen Buchungen lesen und ändern kann. Benutzer dürfen nicht auf die Daten anderer Konten zugreifen können.

Der Agent konfiguriert die erforderlichen Richtlinien auf Grundlage des authentifizierten Benutzers. Das Ergebnis kannst du im Tab Backend des Editors überprüfen. Dort findest du die Tabellen, authentifizierten Benutzer, den Speicher und die Funktionen des Projekts.

Ein wichtiger Test

Erstelle mindestens zwei Testkonten. Mit dem ersten Konto:

• erstellst du einige Daten;
• überprüfst du, ob sie korrekt angezeigt werden.

Melde dich anschließend mit dem zweiten Konto an und kontrolliere, dass diese Daten nicht zugänglich sind. Dieser Test ist besonders wichtig für Anwendungen, die personenbezogene Informationen, Bestellungen, Dokumente oder andere vertrauliche Daten verwalten.

5. Rollen und Administratoren hinzufügen

Viele Anwendungen haben mehr als einen Benutzertyp. Du könntest beispielsweise folgende Rollen benötigen:

• Kunden;
• Administratoren;
• Teammitglieder;
• Moderatoren;
• Lehrkräfte;
• Fachkräfte.

Du kannst diese Rollen direkt im Chat beschreiben. Zum Beispiel:

Füge die Rollen Kunde und Administrator hinzu. Kunden dürfen ausschließlich ihre eigenen Daten sehen und ändern, während Administratoren auf ein geschütztes Dashboard zugreifen und Benutzer sowie Inhalte verwalten können.

Coderblock enthält bereits eine grundlegende Struktur für Profile und Rollen, mit der der Agent die Berechtigungen der App konfigurieren kann. Anschließend kannst du Folgendes anfordern:

Erstelle ein Administrations-Dashboard, auf das ausschließlich Benutzer mit der Rolle Administrator zugreifen können.

Überprüfe danach das Verhalten mit Konten, denen unterschiedliche Rollen zugewiesen sind. Ein Kunde sollte nicht allein dadurch auf das Dashboard zugreifen können, dass er dessen URL kennt.

6. Das Benutzerprofil anpassen

Nach der Einrichtung der Authentifizierung kannst du das Profil um zusätzliche Informationen erweitern. Zum Beispiel:

Füge der Kontoseite ein Formular hinzu, mit dem Benutzer ihren Namen, ihre Telefonnummer und ihr Profilbild ändern können.

Oder:

Ermögliche Benutzern, ein Profilbild hochzuladen, und speichere es im Speicher der App.

Wenn du produktspezifische Informationen benötigst, kannst du sie auf dieselbe Weise beschreiben. Der Agent kann das Datenmodell, die Benutzeroberfläche und die erforderliche Logik aktualisieren, um diese Informationen mit dem richtigen Konto zu verknüpfen.

7. Social Login hinzufügen

Wenn sich Benutzer über einen Social-Media-Anbieter registrieren oder anmelden können sollen, kannst du dies direkt im Chat anfordern. Zum Beispiel:

Füge zusätzlich zur Authentifizierung mit E-Mail-Adresse und Passwort die Anmeldung über Google hinzu.

Coderblock kann den Social Login in den Authentifizierungsablauf der App integrieren. Teste nach der Einrichtung beide Varianten:

• Registrierung und Login mit E-Mail-Adresse und Passwort;
• Login über den Social-Media-Anbieter.

Überprüfe außerdem, ob beide Varianten zum selben persönlichen Bereich führen und ob die Daten korrekt dem jeweiligen Benutzer zugeordnet werden.

8. Logout und Sitzungen verwalten

Ein Benutzerkonto sollte nicht auf den Login beschränkt sein. Bitte den Agenten auch darum, das Sitzungsverhalten einzurichten:

Füge im persönlichen Bereich einen Logout-Button hinzu und stelle sicher, dass die geschützten Seiten nach dem Logout nicht mehr zugänglich sind.

Überprüfe anschließend, ob:

1. der Login den persönlichen Bereich korrekt öffnet;
2. die Sitzung beim Aktualisieren der Seite wie vorgesehen erhalten bleibt;
3. der Logout die Sitzung beendet;
4. die geschützten Seiten nach dem Logout nicht mehr zugänglich sind.

Wenn du das Verhalten ändern möchtest, kannst du die gewünschte Anpassung direkt im Chat beschreiben.

9. Den gesamten Ablauf testen

Bevor du die App veröffentlichst, solltest du die Authentifizierung vollständig testen.

Benutzerkonto

1. Erstelle ein neues Konto.
2. Melde dich an.
3. Vervollständige gegebenenfalls das Profil.
4. Erstelle einige persönliche Daten.
5. Melde dich vom Konto ab.
6. Melde dich erneut an.
7. Überprüfe, ob die Daten weiterhin vorhanden sind.

Sicherheit

Erstelle anschließend ein zweites Konto und überprüfe, dass es:

• die Daten des ersten Benutzers nicht sehen kann;
• die Daten des ersten Benutzers nicht ändern kann;
• nicht auf die für den ersten Benutzer reservierten Seiten zugreifen kann;
• nicht auf Administrationsseiten zugreifen kann.

Administration

Wenn du eine Administratorrolle eingerichtet hast:

1. Melde dich mit einem Administratorkonto an.
2. Öffne das Dashboard.
3. Überprüfe die verfügbaren Funktionen.
4. Wechsle zurück zu einem Kundenkonto.
5. Versuche erneut, auf das Dashboard zuzugreifen.

Das Ziel besteht nicht nur darin, zu prüfen, ob der Login funktioniert, sondern sicherzustellen, dass jeder Benutzer ausschließlich die Aktionen ausführen kann, die seine Rolle erlaubt.

10. Die App veröffentlichen

Nachdem du Authentifizierung, Konten, Rollen und Berechtigungen überprüft hast, kannst du die App veröffentlichen. Klicke auf Veröffentlichen, um sie mit enthaltenem SSL unter <app>.coderblock.app bereitzustellen.

Wenn du eine eigene Domain verwenden möchtest, öffne Einstellungen → Domains und verbinde eine vorhandene Domain mithilfe der geführten DNS-Einrichtung. Alternativ kannst du direkt in Coderblock eine Domain kaufen.

Wiederhole nach der Veröffentlichung mindestens die wichtigsten Tests in der Produktionsumgebung:

• Registrierung;
• Login;
• Logout;
• Zugriff auf geschützte Seiten;
• Anzeige persönlicher Daten;
• Administratorberechtigungen;
• Datenzugriff durch unterschiedliche Benutzer.

Abschließende Checkliste

Bevor du die Einrichtung der Authentifizierung als abgeschlossen betrachtest, überprüfe, ob:

• die Registrierung korrekt funktioniert;
• Login und Logout funktionieren;
• Sitzungen korrekt verwaltet werden;
• private Seiten tatsächlich geschützt sind;
• jeder Benutzer ausschließlich auf seine eigenen Daten zugreifen kann;
• die Row Level Security korrekt konfiguriert ist;
• Rollen und die zugehörigen Berechtigungen funktionieren;
• Benutzer nicht ohne Autorisierung auf Administrationsbereiche zugreifen können;
• gegebenenfalls eingerichtete Social Logins korrekt funktionieren;
• Profildaten dem richtigen Konto zugeordnet sind.

Authentifizierung einsatzbereit

Mit Coderblock kannst du eine einfache App ohne Benutzerkonten in ein Produkt mit Registrierung, Login, Profilen, Rollen, geschützten Seiten und persönlichen Daten verwandeln – und dabei den Chat als wichtigste Benutzeroberfläche verwenden. Entscheidend ist jedoch die Überprüfung: Die AI kann einen großen Teil der Infrastruktur konfigurieren, aber du musst sicherstellen, dass jedes Konto und jede Rolle genau die vorgesehenen Berechtigungen besitzt.