update auth. deal with migraine

src/app/layout.tsx

@@ -67,7 +67,7 @@ export const metadata: Metadata = {
       { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72'},
       { url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96'},
       { url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144'},
-      { url: '/appicon/icon-192x192.png', type: 'image/png', sizes: '192x192'},
+      { url: '/appicon/icon.png', type: 'image/png', sizes: '192x192'},
       { url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36', media: '(prefers-color-scheme: dark)' },
       { url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48', media: '(prefers-color-scheme: dark)' },
       { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72', media: '(prefers-color-scheme: dark)' },

src/components/context/auth.tsx

@@ -3,8 +3,10 @@
 import React, {
   type ReactNode,
   createContext,
+  useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -41,31 +43,26 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [profile, setProfile] = useState<Profile | null>(null);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [isInitialized, setIsInitialized] = useState(false);
 
-  const fetchUserData = async () => {
+  const fetchingRef = useRef(false);
+
+  const fetchUserData = useCallback(async () => {
+    if (fetchingRef.current) return;
+    fetchingRef.current = true;
     try {
       setIsLoading(true);
       
-      // Get user data
       const userResponse = await getUser();
-      if (!userResponse.success) {
+      const profileResponse = await getProfile();
+
+      if (!userResponse.success || !profileResponse.success) {
         setUser(null);
         setProfile(null);
         setAvatarUrl(null);
         return;
       }
-      
       setUser(userResponse.data);
-
-      // Get profile data
-      const profileResponse = await getProfile();
-      
-      if (!profileResponse.success) {
-        setProfile(null);
-        setAvatarUrl(null);
-        return;
-      }
-
       setProfile(profileResponse.data);
 
       // Get avatar URL if available
@@ -74,16 +71,28 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
           bucket: 'avatars',
           url: profileResponse.data.avatar_url,
         });
+
         if (avatarResponse.success) {
           setAvatarUrl(avatarResponse.data);
-        }
+        } else setAvatarUrl(null);
       }
+
     } catch (error) {
-      toast.error('Failed to load user data');
+      console.error(
+        'Auth fetch error: ',
+        error instanceof Error ?
+          `${error.message}` :
+          'Failed to load user data!'
+      );
+      if (!isInitialized) {
+        toast.error('Failed to load user data!');
+      }
     } finally {
       setIsLoading(false);
+      setIsInitialized(true);
+      fetchingRef.current = false;
     }
-  };
+  }, [isInitialized]);
 
   useEffect(() => {
     const supabase = createClient();
@@ -95,7 +104,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const {
       data: { subscription },
     } = supabase.auth.onAuthStateChange(async (event, session) => {
-      if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
+      if (event === 'SIGNED_IN') {
         await fetchUserData();
       } else if (event === 'SIGNED_OUT') {
         setUser(null);
@@ -108,7 +117,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     return () => {
       subscription.unsubscribe();
     };
-  }, []);
+  }, [fetchUserData]);
 
   const updateProfile = async (data: {
     full_name?: string;
@@ -116,9 +125,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     avatar_url?: string;
   }) => {
     try {
-      setIsLoading(true);
       const result = await updateProfileAction(data);
-      
       if (!result.success) {
         throw new Error(result.error ?? 'Failed to update profile');
       }

src/components/default/navigation/index.tsx

@@ -18,7 +18,7 @@ const Navigation = () => {
       >
         <div className='flex gap-5 items-center font-semibold'>
           <Link className='flex flex-row my-auto gap-2' href='/'>
-            <Image src='/icons/favicon-96x96.png' alt='T3 Logo' width={50} height={50} />
+            <Image src='/favicon-96x96.png' alt='T3 Logo' width={50} height={50} />
             <h1 className='my-auto text-2xl'>T3 Supabase Template</h1>
           </Link>
           <div className='flex items-center gap-2'>