Fix login logic and signout button

app/(authenticated)/user/[id]/page.tsx

@@ -1,6 +1,5 @@
 import {
   getCurrentUser,
-  logout,
   mustGetCurrentUser,
   requirePermission,
 } from "@/lib/auth/server";
@@ -20,14 +19,14 @@ import {
 } from "@mantine/core";
 import { UserPreferences } from "./UserPreferences";
 import { ICalCopyButton } from "@/components/ICalCopyButton";
-
 import SlackLoginButton from "@/components/slack/SlackLoginButton";
 import SlackUserInfo from "@/components/slack/SlackUserInfo";
 import { Suspense } from "react";
 import { isSlackEnabled } from "@/lib/slack/slackApiConnection";
 import { hasWrapped } from "../../wrapped/util";
 import Link from "next/link";
 import { env } from "@/lib/env";
+import { SignoutButton } from "@/components/SignoutButton";
 
 export default async function UserPage({ params }: { params: { id: string } }) {
   let user: People.SecureUser;
@@ -62,22 +61,7 @@ export default async function UserPage({ params }: { params: { id: string } }) {
               {user.email}
             </h4>
           </Stack>
-          <form
-            action={async () => {
-              "use server";
-              logout();
-            }}
-            className="ml-auto"
-          >
-            <Button
-              variant="filled"
-              color="red"
-              className="ml-auto"
-              type="submit"
-            >
-              Sign Out
-            </Button>
-          </form>
+          <SignoutButton />
         </Group>
       </Card>
       <Space h={"md"} />

app/login/google/callback/route.ts

@@ -3,8 +3,8 @@ import { env } from "@/lib/env";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(req: NextRequest): Promise<NextResponse> {
-  const searchParams = req.nextUrl.searchParams;
-  const redirect = searchParams.get("redirect");
+  const cookies = req.cookies;
+  const redirect = cookies.get("ystv-calendar-session.redirect");
 
   const dataRaw = await req.formData();
   const idToken = dataRaw.get("credential");
@@ -19,7 +19,10 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
 
   await loginOrCreateUserGoogle(idToken);
 
-  const url = new URL("/calendar", env.PUBLIC_URL!);
+  var url = new URL(redirect?.value ?? "/calendar", env.PUBLIC_URL!);
+
+  if (!url.href.startsWith(env.PUBLIC_URL!)) url = new URL(env.PUBLIC_URL!);
+
   return NextResponse.redirect(url, {
     status: 303,
   });

components/Nav.tsx

@@ -21,7 +21,7 @@ export default function Nav({ children, user }: NavProps) {
       padding="md"
       classNames={{ header: styles.header }}
     >
-      <AppShell.Header bg-dark>
+      <AppShell.Header bg-dark="true">
         <Group h="100%" px="md">
           <Link href="/">
             <Image

components/SignoutButton/actions.ts

@@ -0,0 +1,11 @@
+"use server";
+
+import { env } from "@/lib/env";
+import { cookies } from "next/headers";
+
+export async function signOut() {
+  cookies().set("ystv-calendar-session", "", {
+    maxAge: 0,
+    domain: env.COOKIE_DOMAIN,
+  });
+}

components/SignoutButton/index.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Button } from "@mantine/core";
+import { signOut } from "./actions";
+
+export function SignoutButton() {
+  return (
+    <>
+      <Button
+        variant="filled"
+        color="red"
+        className="ml-auto"
+        onClick={async () => {
+          await signOut();
+        }}
+      >
+        Sign Out
+      </Button>
+    </>
+  );
+}

components/google/GoogleLoginButton.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { usePublicURL } from "@/components/PublicURLContext";
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
+import { useSearchParams, useRouter } from "next/navigation";
 import Script from "next/script";
+import { setRedirectCookie } from "./actions";
+import { Button } from "@mantine/core";
 
 export function GoogleLoginButton(props: {
   clientID: string;
@@ -14,27 +15,23 @@ export function GoogleLoginButton(props: {
   const publicURL = usePublicURL();
   const searchParams = useSearchParams();
 
+  const router = useRouter();
+
   const loginRedirect = searchParams.get("redirect");
 
+  const googleLoginURL = `https://accounts.google.com/gsi/select?client_id=${
+    props.clientID
+  }&ux_mode=redirect&login_uri=${encodeURIComponent(
+    publicURL + "/login/google/callback",
+  )}&ui_mode=card&context=signin${
+    props.hostedDomain ? `&hosted_domain=${props.hostedDomain}` : ""
+  }&g_csrf_token=${props.gCsrfCookie}&origin=${encodeURIComponent(publicURL)}`;
+
   return (
     <>
       <Script src="https://accounts.google.com/gsi/client" />
-      <Link
-        href={`https://accounts.google.com/gsi/select?client_id=${
-          props.clientID
-        }&ux_mode=redirect&login_uri=${encodeURIComponent(
-          publicURL +
-            "/login/google/callback" +
-            (props.redirect
-              ? "?redirect=" + props.redirect
-              : loginRedirect
-              ? "?redirect=" + loginRedirect
-              : ""),
-        )}&ui_mode=card&context=signin${
-          props.hostedDomain ? `&hosted_domain=${props.hostedDomain}` : ""
-        }&g_csrf_token=${props.gCsrfCookie}&origin=${encodeURIComponent(
-          publicURL,
-        )}`}
+      <Button
+        variant="unstyled"
         style={{
           alignItems: "center",
           color: "var(--mantine-color-text)",
@@ -50,10 +47,14 @@ export function GoogleLoginButton(props: {
           textDecoration: "none",
           width: 256,
         }}
+        onClick={async () => {
+          await setRedirectCookie(loginRedirect ?? "");
+          router.push(googleLoginURL);
+        }}
       >
         <GoogleIcon />
         Sign in with Google
-      </Link>
+      </Button>
     </>
   );
 }

components/google/actions.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+export async function setRedirectCookie(redirect: string) {
+  cookies().set("ystv-calendar-session.redirect", redirect);
+}

lib/auth/server.ts

@@ -8,7 +8,6 @@ import { findOrCreateUserFromGoogleToken } from "./google";
 import { redirect } from "next/navigation";
 import { z } from "zod";
 import { decode, encode } from "../sessionSecrets";
-import { cookies } from "next/headers";
 import { SlackTokenJson, findOrCreateUserFromSlackToken } from "./slack";
 import { env } from "../env";
 
@@ -81,13 +80,6 @@ async function setSession(user: z.infer<typeof sessionSchema>) {
   });
 }
 
-async function clearSession() {
-  const { cookies } = await import("next/headers");
-
-  await cookies().delete(cookieName);
-  await cookies().delete("g_csrf_token");
-}
-
 export async function getCurrentUserOrNull(
   req?: NextRequest,
 ): Promise<UserType | string> {
@@ -188,11 +180,3 @@ export async function loginOrCreateUserSlack(rawSlackToken: SlackTokenJson) {
   await setSession({ userID: user.user_id });
   return userType;
 }
-
-export async function logout() {
-  await clearSession();
-  const url = new URL("/login", env.PUBLIC_URL);
-  return NextResponse.redirect(url, {
-    status: 303,
-  });
-}