fix(api): converting sign out route handler to POST request to preven…

…t accidental sign-outs during navigation
JaleelB · Jul 31, 2024 · 6c69b37 · 6c69b37
1 parent 9ae564e
commit 6c69b37
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/app/api/sign-out/route.ts b/app/api/sign-out/route.ts
@@ -2,7 +2,7 @@ import { lucia, validateRequest } from "@/server/auth";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
-export async function GET(): Promise<Response> {
+export async function POST(): Promise<Response> {
   await new Promise((resolve) => setTimeout(resolve, 1000));
 
   const { session } = await validateRequest();

diff --git a/components/menu.tsx b/components/menu.tsx
@@ -131,12 +131,21 @@ export function OptionsMenu({ user }: { user: UserInfo }) {
           </DropdownMenuItem>
         </Link>
         {user && (
-          <DropdownMenuItem>
-            <Link className="flex items-center" href={"/api/sign-out"}>
+          // <DropdownMenuItem>
+          //   <Link className="flex items-center" href={"/api/sign-out"}>
+          //     <Icons.logout className="mr-2 h-4 w-4" />
+          //     Sign Out
+          //   </Link>
+          // </DropdownMenuItem>
+          <form action="/api/sign-out" method="POST">
+            <Button
+              className="flex h-fit cursor-default items-center p-0 hover:bg-transparent"
+              variant="ghost"
+            >
               <Icons.logout className="mr-2 h-4 w-4" />
               Sign Out
-            </Link>
-          </DropdownMenuItem>
+            </Button>
+          </form>
         )}
       </DropdownMenuContent>
     </DropdownMenu>

diff --git a/server/auth.ts b/server/auth.ts
@@ -16,11 +16,6 @@ export const lucia = new Lucia(adapter, {
     expires: false,
     attributes: {
       secure: process.env.NODE_ENV === "production",
-      sameSite: "lax",
-      path: "/", // Ensure the cookie is available for all paths
-      // domain: process.env.NEXT_PUBLIC_DOMAIN
-      //   ? env.NEXT_PUBLIC_DOMAIN
-      //   : undefined,
     },
   },
   getUserAttributes: (attributes) => {
@@ -34,6 +29,7 @@ export const validateRequest = async (): Promise<
   { user: User; session: Session } | { user: null; session: null }
 > => {
   const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
+
   if (!sessionId) {
     return {
       user: null,
@@ -42,13 +38,11 @@ export const validateRequest = async (): Promise<
   }
 
   const result = await lucia.validateSession(sessionId);
-  console.log("validate session result", result);
 
   // next.js throws when you attempt to set cookie when rendering page
   try {
     if (result.session && result.session.fresh) {
       const sessionCookie = lucia.createSessionCookie(result.session.id);
-      console.log("session cookie when fresh", sessionCookie);
       cookies().set(
         sessionCookie.name,
         sessionCookie.value,
@@ -57,20 +51,14 @@ export const validateRequest = async (): Promise<
     }
     if (!result.session) {
       const sessionCookie = lucia.createBlankSessionCookie();
-      console.log("session cookie when blank", sessionCookie);
       cookies().set(
         sessionCookie.name,
         sessionCookie.value,
         sessionCookie.attributes,
       );
     }
-  } catch (error) {
-    // console.log("error setting cookie:", result);
-    if (error instanceof Error) {
-      console.error("error setting cookie: ", error.message);
-    }
-
-    console.log("result of not being able to set cookie:", error);
+  } catch {
+    console.log("error setting cookie:", result);
   }
   return result;
 };