🐛 Fix logout menu item (#1479)

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}

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>

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 });
         },