2 files changed, 12 insertions, 15 deletions
diff --git a/apps/web/components/dashboard/header/ProfileOptions.tsx b/apps/web/components/dashboard/header/ProfileOptions.tsx
index 3d125606..7ccc0078 100644
--- a/apps/web/components/dashboard/header/ProfileOptions.tsx
+++ b/apps/web/components/dashboard/header/ProfileOptions.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { redirect, useRouter } from "next/navigation";
 import { useToggleTheme } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,7 +13,7 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { useTranslation } from "@/lib/i18n/client";
 import { LogOut, Moon, Paintbrush, Settings, Shield, Sun } from "lucide-react";
-import { signOut, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { useTheme } from "next-themes";
 
 import { AdminNoticeBadge } from "../../admin/AdminNotices";
@@ -43,6 +43,7 @@ export default function SidebarProfileOptions() {
   const { t } = useTranslation();
   const toggleTheme = useToggleTheme();
   const { data: session } = useSession();
+  const router = useRouter();
   if (!session) return redirect("/");
 
   return (
@@ -94,13 +95,7 @@ export default function SidebarProfileOptions() {
           <DarkModeToggle />
         </DropdownMenuItem>
         <Separator className="my-2" />
-        <DropdownMenuItem
-          onClick={() =>
-            signOut({
-              callbackUrl: "/",
-            })
-          }
-        >
+        <DropdownMenuItem onClick={() => router.push("/logout")}>
           <LogOut className="mr-2 size-4" />
           <span>{t("actions.sign_out")}</span>
         </DropdownMenuItem>
diff --git a/apps/web/components/utils/ValidAccountCheck.tsx b/apps/web/components/utils/ValidAccountCheck.tsx
index 12c11087..5ca5fd5c 100644
--- a/apps/web/components/utils/ValidAccountCheck.tsx
+++ b/apps/web/components/utils/ValidAccountCheck.tsx
@@ -1,13 +1,15 @@
 "use client";
 
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 import { api } from "@/lib/trpc";
-import { signOut } from "next-auth/react";
 
 /**
  * This component is used to address a confusion when the JWT token exists but the user no longer exists in the database.
  * So this component synchronusly checks if the user is still valid and if not, signs out the user.
  */
 export default function ValidAccountCheck() {
+  const router = useRouter();
   const { error } = api.users.whoami.useQuery(undefined, {
     retry: (_failureCount, error) => {
       if (error.data?.code === "UNAUTHORIZED") {
@@ -16,11 +18,11 @@ export default function ValidAccountCheck() {
       return true;
     },
   });
-  if (error?.data?.code === "UNAUTHORIZED") {
-    signOut({
-      callbackUrl: "/",
-    });
-  }
+  useEffect(() => {
+    if (error?.data?.code === "UNAUTHORIZED") {
+      router.push("/logout");
+    }
+  }, [error]);
 
   return <></>;
 }