chore: [app-router-migration 34] migrate the "/auth/logout" and "/auth/signin" pages (#13199)

## What does this PR do?

- This PR migrates the `/auth/logout` and `/auth/signin` pages to the app directory (which runs under the App Router).
- Using `/future/auth/logout` is available at all times and is supposed to log the user out as `/auth/logout` page does.
- However `signin` page (or fragment) was used before should behave the same using the `/future/auth/signin` route.

## Requirement/Documentation

- If there is a requirement document, please, share it here.
- If there is ab UI/UX design document, please, share it here.

## Type of change

- [x] Chore (refactoring code, technical debt, workflow improvements)
- [x] New feature (non-breaking change which adds functionality)

## How should this be tested?

- Using `/future/auth/logout` is available at all times and is supposed to log the user out as `/auth/logout` page does.
- However `signin` page (or fragment) was used before should behave the same using the `/future/auth/signin` route. It was not tested locally.

## Mandatory Tasks

- [x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

apps/web/app/future/auth/logout/page.tsx

@@ -0,0 +1,7 @@
+import Logout from "@pages/auth/logout";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@server/lib/auth/logout/getServerSideProps";
+
+export default WithLayout({ getLayout: null, Page: Logout, getData: withAppDirSsr(getServerSideProps) })<"P">;

apps/web/app/future/auth/signin/page.tsx

@@ -0,0 +1,13 @@
+import signin from "@pages/auth/signin";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetServerSidePropsType } from "next";
+
+import { getServerSideProps } from "@server/lib/auth/signin/getServerSideProps";
+
+export default WithLayout({
+  getLayout: null,
+  Page: signin,
+  // @ts-expect-error TODO: fix this
+  getData: withAppDirSsr<InferGetServerSidePropsType<typeof getServerSideProps>>(getServerSideProps),
+})<"P">;

apps/web/middleware.ts

@@ -1,5 +1,6 @@
 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";
 
@@ -81,6 +82,10 @@ const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
     }
   }
 
+  if (url.pathname.startsWith("/future/auth/logout")) {
+    cookies().delete("next-auth.session-token");
+  }
+
   requestHeaders.set("x-pathname", url.pathname);
 
   const locale = await getLocale(req);
@@ -112,6 +117,7 @@ export const config = {
     "/api/trpc/:path*",
     "/login",
     "/auth/login",
+    "/future/auth/login",
     /**
      * Paths required by routingForms.handle
      */

apps/web/pages/auth/logout.tsx

@@ -1,4 +1,5 @@
-import type { GetServerSidePropsContext } from "next";
+"use client";
+
 import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -13,7 +14,7 @@ import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";
 
-import { ssrInit } from "@server/lib/ssr";
+import { getServerSideProps } from "@server/lib/auth/logout/getServerSideProps";
 
 type Props = inferSSRProps<typeof getServerSideProps>;
 
@@ -70,18 +71,4 @@ export function Logout(props: Props) {
 Logout.PageWrapper = PageWrapper;
 export default Logout;
 
-export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const ssr = await ssrInit(context);
-  // Deleting old cookie manually, remove this code after all existing cookies have expired
-  context.res.setHeader(
-    "Set-Cookie",
-    "next-auth.session-token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;"
-  );
-
-  return {
-    props: {
-      trpcState: ssr.dehydrate(),
-      query: context.query,
-    },
-  };
-}
+export { getServerSideProps };

apps/web/pages/auth/signin.tsx

@@ -1,17 +1,19 @@
-import type { GetServerSidePropsContext } from "next";
-import { getProviders, signIn, getCsrfToken } from "next-auth/react";
+"use client";
+
+import type { getProviders } from "next-auth/react";
+import { signIn } from "next-auth/react";
 
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { Button } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
-type Provider = {
-  name: string;
-  id: string;
-};
+import { getServerSideProps } from "@server/lib/auth/signin/getServerSideProps";
+
+function signin({ providers }: { providers: Awaited<ReturnType<typeof getProviders>> }) {
+  if (!providers) {
+    return null;
+  }
 
-function signin({ providers }: { providers: Provider[] }) {
   return (
     <div className="center mt-10 justify-between space-y-5 text-center align-baseline">
       {Object.values(providers).map((provider) => {
@@ -29,21 +31,4 @@ signin.PageWrapper = PageWrapper;
 
 export default signin;
 
-export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const { req } = context;
-
-  const session = await getServerSession({ req });
-  const csrfToken = await getCsrfToken(context);
-  const providers = await getProviders();
-  if (session) {
-    return {
-      redirect: { destination: "/" },
-    };
-  }
-  return {
-    props: {
-      csrfToken,
-      providers,
-    },
-  };
-}
+export { getServerSideProps };

apps/web/server/lib/auth/logout/getServerSideProps.tsx

@@ -0,0 +1,19 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const ssr = await ssrInit(context);
+  // Deleting old cookie manually, remove this code after all existing cookies have expired
+  context.res?.setHeader(
+    "Set-Cookie",
+    "next-auth.session-token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;"
+  );
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+      query: context.query,
+    },
+  };
+}

apps/web/server/lib/auth/signin/getServerSideProps.tsx

@@ -0,0 +1,23 @@
+import type { GetServerSidePropsContext } from "next";
+import { getProviders, getCsrfToken } from "next-auth/react";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const { req } = context;
+
+  const session = await getServerSession({ req });
+  const csrfToken = await getCsrfToken(context);
+  const providers = await getProviders();
+  if (session) {
+    return {
+      redirect: { destination: "/" },
+    };
+  }
+  return {
+    props: {
+      csrfToken,
+      providers,
+    },
+  };
+}