centralized the auth state change

Author: Alessandro100

src/app/App.tsx

@@ -3,10 +3,8 @@
 import './App.css';
 import AppRouter from './router/Router';
 import { MemoryRouter } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
-import { anonymousLogin } from './store/profile-reducer';
-import { app } from '../firebase';
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense } from 'react';
+import { useAuthReady } from './components/AuthSessionProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import AppContainer from './AppContainer';
@@ -32,29 +30,13 @@ function buildPathFromNextRouter(
 }
 
 function App({ locale }: AppProps): React.ReactElement {
-  const dispatch = useDispatch();
-  const [isAppReady, setIsAppReady] = useState(false);
+  const isAppReady = useAuthReady();
 
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   const initialPath = buildPathFromNextRouter(pathname, searchParams, locale);
 
-  useEffect(() => {
-    const unsubscribe = app.auth().onAuthStateChanged((user) => {
-      if (user != null) {
-        setIsAppReady(true);
-      } else {
-        setIsAppReady(false);
-        dispatch(anonymousLogin());
-      }
-    });
-    dispatch(anonymousLogin());
-    return () => {
-      unsubscribe();
-    };
-  }, [dispatch]);
-
   return (
     <Suspense>
       <LocalizationProvider dateAdapter={AdapterDayjs}>

src/app/[locale]/feeds/lib/useFeedsSearch.ts

@@ -1,13 +1,12 @@
 'use client';
-import { useEffect, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { searchFeeds } from '../../../services/feeds';
 import {
   type AllFeedsType,
   type AllFeedsParams,
 } from '../../../services/feeds/utils';
 import { getUserAccessToken } from '../../../services/profile-service';
-import { app } from '../../../../firebase';
+import { useAuthReady } from '../../../components/AuthSessionProvider';
 import {
   getDataTypeParamFromSelectedFeedTypes,
   getInitialSelectedFeedTypes,
@@ -18,39 +17,6 @@ const SEARCH_LIMIT = 20;
 // This is for client-side caching
 const CACHE_TTL_MS = 60 * 30 * 1000; // 30 minutes - controls how long search results are cached in SWR
 
-/**
- * Ensures a Firebase user exists (anonymous or authenticated) before
- * SWR attempts to fetch. If no user is signed in, triggers anonymous
- * sign-in — the same thing App.tsx does for legacy React Router pages.
- * This is needed for the access token
- *
- * TODO: Revisit this logic to be used at a more global level without slowing down the initial load of all pages that don't require auth (e.g. about, contact). For example, we could move this logic to a context provider that's used only on the feeds page and its children.
- */
-function useFirebaseAuthReady(): boolean {
-  const [isReady, setIsReady] = useState(() => app.auth().currentUser !== null);
-
-  useEffect(() => {
-    const unsubscribe = app.auth().onAuthStateChanged((user) => {
-      if (user !== null) {
-        setIsReady(true);
-      } else {
-        // No user — trigger anonymous sign-in (mirrors App.tsx behavior)
-        setIsReady(false);
-        app
-          .auth()
-          .signInAnonymously()
-          .catch(() => {
-            // Auth listener will handle the state update on success;
-            // if sign-in fails, isReady stays false and SWR won't fetch.
-          });
-      }
-    });
-    return unsubscribe;
-  }, []);
-
-  return isReady;
-}
-
 /**
  * Derives all API query params from the URL search params.
  * This is the single source of truth — no duplicated React state.
@@ -192,7 +158,7 @@ export function useFeedsSearch(searchParams: URLSearchParams): {
   isError: boolean;
   searchLimit: number;
 } {
-  const authReady = useFirebaseAuthReady();
+  const authReady = useAuthReady();
   const { cache } = useSWRConfig();
   const derivedSearchParams = deriveSearchParams(searchParams);
   const key = authReady ? buildSwrKey(derivedSearchParams) : null;

src/app/providers.tsx

@@ -8,6 +8,7 @@ import { type RemoteConfigValues } from './interface/RemoteConfig';
 // Look into this provider and see if it's client blocking. Niche provider might be able to isolate for single use
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { AuthSessionProvider } from './components/AuthSessionProvider';
 
 interface ProvidersProps {
   children: React.ReactNode;
@@ -35,7 +36,7 @@ export function Providers({
     <ContextProviders>
       <RemoteConfigProvider config={remoteConfig}>
         <LocalizationProvider dateAdapter={AdapterDayjs}>
-          {children}
+          <AuthSessionProvider>{children}</AuthSessionProvider>
         </LocalizationProvider>
       </RemoteConfigProvider>
     </ContextProviders>