Authentifizierungs-Seiten

Die Authentifizierungs-Seiten werden angezeigt, wenn das Firebase Auth Modul aktiviert ist. Hier gestaltest du Login, Registrierung und Passwort-Zurücksetzen.

Voraussetzung

Hinweis

Die Auth-Seiten-Editoren sind nur verfügbar, wenn:

1. Das Firebase Auth Modul in den Feature Gates aktiviert ist
2. Mindestens eine Authentifizierungsmethode konfiguriert ist

Übersicht

Seite	Funktion	Editor-Route
Login	Anmeldung bestehender Nutzer	/auth-page-editor/login
Registrierung	Neue Nutzer registrieren	/auth-page-editor/register
Passwort Reset	Passwort zurücksetzen	/auth-page-editor/password-reset

---

Login-Seite

Die Anmeldeseite für bestehende Nutzer.

Elemente

• Logo/Header-Bereich - App-Logo oder benutzerdefinierter Header
• Willkommenstext - Überschrift und Beschreibung
• E-Mail-Feld - Eingabe der E-Mail-Adresse
• Passwort-Feld - Eingabe des Passworts
• Passwort vergessen - Link zur Reset-Seite
• Login-Button - Hauptaktion
• Social Login - Google, Apple, etc. (falls aktiviert)
• Registrieren-Link - Link zur Registrierung

Einstellungen

Header-Bereich

Einstellung	Beschreibung
Logo anzeigen	App-Logo einblenden
Logo-Größe	Größe des Logos
Überschrift	Willkommenstext
Überschrift-Stil	Schriftgröße, -gewicht, -farbe
Beschreibung	Zusätzlicher Text unter der Überschrift

Formular

Einstellung	Beschreibung
E-Mail-Placeholder	Platzhaltertext im E-Mail-Feld
Passwort-Placeholder	Platzhaltertext im Passwort-Feld
Passwort anzeigen	Zeige/Verstecke Button
Remember Me	”Angemeldet bleiben” Checkbox

Buttons

Einstellung	Beschreibung
Login-Button-Text	Text des Hauptbuttons
Button-Stil	Übernimmt Widget-Theme oder angepasst
Social Login Layout	Horizontal, Vertikal, Icon-Only

Links

Einstellung	Beschreibung
Passwort vergessen Text	Linktext für Reset
Registrieren Text	Text für Registrierungslink
Link-Farbe	Farbe der Links

Hintergrund

Einstellung	Beschreibung
Hintergrundfarbe	Farbe der Seite
Hintergrundbild	Optional: Bild
Formular-Hintergrund	Farbe des Formularbereichs

---

Registrierungsseite

Für neue Nutzer, die sich registrieren möchten.

Elemente

• Header-Bereich - Logo und Willkommenstext
• Name-Felder - Vor- und Nachname (optional)
• E-Mail-Feld - E-Mail-Adresse
• Passwort-Feld - Passwort mit Anforderungen
• Passwort bestätigen - Passwort-Wiederholung
• AGB/Datenschutz - Checkbox für Zustimmung
• Registrieren-Button - Hauptaktion
• Login-Link - Link zur Anmeldeseite

Zusätzliche Einstellungen

Zusätzlich zu den Login-Einstellungen:

Name-Felder

Einstellung	Beschreibung
Name erfragen	Namen bei Registrierung abfragen
Vor-/Nachname getrennt	Zwei separate Felder
Name erforderlich	Pflichtfeld oder optional

Passwort-Anforderungen

Einstellung	Beschreibung
Mindestlänge	Minimale Passwort-Länge
Großbuchstaben	Mindestens ein Großbuchstabe
Zahlen	Mindestens eine Zahl
Sonderzeichen	Mindestens ein Sonderzeichen
Anforderungen anzeigen	Visuelles Feedback zu Anforderungen

Zustimmung

