add an iterceptor to auto logout user if the session is expired

Author: torkashvandmt

hooks/useFetchInterceptor.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { signOut } from 'next-auth/react';
+
+const useFetchInterceptor = () => {
+  useEffect(() => {
+    const handleResponse = (response: Response) => {
+      if (response.status === 401) {
+        const currentUrl = window.location.href;
+        signOut({ callbackUrl: `/api/auth/signin?error=SessionRequired&callbackUrl=${encodeURIComponent(currentUrl)}` });
+      }
+      return response;
+    };
+
+    const originalFetch = global.fetch.bind(global);
+
+    global.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+      const response = await originalFetch(input, init);
+      return handleResponse(response);
+    };
+
+    return () => {
+      global.fetch = originalFetch;
+    };
+  }, []);
+};
+
+export default useFetchInterceptor;

pages/_app.tsx

@@ -33,6 +33,7 @@ import { getInitialOrchestratorConfig } from '@/configuration';
 import { TranslationsProvider } from '@/translations/translationsProvider';
 
 import '../font/inter.css';
+import useFetchInterceptor from "@/hooks/useFetchInterceptor";
 
 type AppOwnProps = { orchestratorConfig: OrchestratorConfig };
 
@@ -52,6 +53,7 @@ function CustomApp({
 }: AppProps & AppOwnProps) {
     const router = useRouter();
     const [queryClient] = useState(() => new QueryClient(queryClientConfig));
+    useFetchInterceptor();
 
     const [themeMode, setThemeMode] = useState<EuiThemeColorMode>(
         ColorModes.LIGHT,