FirebaseExtended · tyler-reitz · Aug 20, 2026 · Aug 21, 2026 · Aug 21, 2026 · Aug 24, 2026
diff --git a/recipe-demo/package-lock.json b/recipe-demo/package-lock.json
diff --git a/recipe-demo/package.json b/recipe-demo/package.json
@@ -15,7 +15,8 @@
     "firebase": "^12.17.1",
     "next": "^16.3.1",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "reactfire": "4.2.6-exp.ac3ccf9"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

diff --git a/recipe-demo/src/app/layout.tsx b/recipe-demo/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import '@picocss/pico/css/pico.min.css';
-import { SessionProvider } from '@/lib/session-context';
+import { Providers } from '@/lib/providers';
 import { SessionNav } from '@/components/SessionNav';
 
 export const metadata: Metadata = {
@@ -13,7 +13,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>
-        <SessionProvider>
+        <Providers>
           <header className="container">
             <nav>
               <ul>
@@ -32,7 +32,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             </nav>
           </header>
           <main className="container">{children}</main>
-        </SessionProvider>
+        </Providers>
       </body>
     </html>
   );

diff --git a/recipe-demo/src/components/RecipeBrowser.tsx b/recipe-demo/src/components/RecipeBrowser.tsx
@@ -1,13 +1,21 @@
 'use client';
 
 import { useState } from 'react';
+import { useFirestoreCollectionData } from 'reactfire';
 import { RecipeList } from './RecipeList';
-import { useRecipes } from '@/lib/use-recipes';
+import { recipeQuery } from '@/lib/recipes';
 import { CUISINES, type Cuisine, type Recipe } from '@/lib/types';
 
 export function RecipeBrowser({ initialRecipes }: { initialRecipes: Recipe[] }) {
   const [cuisine, setCuisine] = useState<Cuisine | 'all'>('all');
-  const { recipes, status, error } = useRecipes(cuisine, initialRecipes);
+  // The server list is unfiltered, so it is only a valid seed for the unfiltered query.
+  // The key's presence is what counts: useObservable tests hasOwnProperty('initialData'),
+  // so passing it as undefined would report success with no data rather than loading.
+  const { data, status } = useFirestoreCollectionData(
+    recipeQuery(cuisine),
+    cuisine === 'all' ? { idField: 'id', initialData: initialRecipes } : { idField: 'id' },
+  );
+  const recipes = data as Recipe[];
 
   return (
     <>
@@ -23,11 +31,7 @@ export function RecipeBrowser({ initialRecipes }: { initialRecipes: Recipe[] })
         </select>
       </label>
 
-      {error ? (
-        <article aria-invalid="true">Could not load recipes: {error.message}</article>
-      ) : (
-        <RecipeList recipes={recipes} loading={status === 'loading'} />
-      )}
+      <RecipeList recipes={recipes} loading={status === 'loading'} />
     </>
   );
 }
diff --git a/recipe-demo/src/components/RecipeCard.tsx b/recipe-demo/src/components/RecipeCard.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
+import { useUser } from 'reactfire';
 import { toggleLike } from '@/lib/recipes';
-import { useSession } from '@/lib/session-context';
 import type { Recipe } from '@/lib/types';
 
 export function RecipeCard({ recipe }: { recipe: Recipe }) {
-  const { user } = useSession();
+  const { data: user } = useUser();
   const [pending, setPending] = useState(false);
   const liked = user ? recipe.likedBy.includes(user.uid) : false;
 

diff --git a/recipe-demo/src/components/RequireAuth.tsx b/recipe-demo/src/components/RequireAuth.tsx
@@ -2,26 +2,27 @@
 
 import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, type ReactNode } from 'react';
-import { useSession } from '@/lib/session-context';
+import { useSigninCheck } from 'reactfire';
 
 export function RequireAuth({ children }: { children: ReactNode }) {
-  const { user, status } = useSession();
+  const { status, data: signinResult } = useSigninCheck();
+  const signedIn = signinResult?.signedIn ?? false;
   const router = useRouter();
   const pathname = usePathname();
 
   useEffect(() => {
-    // Waiting for 'ready' is what stops a signed-in user being bounced to
-    // /signin on every hard reload, before onAuthStateChanged has fired.
-    if (status === 'ready' && !user) {
+    // Waiting for 'success' is what stops a signed-in user being bounced to
+    // /signin on every hard reload, before the auth state has resolved.
+    if (status === 'success' && !signedIn) {
       router.replace(`/signin?next=${encodeURIComponent(pathname)}`);
     }
-  }, [status, user, router, pathname]);
+  }, [status, signedIn, router, pathname]);
 
   if (status === 'loading') {
     return <article aria-busy="true">Checking your session</article>;
   }
 
-  if (!user) {
+  if (!signedIn) {
     return null;
   }
 

diff --git a/recipe-demo/src/components/SessionNav.tsx b/recipe-demo/src/components/SessionNav.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import Link from 'next/link';
+import { useUser } from 'reactfire';
 import { logOut } from '@/lib/session';
-import { useSession } from '@/lib/session-context';
 
 export function SessionNav() {
-  const { user, status } = useSession();
+  const { data: user, status } = useUser();
 
   if (status === 'loading') {
     return (

diff --git a/recipe-demo/src/lib/providers.tsx b/recipe-demo/src/lib/providers.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { AuthProvider, FirebaseAppProvider, FirestoreProvider } from 'reactfire';
+import { app, firestore } from './firebase';
+import { auth } from './session';
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <FirebaseAppProvider firebaseApp={app}>
+      <FirestoreProvider sdk={firestore}>
+        <AuthProvider sdk={auth}>{children}</AuthProvider>
+      </FirestoreProvider>
+    </FirebaseAppProvider>
+  );
+}
diff --git a/recipe-demo/src/lib/session-context.tsx b/recipe-demo/src/lib/session-context.tsx
diff --git a/recipe-demo/src/lib/session.ts b/recipe-demo/src/lib/session.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { getAuth, connectAuthEmulator, onAuthStateChanged, signInWithEmailAndPassword, signOut, type User } from 'firebase/auth';
+import { getAuth, connectAuthEmulator, signInWithEmailAndPassword, signOut } from 'firebase/auth';
 import { app, useEmulators } from './firebase';
 
 export const auth = getAuth(app);
@@ -12,15 +12,6 @@ if (useEmulators && !(EMULATOR_SENTINEL in globalThis)) {
   connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
 }
 
-export interface Session {
-  user: User | null;
-  status: 'loading' | 'ready';
-}
-
-export function subscribeToSession(onChange: (session: Session) => void) {
-  return onAuthStateChanged(auth, (user) => onChange({ user, status: 'ready' }));
-}
-
 export function signIn(email: string, password: string) {
   return signInWithEmailAndPassword(auth, email, password);
 }

diff --git a/recipe-demo/src/lib/use-recipes.ts b/recipe-demo/src/lib/use-recipes.ts