- add AuthRefreshProvider to refresh auth tokens every 5 minutes

- pull the latest crowdin language artifacts

apps/client/src/providers/auth-refresh.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+
+import { axios } from "../libs/axios";
+import { refreshToken } from "../services/auth/refresh";
+import { useAuthStore } from "../stores/auth";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * The AuthRefreshProvider wrapper is responsible for refreshing
+ * the access token every 5 minutes while the user is authenticated.
+ *
+ * @param children The children to render.
+ */
+export const AuthRefreshProvider = ({ children }: Props) => {
+  const intervalId = useRef<NodeJS.Timeout>();
+  const isLoggedIn = useAuthStore((state) => !!state.user);
+
+  useEffect(() => {
+    if (!isLoggedIn && intervalId.current) {
+      clearInterval(intervalId.current);
+      return;
+    }
+
+    const _refreshToken = () => refreshToken(axios);
+    intervalId.current = setInterval(_refreshToken, 5 * 60 * 1000);
+
+    return () => {
+      clearInterval(intervalId.current);
+    };
+  }, [isLoggedIn]);
+
+  return children;
+};

apps/client/src/providers/index.tsx

@@ -5,6 +5,7 @@ import { Outlet } from "react-router-dom";
 
 import { helmetContext } from "../constants/helmet";
 import { queryClient } from "../libs/query-client";
+import { AuthRefreshProvider } from "./auth-refresh";
 import { DialogProvider } from "./dialog";
 import { LocaleProvider } from "./locale";
 import { ThemeProvider } from "./theme";
@@ -14,15 +15,17 @@ export const Providers = () => (
   <LocaleProvider>
     <HelmetProvider context={helmetContext}>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider>
-          <TooltipProvider>
-            <DialogProvider>
-              <Outlet />
+        <AuthRefreshProvider>
+          <ThemeProvider>
+            <TooltipProvider>
+              <DialogProvider>
+                <Outlet />
 
-              <Toaster />
-            </DialogProvider>
-          </TooltipProvider>
-        </ThemeProvider>
+                <Toaster />
+              </DialogProvider>
+            </TooltipProvider>
+          </ThemeProvider>
+        </AuthRefreshProvider>
       </QueryClientProvider>
     </HelmetProvider>
   </LocaleProvider>