chore: migrate /auth/logout (#18901)

* migrate /auth/verify-email page

* update middleware

* migrate /auth/logout page

apps/web/app/future/auth/logout/page.tsx → apps/web/app/(use-page-wrapper)/auth/logout/page.tsx

@@ -1,6 +1,5 @@
 import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
@@ -20,13 +19,9 @@ const Page = async ({ params, searchParams }: PageProps) => {
   // cookie will be cleared in `/apps/web/middleware.ts`
   const h = headers();
   const context = buildLegacyCtx(h, cookies(), params, searchParams);
-  const ssr = await ssrInit(context);
-  const props = {
-    trpcState: ssr.dehydrate(),
-    query: context.query,
-  };
+  await ssrInit(context);
 
-  return <Logout {...props} />;
+  return <Logout query={context.query} />;
 };
 
-export default WithLayout({ getLayout: null, ServerPage: Page })<"P">;
+export default Page;

apps/web/middleware.ts

@@ -1,6 +1,5 @@
 import { get } from "@vercel/edge-config";
 import { collectEvents } from "next-collect/server";
-import { cookies } from "next/headers";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
@@ -73,13 +72,6 @@ const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
     }
   }
 
-  if (url.pathname.startsWith("/future/auth/logout")) {
-    cookies().set("next-auth.session-token", "", {
-      path: "/",
-      expires: new Date(0),
-    });
-  }
-
   requestHeaders.set("x-pathname", url.pathname);
 
   const locale = await getLocale(req);
@@ -92,6 +84,10 @@ const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
     },
   });
 
+  if (url.pathname.startsWith("/auth/logout")) {
+    res.cookies.delete("next-auth.session-token");
+  }
+
   return responseWithHeaders({ url, res, req });
 };
 
@@ -159,6 +155,7 @@ export const config = {
     "/api/trpc/:path*",
     "/login",
     "/auth/login",
+    "/auth/logout",
     "/auth/error",
     "/auth/signin",
     "/auth/oauth2/authorize",

apps/web/modules/auth/logout-view.tsx

@@ -2,20 +2,19 @@
 
 import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import type { ParsedUrlQuery } from "querystring";
 import { useEffect, useState } from "react";
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 import { Icon } from "@calcom/ui";
 
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
-
 import AuthContainer from "@components/ui/AuthContainer";
 
-import type { getServerSideProps } from "@server/lib/auth/logout/getServerSideProps";
-
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
+export type PageProps = {
+  query: ParsedUrlQuery;
+};
 
 export function Logout(props: PageProps) {
   const [btnLoading, setBtnLoading] = useState<boolean>(false);
@@ -42,7 +41,7 @@ export function Logout(props: PageProps) {
   };
 
   return (
-    <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
+    <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo isAppDir>
       <div className="mb-4">
         <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
           <Icon name="check" className="h-6 w-6 text-green-600" />