fix: use useeffect to cleanup timeout

frontend/src/pages/login-page.tsx

@@ -17,7 +17,7 @@ import { useIsMounted } from "@/lib/hooks/use-is-mounted";
 import { LoginSchema } from "@/schemas/login-schema";
 import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
@@ -30,6 +30,8 @@ export const LoginPage = () => {
   const { t } = useTranslation();
   const isMounted = useIsMounted();
 
+  const redirectTimer = useRef<number | null>(null);
+
   const searchParams = new URLSearchParams(search);
   const redirectUri = searchParams.get("redirect_uri");
 
@@ -49,11 +51,9 @@ export const LoginPage = () => {
         description: t("loginOauthSuccessSubtitle"),
       });
 
-      const redirect = setTimeout(() => {
+      redirectTimer.current = window.setTimeout(() => {
         window.location.replace(data.data.url);
       }, 500);
-
-      return () => clearTimeout(redirect);
     },
     onError: () => {
       toast.error(t("loginOauthFailTitle"), {
@@ -77,13 +77,11 @@ export const LoginPage = () => {
         description: t("loginSuccessSubtitle"),
       });
 
-      const redirect = setTimeout(() => {
+      redirectTimer.current = window.setTimeout(() => {
         window.location.replace(
           `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
         );
       }, 500);
-
-      return () => clearTimeout(redirect);
     },
     onError: (error: AxiosError) => {
       toast.error(t("loginFailTitle"), {
@@ -108,6 +106,13 @@ export const LoginPage = () => {
     }
   }, []);
 
+  useEffect(
+    () => () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    },
+    [],
+  );
+
   if (isLoggedIn) {
     return <Navigate to="/logout" />;
   }

frontend/src/pages/logout-page.tsx

@@ -11,6 +11,7 @@ import { useUserContext } from "@/context/user-context";
 import { capitalize } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
+import { useEffect, useRef } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Navigate } from "react-router";
 import { toast } from "sonner";
@@ -20,6 +21,8 @@ export const LogoutPage = () => {
   const { genericName } = useAppContext();
   const { t } = useTranslation();
 
+  const redirectTimer = useRef<number | null>(null);
+
   const logoutMutation = useMutation({
     mutationFn: () => axios.post("/api/user/logout"),
     mutationKey: ["logout"],
@@ -28,11 +31,9 @@ export const LogoutPage = () => {
         description: t("logoutSuccessSubtitle"),
       });
 
-      const redirect = setTimeout(() => {
+      redirectTimer.current = window.setTimeout(() => {
         window.location.replace("/login");
       }, 500);
-
-      return () => clearTimeout(redirect);
     },
     onError: () => {
       toast.error(t("logoutFailTitle"), {
@@ -41,6 +42,13 @@ export const LogoutPage = () => {
     },
   });
 
+  useEffect(
+    () => () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    },
+    [],
+  );
+
   if (!isLoggedIn) {
     return <Navigate to="/login" />;
   }

frontend/src/pages/totp-page.tsx

@@ -12,7 +12,7 @@ import { useUserContext } from "@/context/user-context";
 import { TotpSchema } from "@/schemas/totp-schema";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
-import { useId } from "react";
+import { useEffect, useId, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
@@ -23,6 +23,8 @@ export const TotpPage = () => {
   const { search } = useLocation();
   const formId = useId();
 
+  const redirectTimer = useRef<number | null>(null);
+
   const searchParams = new URLSearchParams(search);
   const redirectUri = searchParams.get("redirect_uri");
 
@@ -34,13 +36,11 @@ export const TotpPage = () => {
         description: t("totpSuccessSubtitle"),
       });
 
-      const redirect = setTimeout(() => {
+      redirectTimer.current = window.setTimeout(() => {
         window.location.replace(
           `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
         );
       }, 500);
-
-      return () => clearTimeout(redirect);
     },
     onError: () => {
       toast.error(t("totpFailTitle"), {
@@ -49,6 +49,13 @@ export const TotpPage = () => {
     },
   });
 
+  useEffect(
+    () => () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    },
+    [],
+  );
+
   if (!totpPending) {
     return <Navigate to="/" />;
   }