refactor: Move auto-refresh token logic to a more appropriate location in useAuth hook

src/hooks/useAuth.js

@@ -12,21 +12,6 @@ export const AuthProvider = ({ children }) => {
   const [isRefreshing, setIsRefreshing] = useState(false);
   const navigate = useNavigate();
 
-  // Auto-refresh token when it's about to expire
-  useEffect(() => {
-    const refreshInterval = setInterval(() => {
-      if (authTokens?.access) {
-        const { exp } = parseJwt(authTokens.access);
-        // Refresh token if it expires in less than 5 minutes
-        if (exp * 1000 - Date.now() < 300000) {
-          refreshToken();
-        }
-      }
-    }, 60000); // Check every minute
-
-    return () => clearInterval(refreshInterval);
-  }, [authTokens]);
-
   const parseJwt = (token) => {
     try {
       return JSON.parse(atob(token.split('.')[1]));
@@ -87,6 +72,21 @@ export const AuthProvider = ({ children }) => {
     }
   }, [authTokens, isRefreshing, setAuthTokens, logout]);
 
+  // Auto-refresh token when it's about to expire
+  useEffect(() => {
+    const refreshInterval = setInterval(() => {
+      if (authTokens?.access) {
+        const { exp } = parseJwt(authTokens.access);
+        // Refresh token if it expires in less than 5 minutes
+        if (exp * 1000 - Date.now() < 300000) {
+          refreshToken();
+        }
+      }
+    }, 60000); // Check every minute
+
+    return () => clearInterval(refreshInterval);
+  }, [authTokens, refreshToken]);
+
   const getAccessToken = useCallback(async () => {
     if (!authTokens?.access) return null;