fix: use the href of the url object instead of the object iself as the

dep in the callback

.gitignore

@@ -39,3 +39,6 @@ __debug_*
 
 # infisical
 /.infisical.json
+
+# traefik data
+/traefik

Makefile

@@ -10,7 +10,7 @@ BUILD_TIMESTAMP := $(shell date '+%Y-%m-%dT%H:%M:%S')
 BIN_NAME := tinyauth-$(GOARCH)
 
 # Development vars
-DEV_COMPOSE := $(shell test -f "docker-compose.test.yml" && echo "docker-compose.test.yml" || echo "docker-compose.dev.yml" )
+DEV_COMPOSE := $(shell test -f "docker-compose.test.yml" && echo "docker-compose.test.yml" || echo "docker-compose.yml" )
 PROD_COMPOSE := $(shell test -f "docker-compose.test.prod.yml" && echo "docker-compose.test.prod.yml" || echo "docker-compose.example.yml" )
 
 # Deps

docker-compose.dev.yml

@@ -13,7 +13,7 @@ services:
     image: traefik/whoami:latest
     labels:
       traefik.enable: true
-      traefik.http.routers.whoami.rule: Host(`whoami.127.0.0.1.sslip.io`)
+      traefik.http.routers.whoami.rule: Host(`whoami.example.com`)
       traefik.http.routers.whoami.middlewares: tinyauth
 
   tinyauth-frontend:
@@ -27,7 +27,7 @@ services:
       - 5173:5173
     labels:
       traefik.enable: true
-      traefik.http.routers.tinyauth.rule: Host(`tinyauth.127.0.0.1.sslip.io`)
+      traefik.http.routers.tinyauth.rule: Host(`tinyauth.example.com`)
 
   tinyauth-backend:
     container_name: tinyauth-backend

frontend/src/components/domain-warning/domain-warning.tsx

@@ -33,7 +33,6 @@ export const DomainWarning = (props: Props) => {
             i18nKey="domainWarningSubtitle"
             values={{ appUrl, currentUrl }}
             components={{ code: <code /> }}
-            shouldUnescape={true}
           />
         </CardDescription>
       </CardHeader>

frontend/src/pages/continue-page.tsx

@@ -32,34 +32,43 @@ export const ContinuePage = () => {
     cookieDomain,
   );
 
-  const handleRedirect = useCallback(() => {
+  const urlHref = url?.href;
+
+  const hasValidRedirect = valid && allowedProto;
+  const showUntrustedWarning =
+    hasValidRedirect && !trusted && !disableUiWarnings;
+  const showInsecureWarning =
+    hasValidRedirect && httpsDowngrade && !disableUiWarnings;
+  const shouldAutoRedirect =
+    isLoggedIn &&
+    hasValidRedirect &&
+    !showUntrustedWarning &&
+    !showInsecureWarning;
+
+  const redirectToTarget = useCallback(() => {
+    if (!urlHref || hasRedirected.current) {
+      return;
+    }
+
     hasRedirected.current = true;
+    window.location.assign(urlHref);
+  }, [urlHref]);
+
+  const handleRedirect = useCallback(() => {
     setIsLoading(true);
-    window.location.assign(url!);
+    redirectToTarget();
-  }, [url]);
+  }, [redirectToTarget]);
 
   useEffect(() => {
-    if (!isLoggedIn) {
+    if (!shouldAutoRedirect) {
-      return;
-    }
-
-    if (hasRedirected.current) {
-      return;
-    }
-
-    if (
-      (!valid || !allowedProto || !trusted || httpsDowngrade) &&
-      !disableUiWarnings
-    ) {
       return;
     }
 
     const auto = setTimeout(() => {
-      handleRedirect();
+      redirectToTarget();
     }, 100);
 
     const reveal = setTimeout(() => {
-      setIsLoading(false);
       setShowRedirectButton(true);
     }, 5000);
 
@@ -67,18 +76,7 @@ export const ContinuePage = () => {
       clearTimeout(auto);
       clearTimeout(reveal);
     };
-  }, [
+  }, [shouldAutoRedirect, redirectToTarget]);
-    isLoggedIn,
-    hasRedirected,
-    valid,
-    allowedProto,
-    trusted,
-    httpsDowngrade,
-    disableUiWarnings,
-    setIsLoading,
-    handleRedirect,
-    setShowRedirectButton,
-  ]);
 
   if (!isLoggedIn) {
     return (
@@ -89,11 +87,11 @@ export const ContinuePage = () => {
     );
   }
 
-  if (!valid || !allowedProto) {
+  if (!hasValidRedirect) {
     return <Navigate to="/logout" replace />;
   }
 
-  if (!trusted && !disableUiWarnings) {
+  if (showUntrustedWarning) {
     return (
       <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
         <CardHeader>
@@ -108,13 +106,12 @@ export const ContinuePage = () => {
                 code: <code />,
               }}
               values={{ cookieDomain }}
-              shouldUnescape={true}
             />
           </CardDescription>
         </CardHeader>
         <CardFooter className="flex flex-col items-stretch gap-2">
           <Button
-            onClick={() => handleRedirect()}
+            onClick={handleRedirect}
             loading={isLoading}
             variant="destructive"
           >
@@ -132,7 +129,7 @@ export const ContinuePage = () => {
     );
   }
 
-  if (httpsDowngrade && !disableUiWarnings) {
+  if (showInsecureWarning) {
     return (
       <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
         <CardHeader>
@@ -151,7 +148,7 @@ export const ContinuePage = () => {
         </CardHeader>
         <CardFooter className="flex flex-col items-stretch gap-2">
           <Button
-            onClick={() => handleRedirect()}
+            onClick={handleRedirect}
             loading={isLoading}
             variant="warning"
           >
@@ -179,7 +176,7 @@ export const ContinuePage = () => {
       </CardHeader>
       {showRedirectButton && (
         <CardFooter className="flex flex-col items-stretch">
-          <Button onClick={() => handleRedirect()}>
+          <Button onClick={handleRedirect}>
             {t("continueRedirectManually")}
           </Button>
         </CardFooter>

frontend/src/pages/logout-page.tsx

@@ -67,7 +67,6 @@ export const LogoutPage = () => {
                 username: email,
                 provider: oauthName,
               }}
-              shouldUnescape={true}
             />
           ) : (
             <Trans
@@ -79,7 +78,6 @@ export const LogoutPage = () => {
               values={{
                 username,
               }}
-              shouldUnescape={true}
             />
           )}
         </CardDescription>