header remove firebase hook

Author: Alessandro100

src/app/App.tsx

@@ -4,7 +4,7 @@ import './App.css';
 import AppRouter from './router/Router';
 import { MemoryRouter } from 'react-router-dom';
 import { Suspense } from 'react';
-import { useAuthReady } from './components/AuthSessionProvider';
+import { useAuthSession } from './components/AuthSessionProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import AppContainer from './AppContainer';
@@ -30,7 +30,7 @@ function buildPathFromNextRouter(
 }
 
 function App({ locale }: AppProps): React.ReactElement {
-  const isAppReady = useAuthReady();
+  const { isAuthReady: isAppReady } = useAuthSession();
 
   const pathname = usePathname();
   const searchParams = useSearchParams();

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

@@ -6,7 +6,7 @@ import {
   type AllFeedsParams,
 } from '../../../services/feeds/utils';
 import { getUserAccessToken } from '../../../services/profile-service';
-import { useAuthReady } from '../../../components/AuthSessionProvider';
+import { useAuthSession } from '../../../components/AuthSessionProvider';
 import {
   getDataTypeParamFromSelectedFeedTypes,
   getInitialSelectedFeedTypes,
@@ -158,7 +158,7 @@ export function useFeedsSearch(searchParams: URLSearchParams): {
   isError: boolean;
   searchLimit: number;
 } {
-  const authReady = useAuthReady();
+  const { isAuthReady: authReady } = useAuthSession();
   const { cache } = useSWRConfig();
   const derivedSearchParams = deriveSearchParams(searchParams);
   const key = authReady ? buildSwrKey(derivedSearchParams) : null;

src/app/components/AuthSessionProvider.spec.tsx

@@ -7,7 +7,7 @@ import {
 } from '@testing-library/react';
 import { configureStore } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
-import { AuthSessionProvider, useAuthReady } from './AuthSessionProvider';
+import { AuthSessionProvider, useAuthSession } from './AuthSessionProvider';
 import { setUserCookieSession } from '../services/session-service';
 import { anonymousLogin } from '../store/profile-reducer';
 
@@ -97,34 +97,34 @@ afterEach(() => {
 });
 
 describe('AuthSessionProvider', () => {
-  describe('useAuthReady', () => {
+  describe('useAuthSession', () => {
     it('returns false before any auth state change', () => {
-      const { result } = renderHook(() => useAuthReady(), { wrapper });
-      expect(result.current).toBe(false);
+      const { result } = renderHook(() => useAuthSession(), { wrapper });
+      expect(result.current.isAuthReady).toBe(false);
     });
 
     it('returns true after onIdTokenChanged fires with a user', async () => {
-      const { result } = renderHook(() => useAuthReady(), {
+      const { result } = renderHook(() => useAuthSession(), {
         wrapper: wrapperWithAuth,
       });
 
       await act(async () => {
         capturedAuthCallback(mockUser);
       });
 
-      expect(result.current).toBe(true);
+      expect(result.current.isAuthReady).toBe(true);
     });
 
     it('returns false after onIdTokenChanged fires with null', async () => {
-      const { result } = renderHook(() => useAuthReady(), {
+      const { result } = renderHook(() => useAuthSession(), {
         wrapper: wrapperWithAuth,
       });
 
       await act(async () => {
         capturedAuthCallback(null);
       });
 
-      expect(result.current).toBe(false);
+      expect(result.current.isAuthReady).toBe(false);
     });
   });
 

src/app/components/AuthSessionProvider.tsx

@@ -14,14 +14,23 @@ import { app } from '../../firebase';
 import { anonymousLogin } from '../store/profile-reducer';
 import { setUserCookieSession } from '../services/session-service';
 
-const AuthReadyContext = createContext(false);
+interface AuthSession {
+  isAuthReady: boolean;
+  email: string | null;
+  isAuthenticated: boolean;
+}
+
+const AuthReadyContext = createContext<AuthSession>({
+  isAuthReady: false,
+  email: null,
+  isAuthenticated: false,
+});
 
 /**
- * Returns true once a Firebase user (anonymous or authenticated) is
- * available. Use this instead of registering your own
- * `onAuthStateChanged` listener.
+ * Returns the current auth session state once Firebase has resolved.
+ * Use this instead of registering your own `onAuthStateChanged` listener.
  */
-export function useAuthReady(): boolean {
+export function useAuthSession(): AuthSession {
   return useContext(AuthReadyContext);
 }
 
@@ -45,7 +54,11 @@ export function AuthSessionProvider({
   children: ReactNode;
 }): ReactElement {
   const dispatch = useDispatch();
-  const [isAuthReady, setIsAuthReady] = useState(false);
+  const [session, setSession] = useState<AuthSession>({
+    isAuthReady: false,
+    email: null,
+    isAuthenticated: false,
+  });
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   useEffect(() => {
@@ -56,7 +69,11 @@ export function AuthSessionProvider({
       }
 
       if (user != null) {
-        setIsAuthReady(true);
+        setSession({
+          isAuthReady: true,
+          email: user.email ?? null,
+          isAuthenticated: !user.isAnonymous,
+        });
         setUserCookieSession().catch(() => {});
 
         // Check every 5 minutes; the cookie lasts 60 minutes, so this ensures renewal well before expiry
@@ -69,7 +86,7 @@ export function AuthSessionProvider({
           5 * 60 * 1000,
         ); // 5 minutes
       } else {
-        setIsAuthReady(false);
+        setSession({ isAuthReady: false, email: null, isAuthenticated: false });
         dispatch(anonymousLogin());
       }
     });
@@ -81,7 +98,7 @@ export function AuthSessionProvider({
   }, [dispatch]);
 
   return (
-    <AuthReadyContext.Provider value={isAuthReady}>
+    <AuthReadyContext.Provider value={session}>
       {children}
     </AuthReadyContext.Provider>
   );

src/app/components/Header.tsx

@@ -43,7 +43,7 @@ import { animatedButtonStyling } from './Header.style';
 import ThemeToggle from './ThemeToggle';
 import { useTranslations, useLocale } from 'next-intl';
 import Link from 'next/link';
-import { app } from '../../firebase';
+import { useAuthSession } from './AuthSessionProvider';
 
 // Lazy load components not needed for initial render
 const LogoutConfirmModal = dynamic(
@@ -74,9 +74,7 @@ function useClientSearchParams(): URLSearchParams | null {
 }
 
 export default function DrawerAppBar(): React.ReactElement {
-  const [currentUser, setCurrentUser] = React.useState<
-    { email: string; isAuthenticated: boolean } | undefined
-  >(undefined);
+  const { email: userEmail, isAuthenticated } = useAuthSession();
   const clientSearchParams = useClientSearchParams();
   const hasTransitFeedsRedirectParam =
     clientSearchParams?.get('utm_source') === 'transitfeeds';
@@ -95,23 +93,6 @@ export default function DrawerAppBar(): React.ReactElement {
   const { config } = useRemoteConfig();
   const t = useTranslations('common');
 
-  React.useEffect(() => {
-    const auth = app.auth();
-    const unsubscribe = auth.onAuthStateChanged(async (user) => {
-      if (user != null) {
-        setCurrentUser({
-          email: user.email ?? '',
-          isAuthenticated: !user.isAnonymous,
-        });
-      } else {
-        setCurrentUser(undefined);
-      }
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
   React.useEffect(() => {
     if (hasTransitFeedsRedirectParam) {
       setHasTransitFeedsRedirect(true);
@@ -128,9 +109,6 @@ export default function DrawerAppBar(): React.ReactElement {
 
   const router = useRouter();
 
-  const isAuthenticated = currentUser != null && currentUser.isAuthenticated;
-  const userEmail = currentUser?.email;
-
   const handleDrawerToggle = (): void => {
     setMobileOpen((prevState) => !prevState);
   };