A react-firebaseui alternative for React 19

Use it in Next.js

app/login/page.tsx

"use client";
// Before: <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={getAuth()} />
import { useState } from "react";
import { useRouter } from "next/navigation";
import { FirebaseError } from "firebase/app";
import {
  GithubAuthProvider, GoogleAuthProvider, createUserWithEmailAndPassword,
  signInWithEmailAndPassword, signInWithPopup, updateProfile,
} from "firebase/auth";
import GatewayDive from "@/components/gateway-dive/GatewayDive";
import { auth } from "@/lib/firebase";

// uiConfig.signInOptions, minus email: the form is always there
const providers = [
  { id: "google", label: "Google" },
  { id: "github", label: "GitHub" },
];

const messages: Record<string, string> = {
  "auth/invalid-credential": "Wrong email or password.",
  "auth/email-already-in-use": "That email already has an account. Sign in instead.",
  "auth/weak-password": "Pick a longer password.",
  "auth/too-many-requests": "Too many tries. Wait a minute and try again.",
  "auth/account-exists-with-different-credential": "That email used another button last time.",
};
const say = (e: unknown) =>
  (e instanceof FirebaseError && messages[e.code]) || "Sign-in didn't work. Try again.";

export default function Login() {
  const router = useRouter();
  const [popupError, setPopupError] = useState("");

  return (
    <main style={{ height: "100dvh", position: "relative" }}>
      {popupError ? (
        <p role="alert" className="absolute inset-x-0 top-4 z-10 text-center text-sm text-red-400">{popupError}</p>
      ) : null}
      <GatewayDive
        autoplayDemo={false}
        brand="Acme"
        providers={providers}
        onProvider={async (id) => {
          setPopupError("");
          try {
            const provider = id === "github" ? new GithubAuthProvider() : new GoogleAuthProvider();
            await signInWithPopup(auth, provider); // uiConfig.signInFlow: "popup"
            router.push("/dashboard");
          } catch (e) {
            if (e instanceof FirebaseError && e.code === "auth/popup-closed-by-user") return;
            setPopupError(say(e));
          }
        }}
        onSubmit={async ({ mode, name, email, password }) => {
          try {
            if (mode === "signin") {
              await signInWithEmailAndPassword(auth, email, password);
            } else {
              const { user } = await createUserWithEmailAndPassword(auth, email, password);
              await updateProfile(user, { displayName: name });
            }
            return { ok: true };
          } catch (e) {
            return { ok: false, error: say(e) };
          }
        }}
        // uiConfig.signInSuccessUrl: route after the dive (about 1.4 s)
        onSuccess={() => setTimeout(() => router.push("/dashboard"), 1400)}
      />
    </main>
  );
}

import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const app = getApps().length ? getApp() : initializeApp({
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
});

export const auth = getAuth(app);