implemented session

app/client/main.tsx

@@ -4,11 +4,12 @@ import '@client/assets/styles/nerd-fonts-icons.css';
 import { Provider } from '@client/components/ui/provider';
 import { Toaster } from '@client/components/ui/toaster';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
-import { StrictMode } from 'react';
+import { StrictMode, createContext, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 
 // TanStackRouter - Import the generated route tree
 import { routeTree } from './routeTree.gen';
+import { Session } from 'inspector';
 
 // Create a new router instance
 const router = createRouter({ routeTree });
@@ -20,28 +21,52 @@ declare module '@tanstack/react-router' {
   }
 }
 
-// Apollo
+// Environment
 const HOST = import.meta.env.VITE_HOST || 'localhost';
 const PORT = import.meta.env.VITE_PORT || '3000';
 const uri = `http://${HOST}:${PORT}/graphql`;
 
-const client = new ApolloClient({
-  uri,
-  cache: new InMemoryCache(),
-  connectToDevTools: true
-});
+// Auth context
+export const AuthContext = createContext<any>(null);
+
+function App() {
+  const sessionRaw = localStorage.getItem('session');
+  const session: Session | null = sessionRaw !== null ? JSON.parse(sessionRaw) : null;
+
+  const [authHeaders, setAuthHeaders] = useState<Session | null>(session);
+  const AuthProvider = AuthContext.Provider;
+
+  const client = new ApolloClient({
+    uri,
+    cache: new InMemoryCache(),
+    connectToDevTools: true,
+    headers: authHeaders != null ? { authorization: JSON.stringify(authHeaders) } : undefined
+  });
+
+  return (
+    <StrictMode>
+      <AuthProvider
+        value={{
+          authHeaders,
+          setHeaders: (session: Session) => {
+            localStorage.setItem('session', JSON.stringify(session));
+            setAuthHeaders(session);
+          }
+        }}
+      >
+        <ApolloProvider client={client}>
+          <Provider>
+            <Toaster />
+            <RouterProvider router={router} />
+          </Provider>
+        </ApolloProvider>
+      </AuthProvider>
+    </StrictMode>
+  );
+}
 
 const rootElement = document.getElementById('root')!;
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
-  root.render(
-    <StrictMode>
-      <ApolloProvider client={client}>
-        <Provider>
-          <Toaster />
-          <RouterProvider router={router} />
-        </Provider>
-      </ApolloProvider>
-    </StrictMode>
-  );
+  root.render(<App />);
 }