refactor: Update import paths for RootProvider and AuthProvider

.eslintignore

@@ -3,4 +3,4 @@ dist
 coverage
 .github
 .husky
-*.config.js
+*.config.js

frontend/.eslintrc.json

@@ -1,4 +1,8 @@
 {
   "extends": "next/core-web-vitals",
-  "ignorePatterns": ["src/graphql/type.ts", "src/graphql/**/*"]
+  "ignorePatterns": [
+    "src/graphql/type.ts",
+    "src/graphql/**/*",
+    "src/components/ui/**/*"
+  ]
 }

frontend/next.config.mjs

@@ -1,29 +1,28 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+  reactStrictMode: true,
   webpack: (config, { isServer }) => {
-        // Fixes npm packages that depend on `fs` module
-        if (!isServer) {
-          config.resolve.fallback = {
-            ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
-              // by next.js will be dropped. Doesn't make much sense, but how it is
-            fs: false, // the solution
-            module: false,
-            perf_hooks: false,
-          };
-        }
-
-        return config
-      },
-      typescript: {
-        // !! WARN !!
-        // Dangerously allow production builds to successfully complete even if
-        // your project has type errors.
-        // !! WARN !!
-        ignoreBuildErrors: true,
-      },
-};
-
+    // Fixes npm packages that depend on `fs` module
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
+        // by next.js will be dropped. Doesn't make much sense, but how it is
+        fs: false, // the solution
+        module: false,
+        perf_hooks: false,
+      };
+    }
 
+    return config;
+  },
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true,
+  },
+};
 
 export default nextConfig;

frontend/src/app/providers/AuthProvider.tsx

@@ -0,0 +1,128 @@
+import { usePathname, useRouter } from 'next/navigation';
+import { useQuery } from '@apollo/client';
+import { CHECK_TOKEN_QUERY } from '@/graphql/request';
+import { LocalStore } from '@/lib/storage';
+import { useEffect, useState, useRef } from 'react';
+import { useTheme } from 'next-themes';
+import { Loader2 } from 'lucide-react';
+import { LoadingPage } from '@/components/global-loading';
+
+const VALIDATION_TIMEOUT = 5000;
+
+interface AuthProviderProps {
+  children: React.ReactNode;
+}
+
+export const AuthProvider = ({ children }: AuthProviderProps) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isAuthorized, setIsAuthorized] = useState<boolean>(false);
+  const [isChecking, setIsChecking] = useState(true);
+  const publicRoutes = ['/login', '/register'];
+  const isRedirectingRef = useRef(false);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const { refetch: checkToken } = useQuery(CHECK_TOKEN_QUERY, {
+    skip: true,
+  });
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const validateToken = async () => {
+      if (isRedirectingRef.current) {
+        return;
+      }
+
+      if (publicRoutes.includes(pathname)) {
+        if (isMounted) {
+          setIsAuthorized(true);
+          setIsChecking(false);
+        }
+        return;
+      }
+
+      if (isMounted) {
+        setIsChecking(true);
+      }
+
+      const token = localStorage.getItem(LocalStore.accessToken);
+
+      if (!token) {
+        isRedirectingRef.current = true;
+        router.replace('/login');
+        if (isMounted) {
+          setIsChecking(false);
+        }
+        return;
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        if (isMounted && !isRedirectingRef.current) {
+          console.error('Token validation timeout');
+          localStorage.removeItem(LocalStore.accessToken);
+          isRedirectingRef.current = true;
+          router.replace('/login');
+          setIsChecking(false);
+        }
+      }, VALIDATION_TIMEOUT);
+
+      try {
+        const { data } = await checkToken({
+          input: { token },
+        });
+
+        if (isMounted) {
+          if (!data?.checkToken) {
+            localStorage.removeItem(LocalStore.accessToken);
+            isRedirectingRef.current = true;
+            router.replace('/login');
+            setIsAuthorized(false);
+          } else {
+            setIsAuthorized(true);
+          }
+        }
+      } catch (error) {
+        if (isMounted && !isRedirectingRef.current) {
+          console.error('Token validation error:', error);
+          localStorage.removeItem(LocalStore.accessToken);
+          isRedirectingRef.current = true;
+          router.replace('/login');
+          setIsAuthorized(false);
+        }
+      } finally {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        if (isMounted) {
+          setIsChecking(false);
+        }
+      }
+    };
+
+    validateToken();
+
+    return () => {
+      isMounted = false;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [pathname]);
+
+  useEffect(() => {
+    if (publicRoutes.includes(pathname)) {
+      isRedirectingRef.current = false;
+    }
+  }, [pathname]);
+
+  if (publicRoutes.includes(pathname)) {
+    return children;
+  }
+
+  if (isChecking) {
+    return <LoadingPage />;
+  }
+
+  return isAuthorized ? children : <LoadingPage />;
+};

frontend/src/app/providers/BaseProvider.tsx

@@ -4,7 +4,7 @@ import client from '@/lib/client';
 import { ApolloProvider } from '@apollo/client';
 import { ThemeProvider } from 'next-themes';
 import { Toaster } from 'sonner';
-import { AuthProvider } from '../AuthProvider';
+import { AuthProvider } from './AuthProvider';
 
 interface ProvidersProps {
   children: React.ReactNode;
@@ -13,13 +13,13 @@ interface ProvidersProps {
 // Base Provider for the app
 export function BaseProviders({ children }: ProvidersProps) {
   return (
-    <ApolloProvider client={client}>
-      <AuthProvider>
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+      <ApolloProvider client={client}>
+        <AuthProvider>
           {children}
           <Toaster position="top-right" />
-        </ThemeProvider>
-      </AuthProvider>
-    </ApolloProvider>
+        </AuthProvider>
+      </ApolloProvider>
+    </ThemeProvider>
   );
 }