fix: update session after each change

pedrolivaresanchez · Nov 8, 2024 · 4c738b4 · 4c738b4
1 parent b13fc8e
commit 4c738b4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import './globals.css';
 import 'leaflet/dist/leaflet.css';
 import SidebarLayout from '@/components/layout/SidebarLayout';
 import { ModalProvider } from '@/context/ModalProvider';
-import { createClient } from '@/lib/supabase/server';
 import { SessionProvider } from '@/context/SessionProvider';
 import { Toaster } from 'sonner';
 import { PropsWithChildren } from 'react';
@@ -13,19 +12,12 @@ export const metadata = {
   description: 'Sistema de coordinación para emergencias en la Comunidad Valenciana',
 };
 
-const getSession = async () => {
-  const supabase = await createClient();
-  const { data, error } = await supabase.auth.getUser();
-  return data;
-};
-
 export default async function RootLayout({ children }: PropsWithChildren) {
-  const session = await getSession();
   return (
     <html lang="es">
       <body suppressHydrationWarning={true}>
         <Toaster position="bottom-left" richColors />
-        <SessionProvider session={session}>
+        <SessionProvider>
           <QueryClientProvider>
             <ModalProvider>
               <SidebarLayout>{children}</SidebarLayout>

diff --git a/src/context/SessionProvider.tsx b/src/context/SessionProvider.tsx
@@ -1,17 +1,37 @@
 'use client';
-import React, { createContext, ReactNode, useContext } from 'react';
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { User } from '@supabase/auth-js';
+import { supabase } from '@/lib/supabase/client';
 
 const SessionContext = createContext<UserSession>({ user: null });
 
 type UserSession = { user: User } | { user: null };
 
 type SessionProviderProps = {
   children: ReactNode;
-  session: UserSession;
 };
 
-export const SessionProvider: React.FC<SessionProviderProps> = ({ children, session }) => {
+export const SessionProvider: React.FC<SessionProviderProps> = ({ children }) => {
+  const [session, setSession] = useState<UserSession>(() => ({ user: null }));
+
+  useEffect(() => {
+    // Fetch initial session
+    const fetchSession = async () => {
+      const { data } = await supabase.auth.getUser();
+      setSession(data);
+    };
+    fetchSession();
+
+    // Subscribe to session changes
+    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
+      setSession(() => ({ user: session?.user ?? null })); // Update the session in state
+    });
+
+    // Clean up listener on component unmount
+    return () => {
+      authListener?.subscription.unsubscribe();
+    };
+  }, []);
   return <SessionContext.Provider value={session}>{children}</SessionContext.Provider>;
 };