diff --git a/frontend/src/pages/login-page.tsx b/frontend/src/pages/login-page.tsx index 9ce7be7..8fae53f 100644 --- a/frontend/src/pages/login-page.tsx +++ b/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(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 ; } diff --git a/frontend/src/pages/logout-page.tsx b/frontend/src/pages/logout-page.tsx index 1229a35..6b52ed2 100644 --- a/frontend/src/pages/logout-page.tsx +++ b/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(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 ; } diff --git a/frontend/src/pages/totp-page.tsx b/frontend/src/pages/totp-page.tsx index 4e0bdb1..3306b52 100644 --- a/frontend/src/pages/totp-page.tsx +++ b/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(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 ; }