Stop Losing 86% of Mobile Users: Lazy Auth with Firebase (Tutorial)

#react #firebase #javascript #webdev

The $300 Million Problem 💸

The famous "$300 Million Button" case study proved that forcing users to register before checkout is a revenue killer. On mobile, the stats are even worse—up to 86% of users abandon apps when hit with an immediate login wall.

The solution? Lazy Registration (or "Just-in-Time" auth).

In this quick tutorial, I’ll show you how to implement a flow where users are "logged in" anonymously first, and only asked for credentials when they want to save their work.

Step 1: Start with Anonymous Auth 👻

Firebase provides a specific method to create temporary, persisted sessions without asking the user for any data.

Docs: signInAnonymously

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

const auth = getAuth();

// 1. Log them in silently
await signInAnonymously(auth);

// 2. Listen to the state (User ID persists on reload!)
auth.onAuthStateChanged((user) => {
  if (user && user.isAnonymous) {
    console.log("User is a Guest 👻", user.uid);
  }
});

Step 2: The "Upgrade" (Account Linking) 🔗

This is the most critical part. When the user decides to sign up (e.g., to save their settings), you don't create a new account. You upgrade the existing one.

This preserves the uid and all Firestore data attached to it.

Docs: linkWithCredential

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

const upgradeAccount = async (email, password) => {
  const credential = EmailAuthProvider.credential(email, password);
  const user = auth.currentUser;

  try {
    // Merge the new credentials into the existing anonymous account
    const result = await linkWithCredential(user, credential);
    console.log("Guest upgraded to Permanent User! 🎉");
  } catch (error) {
    console.error("Error linking account:", error);
  }
};

Pro Tip: Cleaning up "Ghost" Users 🧹

One downside of Anonymous Auth is that you might end up with thousands of abandoned guest accounts in your database.

You can solve this without writing a custom script by enabling Google Cloud Identity Platform. This allows you to set an automatic deletion policy (e.g., delete anonymous users inactive for 30 days).

Docs: Identity Platform Cleanup