Working on Auth flows. Struggling with getting client and server to both update when signing in or out.

src/components/context/auth.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
 import { getUser, getProfile, updateProfile as updateProfileAction, getSignedUrl } from '@/lib/actions';
-import type { User, Profile } from '@/utils/supabase';
+import { type User, type Profile, createClient } from '@/utils/supabase';
 import { toast } from 'sonner';
 
 type AuthContextType = {
@@ -72,15 +72,32 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   };
 
   useEffect(() => {
+    const supabase = createClient();
     fetchUserData().catch((error) => {
       console.error('Error fetching user data:', error);
     });
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(async (event, session) => {
+      if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
+        await fetchUserData();
+      } else if (event === 'SIGNED_OUT') {
+        setUser(null);
+        setProfile(null);
+        setAvatarUrl(null);
+        setIsLoading(false);
+      }
+    });
     
     const intervalId = setInterval(() => {
       void fetchUserData();
-    }, 30 * 60 * 1000);
+    }, 1 * 60 * 1000);
     
-    return () => clearInterval(intervalId);
+    return () => {
+      subscription.unsubscribe();
+      clearInterval(intervalId);
+    };
   }, []);
 
   const updateProfile = async (data: {