From 2b9000499d3ed89282ba925f0a631579a5f1b000 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Fri, 3 Jan 2025 21:59:17 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20logout=20menu=20item=20(#1?=
 =?UTF-8?q?479)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/components/logout-button.tsx | 10 ++++------
 apps/web/src/components/user-dropdown.tsx     | 19 +------------------
 apps/web/src/components/user-provider.tsx     |  7 +++++++
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/app/components/logout-button.tsx b/apps/web/src/app/components/logout-button.tsx
index c707b882b86..cf3d4654d66 100644
--- a/apps/web/src/app/components/logout-button.tsx
+++ b/apps/web/src/app/components/logout-button.tsx
@@ -1,23 +1,21 @@
 "use client";
-import { usePostHog } from "@rallly/posthog/client";
 import type { ButtonProps } from "@rallly/ui/button";
 import { Button } from "@rallly/ui/button";
 
+import { useUser } from "@/components/user-provider";
+
 export function LogoutButton({
   children,
   onClick,
   ...rest
 }: React.PropsWithChildren<ButtonProps>) {
-  const posthog = usePostHog();
+  const { logout } = useUser();
   return (
     <Button
       {...rest}
       onClick={async (e) => {
+        await logout();
         onClick?.(e);
-        await fetch("/api/logout", { method: "POST" });
-        posthog?.capture("logout");
-        posthog?.reset();
-        window.location.href = "/login";
       }}
     >
       {children}
diff --git a/apps/web/src/components/user-dropdown.tsx b/apps/web/src/components/user-dropdown.tsx
index 7a6feafa436..644d6a656e8 100644
--- a/apps/web/src/components/user-dropdown.tsx
+++ b/apps/web/src/components/user-dropdown.tsx
@@ -36,18 +36,8 @@ import { isFeedbackEnabled } from "@/utils/constants";
 
 import { IfAuthenticated, IfGuest, useUser } from "./user-provider";
 
-function logout() {
-  // programmtically submit form with name="logout"
-  const form = document.forms.namedItem("logout");
-  if (form && typeof form.submit === "function") {
-    form.submit();
-  } else {
-    console.error("Logout form or submit method not found");
-  }
-}
-
 export const UserDropdown = ({ className }: { className?: string }) => {
-  const { user } = useUser();
+  const { user, logout } = useUser();
   usePlan(); // prefetch plan data
   return (
     <DropdownMenu modal={false}>
@@ -177,13 +167,6 @@ export const UserDropdown = ({ className }: { className?: string }) => {
             }}
             className="flex items-center gap-x-2"
           >
-            <form
-              className="hidden"
-              action="/auth/logout"
-              name="logout"
-              method="POST"
-            />
-            {/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */}
             <LogOutIcon className="text-muted-foreground size-4" />
             <Trans i18nKey="logout" />
           </DropdownMenuItem>
diff --git a/apps/web/src/components/user-provider.tsx b/apps/web/src/components/user-provider.tsx
index a047ea73fad..4f2b73f4f08 100644
--- a/apps/web/src/components/user-provider.tsx
+++ b/apps/web/src/components/user-provider.tsx
@@ -33,6 +33,7 @@ export const UserContext = React.createContext<{
     userId?: string | null;
     guestId?: string | null;
   }) => boolean;
+  logout: () => Promise<void>;
 } | null>(null);
 
 export const useUser = () => {
@@ -105,6 +106,12 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
           locale: user.locale ?? i18n.language,
         },
         refresh: session.update,
+        logout: async () => {
+          await fetch("/api/logout", { method: "POST" });
+          posthog?.capture("logout");
+          posthog?.reset();
+          window.location.href = "/login";
+        },
         ownsObject: (resource) => {
           return isOwner(resource, { id: user.id, isGuest });
         },