Use server actions instead of client-side API calls

apps/link/app/_components/CSRFProvider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FC, PropsWithChildren, useEffect } from "react";
+import { useSession } from "next-auth/react";
+
+export const CSRFProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { data: session, status, update } = useSession();
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      if (status === "authenticated") {
+        const response = await fetch("/api/v1/users/me");
+        const token = response.headers.get("CSRF-Token");
+        update({ csrfToken: token });
+        console.log({ token });
+      }
+    }, 30000);
+
+    return () => clearInterval(interval);
+  }, [session, status, update]);
+
+  return children;
+};

apps/link/app/_components/MultiProvider.tsx

@@ -5,109 +5,30 @@ import { CssBaseline } from "@mui/material";
 import { CookiesProvider } from "react-cookie";
 import { SessionProvider } from "next-auth/react";
 import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
-import { SWRConfig } from "swr";
-import { GraphQLClient } from "graphql-request";
 import { I18n } from "react-polyglot";
 import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
 import { LocalizationProvider } from "@mui/x-date-pickers-pro";
 import { LicenseInfo } from "@mui/x-license";
 import { locales, LeafcutterProvider } from "@link-stack/leafcutter-ui";
+import { CSRFProvider } from "./CSRFProvider";
 
 LicenseInfo.setLicenseKey(
   "c787ac6613c5f2aa0494c4285fe3e9f2Tz04OTY1NyxFPTE3NDYzNDE0ODkwMDAsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI=",
 );
 
 export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [csrfToken, setCsrfToken] = useState("");
   const origin =
     typeof window !== "undefined" && window.location.origin
       ? window.location.origin
       : null;
-  const client = new GraphQLClient(`${origin}/zammad/graphql`);
   const messages: any = { en: locales.en, fr: locales.fr };
   const locale = "en";
-  const fetchAndCheckAuth = async ({
-    document,
-    variables,
-    url,
-    method,
-    body,
-  }: any) => {
-    const requestHeaders = {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      "X-CSRF-Token": csrfToken,
-    };
-    let responseData = null;
-    let responseHeaders = new Headers();
-    let responseStatus = null;
-
-    if (document) {
-      const { data, headers, status } = await client.rawRequest(
-        document,
-        variables,
-        requestHeaders,
-      );
-      responseData = data;
-      responseHeaders = headers;
-      responseStatus = status;
-    } else {
-      const res = await fetch(url, {
-        method,
-        headers: requestHeaders,
-        body,
-      });
-      responseData = await res.json();
-      responseHeaders = res.headers;
-      responseStatus = res.status;
-    }
-
-    if (responseStatus !== 200) {
-      const res = await fetch("/zammad/auth/sso", {
-        method: "GET",
-        redirect: "manual",
-      });
-
-      console.log({ checkAuth: res });
-
-      return null;
-    }
-
-    const token = responseHeaders.get("CSRF-Token");
-    setCsrfToken(token);
-
-    return responseData;
-  };
-
-  const multiFetcher = async ({
-    document,
-    variables,
-    url,
-    method,
-    body,
-  }: any) => {
-    let checks = 0;
-    let data = null;
-
-    while (!data && checks < 2) {
-      data = await fetchAndCheckAuth({
-        document,
-        variables,
-        url,
-        method,
-        body,
-      });
-      checks++;
-    }
-
-    return data;
-  };
 
   return (
     <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
       <CssBaseline />
-      <SWRConfig value={{ fetcher: multiFetcher }}>
-        <SessionProvider>
+      <SessionProvider>
+        <CSRFProvider>
           <CookiesProvider>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <I18n locale={locale} messages={messages[locale]}>
@@ -115,8 +36,8 @@ export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
               </I18n>
             </LocalizationProvider>
           </CookiesProvider>
-        </SessionProvider>
-      </SWRConfig>
+        </CSRFProvider>
+      </SessionProvider>
     </NextAppDirEmotionCacheProvider>
   );
 };