feat: invalid domain warning (#332)

* wip

* refactor: update domain warning layout

* i18n: add domain warning translations

* refactor: rework hooks usage

* feat: clear timeouts

* fix: use useeffect to cleanup timeout

* refactor: rework redirects and history storage

* refactor: rename domain to root domain

frontend/src/pages/continue-page.tsx

@@ -11,60 +11,101 @@ import { useUserContext } from "@/context/user-context";
 import { isValidUrl } from "@/lib/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { Navigate, useLocation, useNavigate } from "react-router";
-import DOMPurify from "dompurify";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export const ContinuePage = () => {
+  const { rootDomain } = useAppContext();
   const { isLoggedIn } = useUserContext();
-
-  if (!isLoggedIn) {
-    return <Navigate to="/login" />;
-  }
-
-  const { domain, disableContinue } = useAppContext();
   const { search } = useLocation();
-  const [loading, setLoading] = useState(false);
-
-  const searchParams = new URLSearchParams(search);
-  const redirectURI = searchParams.get("redirect_uri");
-
-  if (!redirectURI) {
-    return <Navigate to="/logout" />;
-  }
-
-  if (!isValidUrl(DOMPurify.sanitize(redirectURI))) {
-    return <Navigate to="/logout" />;
-  }
-
-  const handleRedirect = () => {
-    setLoading(true);
-    window.location.href = DOMPurify.sanitize(redirectURI);
-  }
-
-  if (disableContinue) {
-    handleRedirect();
-  }
-
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const url = new URL(redirectURI);
+  const [loading, setLoading] = useState(false);
+  const [showRedirectButton, setShowRedirectButton] = useState(false);
 
-  if (!(url.hostname == domain) && !url.hostname.endsWith(`.${domain}`)) {
+  const searchParams = new URLSearchParams(search);
+  const redirectUri = searchParams.get("redirect_uri");
+
+  const isValidRedirectUri =
+    redirectUri !== null ? isValidUrl(redirectUri) : false;
+  const redirectUriObj = isValidRedirectUri
+    ? new URL(redirectUri as string)
+    : null;
+  const isTrustedRedirectUri =
+    redirectUriObj !== null
+      ? redirectUriObj.hostname === rootDomain ||
+        redirectUriObj.hostname.endsWith(`.${rootDomain}`)
+      : false;
+  const isAllowedRedirectProto =
+    redirectUriObj !== null
+      ? redirectUriObj.protocol === "https:" ||
+        redirectUriObj.protocol === "http:"
+      : false;
+  const isHttpsDowngrade =
+    redirectUriObj !== null
+      ? redirectUriObj.protocol === "http:" &&
+        window.location.protocol === "https:"
+      : false;
+
+  const handleRedirect = () => {
+    setLoading(true);
+    window.location.assign(redirectUriObj!.toString());
+  };
+
+  useEffect(() => {
+    if (
+      !isLoggedIn ||
+      !isValidRedirectUri ||
+      !isTrustedRedirectUri ||
+      !isAllowedRedirectProto ||
+      isHttpsDowngrade
+    ) {
+      return;
+    }
+
+    const auto = setTimeout(() => {
+      handleRedirect();
+    }, 100);
+
+    const reveal = setTimeout(() => {
+      setLoading(false);
+      setShowRedirectButton(true);
+    }, 1000);
+
+    return () => {
+      clearTimeout(auto);
+      clearTimeout(reveal);
+    };
+  }, []);
+
+  if (!isLoggedIn) {
     return (
-      <Card className="min-w-xs sm:min-w-sm">
+      <Navigate
+        to={`/login?redirect_uri=${encodeURIComponent(redirectUri || "")}`}
+        replace
+      />
+    );
+  }
+
+  if (!isValidRedirectUri || !isAllowedRedirectProto) {
+    return <Navigate to="/logout" replace />;
+  }
+
+  if (!isTrustedRedirectUri) {
+    return (
+      <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
         <CardHeader>
           <CardTitle className="text-3xl">
-            {t("untrustedRedirectTitle")}
+            {t("continueUntrustedRedirectTitle")}
           </CardTitle>
           <CardDescription>
             <Trans
-              i18nKey="untrustedRedirectSubtitle"
+              i18nKey="continueUntrustedRedirectSubtitle"
               t={t}
               components={{
                 code: <code />,
               }}
-              values={{ domain }}
+              values={{ rootDomain }}
             />
           </CardDescription>
         </CardHeader>
@@ -76,7 +117,11 @@ export const ContinuePage = () => {
           >
             {t("continueTitle")}
           </Button>
-          <Button onClick={() => navigate("/logout")} variant="outline" disabled={loading}>
+          <Button
+            onClick={() => navigate("/logout")}
+            variant="outline"
+            disabled={loading}
+          >
             {t("cancelTitle")}
           </Button>
         </CardFooter>
@@ -84,9 +129,9 @@ export const ContinuePage = () => {
     );
   }
 
-  if (url.protocol === "http:" && window.location.protocol === "https:") {
+  if (isHttpsDowngrade) {
     return (
-      <Card className="min-w-xs sm:min-w-sm">
+      <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
         <CardHeader>
           <CardTitle className="text-3xl">
             {t("continueInsecureRedirectTitle")}
@@ -102,14 +147,14 @@ export const ContinuePage = () => {
           </CardDescription>
         </CardHeader>
         <CardFooter className="flex flex-col items-stretch gap-2">
-          <Button
-            onClick={handleRedirect}
-            loading={loading}
-            variant="warning"
-          >
+          <Button onClick={handleRedirect} loading={loading} variant="warning">
             {t("continueTitle")}
           </Button>
-          <Button onClick={() => navigate("/logout")} variant="outline" disabled={loading}>
+          <Button
+            onClick={() => navigate("/logout")}
+            variant="outline"
+            disabled={loading}
+          >
             {t("cancelTitle")}
           </Button>
         </CardFooter>
@@ -120,17 +165,18 @@ export const ContinuePage = () => {
   return (
     <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
-        <CardTitle className="text-3xl">{t("continueTitle")}</CardTitle>
-        <CardDescription>{t("continueSubtitle")}</CardDescription>
+        <CardTitle className="text-3xl">
+          {t("continueRedirectingTitle")}
+        </CardTitle>
+        <CardDescription>{t("continueRedirectingSubtitle")}</CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
-        <Button
-          onClick={handleRedirect}
-          loading={loading}
-        >
-          {t("continueTitle")}
-        </Button>
-      </CardFooter>
+      {showRedirectButton && (
+        <CardFooter className="flex flex-col items-stretch">
+          <Button onClick={handleRedirect}>
+            {t("continueRedirectManually")}
+          </Button>
+        </CardFooter>
+      )}
     </Card>
   );
 };

frontend/src/pages/login-page.tsx

@@ -17,23 +17,21 @@ 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";
 
 export const LoginPage = () => {
   const { isLoggedIn } = useUserContext();
-
-  if (isLoggedIn) {
-    return <Navigate to="/logout" />;
-  }
-
-  const { configuredProviders, title, oauthAutoRedirect, genericName } = useAppContext();
+  const { configuredProviders, title, oauthAutoRedirect, genericName } =
+    useAppContext();
   const { search } = useLocation();
   const { t } = useTranslation();
   const isMounted = useIsMounted();
 
+  const redirectTimer = useRef<number | null>(null);
+
   const searchParams = new URLSearchParams(search);
   const redirectUri = searchParams.get("redirect_uri");
 
@@ -53,8 +51,8 @@ export const LoginPage = () => {
         description: t("loginOauthSuccessSubtitle"),
       });
 
-      setTimeout(() => {
-        window.location.href = data.data.url;
+      redirectTimer.current = window.setTimeout(() => {
+        window.location.replace(data.data.url);
       }, 500);
     },
     onError: () => {
@@ -79,7 +77,7 @@ export const LoginPage = () => {
         description: t("loginSuccessSubtitle"),
       });
 
-      setTimeout(() => {
+      redirectTimer.current = window.setTimeout(() => {
         window.location.replace(
           `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
         );
@@ -100,6 +98,7 @@ export const LoginPage = () => {
       if (
         oauthConfigured &&
         configuredProviders.includes(oauthAutoRedirect) &&
+        !isLoggedIn &&
         redirectUri
       ) {
         oauthMutation.mutate(oauthAutoRedirect);
@@ -107,6 +106,26 @@ export const LoginPage = () => {
     }
   }, []);
 
+  useEffect(
+    () => () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    },
+    [],
+  );
+
+  if (isLoggedIn && redirectUri) {
+    return (
+      <Navigate
+        to={`/continue?redirect_uri=${encodeURIComponent(redirectUri)}`}
+        replace
+      />
+    );
+  }
+
+  if (isLoggedIn) {
+    return <Navigate to="/logout" replace />;
+  }
+
   return (
     <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
@@ -126,7 +145,10 @@ export const LoginPage = () => {
                 icon={<GoogleIcon />}
                 className="w-full"
                 onClick={() => oauthMutation.mutate("google")}
-                loading={oauthMutation.isPending && oauthMutation.variables === "google"}
+                loading={
+                  oauthMutation.isPending &&
+                  oauthMutation.variables === "google"
+                }
                 disabled={oauthMutation.isPending || loginMutation.isPending}
               />
             )}
@@ -136,7 +158,10 @@ export const LoginPage = () => {
                 icon={<GithubIcon />}
                 className="w-full"
                 onClick={() => oauthMutation.mutate("github")}
-                loading={oauthMutation.isPending && oauthMutation.variables === "github"}
+                loading={
+                  oauthMutation.isPending &&
+                  oauthMutation.variables === "github"
+                }
                 disabled={oauthMutation.isPending || loginMutation.isPending}
               />
             )}
@@ -146,7 +171,10 @@ export const LoginPage = () => {
                 icon={<GenericIcon />}
                 className="w-full"
                 onClick={() => oauthMutation.mutate("generic")}
-                loading={oauthMutation.isPending && oauthMutation.variables === "generic"}
+                loading={
+                  oauthMutation.isPending &&
+                  oauthMutation.variables === "generic"
+                }
                 disabled={oauthMutation.isPending || loginMutation.isPending}
               />
             )}

frontend/src/pages/logout-page.tsx

@@ -11,20 +11,18 @@ 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";
 
 export const LogoutPage = () => {
   const { provider, username, isLoggedIn, email } = useUserContext();
-
-  if (!isLoggedIn) {
-    return <Navigate to="/login" />;
-  }
-
   const { genericName } = useAppContext();
   const { t } = useTranslation();
 
+  const redirectTimer = useRef<number | null>(null);
+
   const logoutMutation = useMutation({
     mutationFn: () => axios.post("/api/user/logout"),
     mutationKey: ["logout"],
@@ -33,8 +31,8 @@ export const LogoutPage = () => {
         description: t("logoutSuccessSubtitle"),
       });
 
-      setTimeout(async () => {
-        window.location.replace("/login");
+      redirectTimer.current = window.setTimeout(() => {
+        window.location.assign("/login");
       }, 500);
     },
     onError: () => {
@@ -44,6 +42,17 @@ export const LogoutPage = () => {
     },
   });
 
+  useEffect(
+    () => () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    },
+    [],
+  );
+
+  if (!isLoggedIn) {
+    return <Navigate to="/login" replace />;
+  }
+
   return (
     <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>

frontend/src/pages/totp-page.tsx

@@ -12,22 +12,19 @@ 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";
 
 export const TotpPage = () => {
   const { totpPending } = useUserContext();
-
-  if (!totpPending) {
-    return <Navigate to="/" />;
-  }
-
   const { t } = useTranslation();
   const { search } = useLocation();
   const formId = useId();
 
+  const redirectTimer = useRef<number | null>(null);
+
   const searchParams = new URLSearchParams(search);
   const redirectUri = searchParams.get("redirect_uri");
 
@@ -39,7 +36,7 @@ export const TotpPage = () => {
         description: t("totpSuccessSubtitle"),
       });
 
-      setTimeout(() => {
+      redirectTimer.current = window.setTimeout(() => {
         window.location.replace(
           `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
         );
@@ -52,6 +49,17 @@ export const TotpPage = () => {
     },
   });
 
+  useEffect(
+    () => () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    },
+    [],
+  );
+
+  if (!totpPending) {
+    return <Navigate to="/" replace />;
+  }
+
   return (
     <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>

frontend/src/pages/unauthorized-page.tsx

@@ -12,6 +12,10 @@ import { Navigate, useLocation, useNavigate } from "react-router";
 
 export const UnauthorizedPage = () => {
   const { search } = useLocation();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [loading, setLoading] = useState(false);
 
   const searchParams = new URLSearchParams(search);
   const username = searchParams.get("username");
@@ -19,19 +23,15 @@ export const UnauthorizedPage = () => {
   const groupErr = searchParams.get("groupErr");
   const ip = searchParams.get("ip");
 
-  if (!username && !ip) {
-    return <Navigate to="/" />;
-  }
-
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-
   const handleRedirect = () => {
     setLoading(true);
     navigate("/login");
   };
 
+  if (!username && !ip) {
+    return <Navigate to="/" />;
+  }
+
   let i18nKey = "unauthorizedLoginSubtitle";
 
   if (resource) {