Einstellung	Beschreibung
AGB-Checkbox	Checkbox für AGB-Zustimmung
AGB-Text	Text der Checkbox
Datenschutz-Link	Link zur Datenschutzerklärung
AGB-Link	Link zu den AGB

---

Passwort-Reset-Seite

Für Nutzer, die ihr Passwort vergessen haben.

Elemente

• Header-Bereich - Überschrift und Beschreibung
• E-Mail-Feld - E-Mail-Eingabe
• Absenden-Button - E-Mail senden
• Zurück zum Login - Link zur Anmeldeseite
• Bestätigungsansicht - Nachricht nach dem Absenden

Einstellungen

Header

Einstellung	Beschreibung
Überschrift	z.B. “Passwort zurücksetzen”
Beschreibung	Erklärtext für den Nutzer
Icon	Optional: Icon über der Überschrift

Formular

Einstellung	Beschreibung
E-Mail-Placeholder	Platzhaltertext
Button-Text	Text des Absenden-Buttons

Bestätigung

Einstellung	Beschreibung
Bestätigungs-Überschrift	z.B. “E-Mail gesendet”
Bestätigungs-Text	Erklärung der nächsten Schritte
Zurück-Button-Text	Text für “Zurück zum Login”

---

Social Login

Wenn Social Login aktiviert ist, kannst du das Erscheinungsbild anpassen.

Verfügbare Anbieter

• Google Sign-In
• Apple Sign-In (nur iOS)

Einstellungen

Einstellung	Beschreibung
Layout	Horizontal, Vertikal
Button-Stil	Voll, Outline, Icon-Only
Reihenfolge	Anbieter-Reihenfolge
Divider anzeigen	”oder” Trennlinie
Divider-Text	Text der Trennlinie

---

Light / Dark Mode

Alle Auth-Seiten unterstützen separate Einstellungen für Light und Dark Mode:

• Hintergrundfarben
• Textfarben
• Formular-Hintergrund
• Button-Farben
• Link-Farben

Nutze den Umschalter im Editor, um zwischen den Modi zu wechseln.

---

Vorschau

Jeder Editor bietet eine Live-Vorschau:

• Zeigt die Seite mit aktuellen Einstellungen
• Wechsel zwischen Light und Dark Mode
• Verschiedene Geräte-Vorschauen

---

Tipps

Einheitliches Design

Alle drei Auth-Seiten sollten optisch zusammenpassen.

Social Login prominent

Wenn verfügbar, mache Social Login-Buttons gut sichtbar - sie erhöhen die Konversionsrate.

Klare Fehlermeldungen

Teste die Validierung und stelle sicher, dass Fehlermeldungen verständlich sind.

Passwort-Anforderungen

Zeige die Anforderungen während der Eingabe an, nicht erst bei Fehlern.

Mobile First

Die meisten Nutzer registrieren sich auf mobilen Geräten. Teste auf verschiedenen Bildschirmgrößen.

Häufige Fragen

Warum sehe ich die Auth-Seiten-Editoren nicht?

Das Firebase Auth Modul muss aktiviert sein. Gehe zu App Builder Tools > Feature Gate und aktiviere “Firebase Auth”.

Kann ich die Formularfelder ändern?

Die Standard-Felder sind vordefiniert. Du kannst Labels und Platzhaltertexte anpassen, aber keine Felder hinzufügen oder entfernen.

Wie aktiviere ich Apple Sign-In?

1. Apple Developer Account erforderlich
2. Sign in with Apple im Apple Developer Portal konfigurieren
3. In den Feature Gate Einstellungen aktivieren

Kann ich eine komplett eigene Login-Seite erstellen?

Die Auth-Seiten basieren auf Firebase Auth und haben eine vordefinierte Struktur. Du kannst das Aussehen umfassend anpassen, aber nicht die grundlegende Funktionalität ändern.

Wie ändere ich die Validierungs-Fehlermeldungen?

Die Fehlermeldungen werden über die Übersetzungsdateien gesteuert. Kontaktiere den Support für Anpassungen.