fix middleware auth

Author: alrocar

dashboard/ai-analytics/src/app/components/RootLayoutContent.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { useTinybirdToken } from '@/providers/TinybirdProvider';
+import { useModal } from '../context/ModalContext';
+import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut';
+import CostPredictionModal from './CostPredictionModal';
+
+interface RootLayoutContentProps {
+  children: ReactNode;
+  initialToken: string;
+  initialOrgName: string;
+}
+
+export function RootLayoutContent({ children, initialToken, initialOrgName }: RootLayoutContentProps) {
+  const { setToken, setOrgName } = useTinybirdToken();
+
+  // Set the initial values from the server
+  setToken(initialToken);
+  setOrgName(initialOrgName);
+
+  return (
+    <>
+      {children}
+      <ModalController filters={{}} />
+    </>
+  );
+}
+
+function ModalController({ filters }: { filters: Record<string, string> }) {
+  const { isCostPredictionOpen, openCostPrediction, closeCostPrediction } = useModal();
+
+  useKeyboardShortcut('k', () => {
+    if (!isCostPredictionOpen) {
+      openCostPrediction();
+    }
+  }, true);
+
+  return (
+    <CostPredictionModal
+      isOpen={isCostPredictionOpen}
+      onClose={closeCostPrediction}
+      currentFilters={filters}
+    />
+  );
+} 

dashboard/ai-analytics/src/app/layout.tsx

@@ -1,94 +1,31 @@
-'use client'
-import { useEffect, useState } from 'react'
-import { Inter } from "next/font/google"
-import "./globals.css"
-import { TinybirdProvider } from '@/providers/TinybirdProvider'
-import { ClerkProvider } from '@clerk/nextjs'
-import { useTinybirdToken } from '@/providers/TinybirdProvider'
-import { ModalProvider } from './context/ModalContext'
-import CostPredictionModal from './components/CostPredictionModal'
-import { useModal } from './context/ModalContext'
-import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut'
+import { headers } from 'next/headers';
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { TinybirdProvider } from '@/providers/TinybirdProvider';
+import { ClerkProvider } from '@clerk/nextjs';
+import { ModalProvider } from './context/ModalContext';
+import { RootLayoutContent } from './components/RootLayoutContent';
 
-const inter = Inter({ subsets: ["latin"] })
+const inter = Inter({ subsets: ["latin"] });
 
-function RootLayoutContent({ children }: { children: React.ReactNode }) {
-  const { setToken, setOrgName } = useTinybirdToken()
-  const [isReady, setIsReady] = useState(false)
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const headersList = await headers();
+  const token = headersList.get('x-tinybird-token') || '';
+  const orgName = headersList.get('x-org-name') || '';
 
-  useEffect(() => {
-    let isMounted = true
-    
-    const fetchToken = async () => {
-      try {
-        const response = await fetch(window.location.pathname)
-        if (!isMounted) return
-        
-        const token = response.headers.get('x-tinybird-token')
-        const orgName = response.headers.get('x-org-name')
-        
-        if (token) {
-          setToken(token)
-          setOrgName(orgName || '')
-        }
-        
-        setIsReady(true)
-      } catch (error) {
-        console.error('Error fetching token:', error)
-        if (isMounted) setIsReady(true)
-      }
-    }
-    
-    fetchToken()
-    
-    return () => {
-      isMounted = false
-    }
-  }, []) // Empty dependency array to run only once
-
-  if (!isReady) return <div>Loading...</div>
-
-  return (
-    <>
-      {children}
-    </>
-  )
-}
-
-function ModalController({ filters }: { filters: Record<string, string> }) {
-  const { isCostPredictionOpen, openCostPrediction, closeCostPrediction } = useModal()
-
-  // Use 'k' with modifier key (Cmd/Ctrl)
-  useKeyboardShortcut('k', () => {
-    if (!isCostPredictionOpen) {
-      openCostPrediction();
-    }
-  }, true)
-
-  return (
-    <CostPredictionModal
-      isOpen={isCostPredictionOpen}
-      onClose={closeCostPrediction}
-      currentFilters={filters}
-    />
-  )
-}
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className="dark">
       <body className={inter.className}>
         <ClerkProvider>
           <TinybirdProvider>
             <ModalProvider>
-              <RootLayoutContent>
+              <RootLayoutContent initialToken={token} initialOrgName={orgName}>
                 {children}
-                <ModalController filters={{}} />
               </RootLayoutContent>
             </ModalProvider>
           </TinybirdProvider>
         </ClerkProvider>
       </body>
     </html>
-  )
+  );
 }

dashboard/ai-analytics/src/providers/TinybirdProvider.tsx

@@ -11,14 +11,16 @@ interface TinybirdContextType {
 }
 
 const TinybirdContext = createContext<TinybirdContextType | null>(null);
-
 const queryClient = new QueryClient();
 
-export function TinybirdProvider({ children }: { children: ReactNode }) {
+export function TinybirdProvider({ 
+  children,
+}: { 
+  children: ReactNode;
+}) {
   const [token, setTokenState] = useState<string | null>(null);
   const [orgName, setOrgNameState] = useState<string | null>(null);
 
-  // Memoize these functions so they don't change on every render
   const setToken = useCallback((newToken: string) => {
     setTokenState(newToken);
   }, []);
@@ -27,10 +29,12 @@ export function TinybirdProvider({ children }: { children: ReactNode }) {
     setOrgNameState(newOrgName);
   }, []);
 
-  // Create a stable context value
-  const contextValue = useMemo(() => {
-    return { token, orgName, setToken, setOrgName };
-  }, [token, orgName, setToken, setOrgName]);
+  const contextValue = useMemo(() => ({
+    token,
+    orgName,
+    setToken,
+    setOrgName
+  }), [token, orgName, setToken, setOrgName]);
 
   return (
     <TinybirdContext.Provider value={contextValue}>
@@ -39,12 +43,12 @@ export function TinybirdProvider({ children }: { children: ReactNode }) {
       </QueryClientProvider>
     </TinybirdContext.Provider>
   );
-}
+} 
 
 export function useTinybirdToken() {
   const context = useContext(TinybirdContext);
   if (!context) {
-    throw new Error('useTinybirdToken must be used within TinybirdProvider');
+    throw new Error('useTinybirdToken must be used within a TinybirdProvider');
   }
   return context;
-} 
+}