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
2025-10-28 04:35:40 +00:00 · 2025-09-01 18:22:42 +03:00
parent 17048d94b6
commit b9e35716ac
24 changed files with 339 additions and 157 deletions
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -14,7 +14,6 @@
        "axios": "^1.11.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
-        "dompurify": "^3.2.6",
        "i18next": "^25.4.2",
        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-resources-to-backend": "^1.2.1",
@@ -364,8 +363,6 @@

    "@types/react-dom": ["@types/react-dom@19.1.8", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-xG7xaBMJCpcK0RpN8jDbAACQo54ycO6h4dSSmgv8+fu6ZIAdANkx/WsawASUjVXYfy+J9AbUpRMNNEsXCDfDBQ=="],

-    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
-
    "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],

    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.41.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.41.0", "@typescript-eslint/type-utils": "8.41.0", "@typescript-eslint/utils": "8.41.0", "@typescript-eslint/visitor-keys": "8.41.0", "graphemer": "^1.4.0", "ignore": "^7.0.0", "natural-compare": "^1.4.0", "ts-api-utils": "^2.1.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.41.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-8fz6oa6wEKZrhXWro/S3n2eRJqlRcIa6SlDh59FXJ5Wp5XRZ8B9ixpJDcjadHq47hMx0u+HW6SNa6LjJQ6NLtw=="],
@@ -476,8 +473,6 @@

    "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],

-    "dompurify": ["dompurify@3.2.6", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ=="],
-
    "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],

    "electron-to-chromium": ["electron-to-chromium@1.5.151", "", {}, "sha512-Rl6uugut2l9sLojjS4H4SAr3A4IgACMLgpuEMPYCVcKydzfyPrn5absNRju38IhQOf/NwjJY8OGWjlteqYeBCA=="],
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,6 @@
    "axios": "^1.11.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "dompurify": "^3.2.6",
    "i18next": "^25.4.2",
    "i18next-browser-languagedetector": "^8.2.0",
    "i18next-resources-to-backend": "^1.2.1",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,8 +5,8 @@ export const App = () => {
  const { isLoggedIn } = useUserContext();

  if (isLoggedIn) {
-    return <Navigate to="/logout" />;
+    return <Navigate to="/logout" replace />;
  }

-  return <Navigate to="/login" />;
+  return <Navigate to="/login" replace />;
 };
--- a/frontend/src/components/domain-warning/domain-warning.tsx
+++ b/frontend/src/components/domain-warning/domain-warning.tsx
@@ -0,0 +1,56 @@
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import { Button } from "../ui/button";
+import { Trans, useTranslation } from "react-i18next";
+import { useLocation } from "react-router";
+
+interface Props {
+  onClick: () => void;
+  appUrl: string;
+  currentUrl: string;
+}
+
+export const DomainWarning = (props: Props) => {
+  const { onClick, appUrl, currentUrl } = props;
+  const { t } = useTranslation();
+  const { search } = useLocation();
+
+  const searchParams = new URLSearchParams(search);
+  const redirectUri = searchParams.get("redirect_uri");
+
+  return (
+    <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
+      <CardHeader>
+        <CardTitle className="text-3xl">{t("domainWarningTitle")}</CardTitle>
+        <CardDescription>
+          <Trans
+            t={t}
+            i18nKey="domainWarningSubtitle"
+            values={{ appUrl, currentUrl }}
+            components={{ code: <code /> }}
+          />
+        </CardDescription>
+      </CardHeader>
+      <CardFooter className="flex flex-col items-stretch gap-2">
+        <Button onClick={onClick} variant="warning">
+          {t("ignoreTitle")}
+        </Button>
+        <Button
+          onClick={() =>
+            window.location.assign(
+              `${appUrl}/login?redirect_uri=${encodeURIComponent(redirectUri || "")}`,
+            )
+          }
+          variant="outline"
+        >
+          {t("goToCorrectDomainTitle")}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
--- a/frontend/src/components/layout/layout.tsx
+++ b/frontend/src/components/layout/layout.tsx
@@ -1,8 +1,10 @@
 import { useAppContext } from "@/context/app-context";
 import { LanguageSelector } from "../language/language";
 import { Outlet } from "react-router";
+import { useCallback, useState } from "react";
+import { DomainWarning } from "../domain-warning/domain-warning";

-export const Layout = () => {
+const BaseLayout = ({ children }: { children: React.ReactNode }) => {
  const { backgroundImage } = useAppContext();

  return (
@@ -15,7 +17,38 @@ export const Layout = () => {
      }}
    >
      <LanguageSelector />
-      <Outlet />
+      {children}
    </div>
  );
 };
+
+export const Layout = () => {
+  const { appUrl } = useAppContext();
+  const [ignoreDomainWarning, setIgnoreDomainWarning] = useState(() => {
+    return window.sessionStorage.getItem("ignoreDomainWarning") === "true";
+  });
+  const currentUrl = window.location.origin;
+
+  const handleIgnore = useCallback(() => {
+    window.sessionStorage.setItem("ignoreDomainWarning", "true");
+    setIgnoreDomainWarning(true);
+  }, [setIgnoreDomainWarning]);
+
+  if (!ignoreDomainWarning && appUrl !== currentUrl) {
+    return (
+      <BaseLayout>
+        <DomainWarning
+          appUrl={appUrl}
+          currentUrl={currentUrl}
+          onClick={() => handleIgnore()}
+        />
+      </BaseLayout>
+    );
+  }
+
+  return (
+    <BaseLayout>
+      <Outlet />
+    </BaseLayout>
+  );
+};
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ const buttonVariants = cva(
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline",
        warning:
-          "bg-amber-500 text-white shadow-xs hover:bg-amber-400 focus-visible:ring-amber-200/20 dark:focus-visible:ring-amber-400/40 dark:bg-amber-600",
+          "bg-amber-500 text-white shadow-xs hover:bg-amber-400 focus-visible:ring-amber-200/20 dark:focus-visible:ring-amber-400/40",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -156,7 +156,7 @@ ul {
 }

 code {
-  @apply relative rounded bg-muted px-[0.2rem] py-[0.1rem] font-mono text-sm font-semibold;
+  @apply relative rounded bg-muted px-[0.2rem] py-[0.1rem] font-mono text-sm font-semibold break-all;
 }

 .lead {
--- a/frontend/src/lib/i18n/locales/en-US.json
+++ b/frontend/src/lib/i18n/locales/en-US.json
@@ -14,14 +14,14 @@
    "loginOauthFailSubtitle": "Failed to get OAuth URL",
    "loginOauthSuccessTitle": "Redirecting",
    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider",
+    "continueTitle": "Continue",
    "continueRedirectingTitle": "Redirecting...",
    "continueRedirectingSubtitle": "You should be redirected to the app soon",
-    "continueInvalidRedirectTitle": "Invalid redirect",
-    "continueInvalidRedirectSubtitle": "The redirect URL is invalid",
+    "continueRedirectManually": "Redirect me manually",
    "continueInsecureRedirectTitle": "Insecure redirect",
    "continueInsecureRedirectSubtitle": "You are trying to redirect from <code>https</code> to <code>http</code> which is not secure. Are you sure you want to continue?",
-    "continueTitle": "Continue",
-    "continueSubtitle": "Click the button to continue to your app.",
+    "continueUntrustedRedirectTitle": "Untrusted redirect",
+    "continueUntrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{rootDomain}}</code>). Are you sure you want to continue?",
    "logoutFailTitle": "Failed to log out",
    "logoutFailSubtitle": "Please try again",
    "logoutSuccessTitle": "Logged out",
@@ -44,8 +44,6 @@
    "unauthorizedGroupsSubtitle": "The user with username <code>{{username}}</code> is not in the groups required by the resource <code>{{resource}}</code>.",
    "unauthorizedIpSubtitle": "Your IP address <code>{{ip}}</code> is not authorized to access the resource <code>{{resource}}</code>.",
    "unauthorizedButton": "Try again",
-    "untrustedRedirectTitle": "Untrusted redirect",
-    "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{domain}}</code>). Are you sure you want to continue?",
    "cancelTitle": "Cancel",
    "forgotPasswordTitle": "Forgot your password?",
    "failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
@@ -53,5 +51,9 @@
    "errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information.",
    "forgotPasswordMessage": "You can reset your password by changing the `USERS` environment variable.",
    "fieldRequired": "This field is required",
-    "invalidInput": "Invalid input"
+    "invalidInput": "Invalid input",
+    "domainWarningTitle": "Invalid Domain",
+    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "ignoreTitle": "Ignore",
+    "goToCorrectDomainTitle": "Go to correct domain"
 }
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -14,14 +14,14 @@
    "loginOauthFailSubtitle": "Failed to get OAuth URL",
    "loginOauthSuccessTitle": "Redirecting",
    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider",
+    "continueTitle": "Continue",
    "continueRedirectingTitle": "Redirecting...",
    "continueRedirectingSubtitle": "You should be redirected to the app soon",
-    "continueInvalidRedirectTitle": "Invalid redirect",
-    "continueInvalidRedirectSubtitle": "The redirect URL is invalid",
+    "continueRedirectManually": "Redirect me manually",
    "continueInsecureRedirectTitle": "Insecure redirect",
    "continueInsecureRedirectSubtitle": "You are trying to redirect from <code>https</code> to <code>http</code> which is not secure. Are you sure you want to continue?",
-    "continueTitle": "Continue",
-    "continueSubtitle": "Click the button to continue to your app.",
+    "continueUntrustedRedirectTitle": "Untrusted redirect",
+    "continueUntrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{rootDomain}}</code>). Are you sure you want to continue?",
    "logoutFailTitle": "Failed to log out",
    "logoutFailSubtitle": "Please try again",
    "logoutSuccessTitle": "Logged out",
@@ -44,8 +44,6 @@
    "unauthorizedGroupsSubtitle": "The user with username <code>{{username}}</code> is not in the groups required by the resource <code>{{resource}}</code>.",
    "unauthorizedIpSubtitle": "Your IP address <code>{{ip}}</code> is not authorized to access the resource <code>{{resource}}</code>.",
    "unauthorizedButton": "Try again",
-    "untrustedRedirectTitle": "Untrusted redirect",
-    "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{domain}}</code>). Are you sure you want to continue?",
    "cancelTitle": "Cancel",
    "forgotPasswordTitle": "Forgot your password?",
    "failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
@@ -53,5 +51,9 @@
    "errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information.",
    "forgotPasswordMessage": "You can reset your password by changing the `USERS` environment variable.",
    "fieldRequired": "This field is required",
-    "invalidInput": "Invalid input"
+    "invalidInput": "Invalid input",
+    "domainWarningTitle": "Invalid Domain",
+    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "ignoreTitle": "Ignore",
+    "goToCorrectDomainTitle": "Go to correct domain"
 }
--- a/frontend/src/pages/continue-page.tsx
+++ b/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>
  );
 };
--- a/frontend/src/pages/login-page.tsx
+++ b/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}
              />
            )}
--- a/frontend/src/pages/logout-page.tsx
+++ b/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>
--- a/frontend/src/pages/totp-page.tsx
+++ b/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>
--- a/frontend/src/pages/unauthorized-page.tsx
+++ b/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) {
--- a/frontend/src/schemas/app-context-schema.ts
+++ b/frontend/src/schemas/app-context-schema.ts
@@ -2,10 +2,10 @@ import { z } from "zod";

 export const appContextSchema = z.object({
  configuredProviders: z.array(z.string()),
-  disableContinue: z.boolean(),
  title: z.string(),
  genericName: z.string(),
-  domain: z.string(),
+  appUrl: z.string(),
+  rootDomain: z.string(),
  forgotPasswordMessage: z.string(),
  oauthAutoRedirect: z.enum(["none", "github", "google", "generic"]),
  backgroundImage: z.string(),