Überblick

Nutzer einfach nur um eine Anmeldung zu bitten, ist nicht nur nervig—es könnte Sie 45 % Ihrer potenziellen Kunden kosten, wie die berühmte 300-Millionen-Dollar-Button-Fallstudie zeigt. Noch schlimmer ist, dass diese Reibung auf kleinen Bildschirmen verstärkt wird, wo die Abbruchraten auf 86 % bei mobilen Nutzern ansteigen, die sich einfach weigern, lange Formulare einzutippen, laut aktuellen Abbruchdaten.

Am Ende dieses Artikels werden Sie einen Flow haben, bei dem die Nutzer zuerst Mehrwert erfahren und sich erst danach anmelden können, ohne dass ihre Daten verloren gehen. So vermeiden Sie diesen enormen Verlust an potenziellen Kunden.

Was ist verzögerte Registrierung?

Die verzögerte Registrierung (Lazy Registration oder “Just-in-Time” Registrierung) ist eine Strategie, bei der Sie den Anmeldeprozess bis zum absolut letzten Moment aufschieben. Anstatt Nutzer sofort mit einem Anmeldebildschirm zu blockieren, erlauben Sie ihnen, mit Ihrer Anwendung zu interagieren, Inhalte zu erstellen oder ihre Erfahrung als “anonymer” Nutzer anzupassen.

Erst wenn sie ihre Arbeit dauerhaft speichern, auf geräteübergreifende Funktionen zugreifen oder eine sensible Aktion ausführen möchten, fordern Sie sie auf, ein Konto zu erstellen. Dies baut Vertrauen und Engagement auf, bevor es eine Verpflichtung verlangt.

Wie man verzögerte Registrierung in Firebase implementiert

0. Voraussetzungen

Bevor wir beginnen, benötigen Sie ein Firebase-Projekt. Wenn Sie noch keines erstellt haben, gehen Sie zur Firebase Console und richten Sie eines ein. Google hat auch ein hilfreiches YouTube-Video, das Sie durch den Prozess führt.

Sie müssen auch die Authentifizierung (Authentication) in Ihrer Firebase-Konsole aktivieren. Gehen Sie auf den Reiter Build > Authentication und legen Sie los.

Einen neuen Auth-Anbieter hinzufügen

Stellen Sie sicher, dass Sie Anonyme Anmeldeanbieter aktivieren, sowie alle anderen Anbieter, die Sie nutzen möchten (wie Google, E-Mail/Passwort usw.).

1. Daten für anonyme Nutzer speichern

Der Kern der verzögerten Registrierung in Firebase ist signInAnonymously. Dadurch wird eine temporäre Nutzersitzung erstellt, die das Neuladen der Seite übersteht, sodass Sie den Nutzer auch ohne Anmeldedaten wie “angemeldet” behandeln können.

import { getAuth, signInAnonymously } from "firebase/auth";

const auth = getAuth();
await signInAnonymously(auth);

Sobald Sie angemeldet sind, können Sie den Authentifizierungsstatus genauso wie bei jedem anderen Nutzer abhören. Wenn Sie React verwenden, ist der useAuthState Hook von react-firebase-hooks fantastisch für diesen Zweck.

import { getAuth, onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, (user) => {
    if (user) {
        // Nutzer ist angemeldet.
        // Bei anonymen Nutzern ist user.isAnonymous true
        const uid = user.uid;
        console.log("Nutzer ist angemeldet:", uid, "Ist anonym:", user.isAnonymous);
    } else {
        // Nutzer ist abgemeldet
    }
});

Siehe die Firebase-Benutzerdokumentation für alle verfügbaren Eigenschaften.

1.1 Verwalten anonymer Nutzer in Firestore

Standardmäßig bleiben anonyme Konten bestehen, bis sich der Nutzer abmeldet. Wenn sie sich jedoch nie in ein dauerhaftes Konto umwandeln, können Sie mit vielen verwaisten Nutzerdatensätzen enden.

Um dies zu handhaben, können wir Googles Identity Platform in der Google Cloud nutzen. Dies bietet erweiterte Funktionen, wie die Möglichkeit, anonyme Nutzer, die über einen bestimmten Zeitraum (z. B. 30 Tage) nicht aktiv waren, automatisch zu löschen.

Zuerst müssen Sie in der Firebase-Konsole ein Upgrade auf die Identity Platform durchführen:

Identity Platform aktivieren

Sobald dies aktiviert ist, können Sie die automatische Löschrichtlinie für anonyme Nutzer konfigurieren:

Automatische Kontolöschung aktivieren

Dies hält Ihre Nutzerbasis ohne manuelle Wartung sauber.

2. Anonyme Nutzer mit einem dauerhaften Konto verknüpfen

Die Magie geschieht, wenn der Nutzer sich entscheidet, sich anzumelden. Sie möchten nicht, dass sie von vorne anfangen; Sie möchten ihr anonymes Konto in ein dauerhaftes umwandeln. Firebase macht dies mit linkWithCredential einfach.

Dies “rüstet” den aktuellen anonymen Nutzer praktisch auf einen Standardnutzer (z. B. E-Mail/Passwort, Google usw.) auf, wobei seine UID und alle damit verknüpften Daten in Firestore erhalten bleiben.

Hier ist ein Beispiel mit E-Mail und Passwort:

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

const auth = getAuth();
const credential = EmailAuthProvider.credential(email, password);

try {
    const user = auth.currentUser;
    const result = await linkWithCredential(user, credential);
    const user = result.user;
    console.log("Anonymes Konto erfolgreich aktualisiert!", user);
} catch (error) {
    console.error("Fehler bei der Kontoaktualisierung", error);
    // Fehler wie 'credential-already-in-use' behandeln, falls die E-Mail bereits vergeben ist
}

Nach diesem Schritt ist user.isAnonymous false. Der Nutzer behält all seine Fortschritte, aber er kann sich nun von anderen Geräten aus anmelden und sein Konto ist sicher.

Verzögerte Registrierung in Aktion

Wenn Sie erleben möchten, wie detaillierte Implementierungen dieser Patterns funktionieren, schauen Sie sich meine App an, die die Windows-Kommandozeile lehrt. Ich entwickle sie aktiv weiter, um einen Hacking-Kurs mit einem interaktiven Terminal aufzunehmen, der genau diese Prinzipien anwendet, damit Schüler sofort mit dem Lernen beginnen können.

Fazit

Die verzögerte Registrierung ist ein mächtiges Pattern, um die Konversionsraten zu steigern. Indem Sie die Nutzer zuerst agieren lassen und sie sich später registrieren, senken Sie die Einstiegshürden und beweisen Ihr Wertversprechen von vornherein. Mit signInAnonymously und linkWithCredential von Firebase ist die Implementierung dieses Ablaufs geradlinig und robust.