enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx

@@ -0,0 +1,20 @@
+import { EnterIcon } from "@radix-ui/react-icons";
+import { Flex, Text } from "@radix-ui/themes";
+import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+export default function LoginButton() {
+    const { t } = useTranslation();
+
+    return (
+        <Link to={"/login"}>
+            <Flex className="justify-between gap-2">
+                <Icon>
+                    <EnterIcon />
+                </Icon>
+                <Text>{t("signIn")}</Text>
+            </Flex>
+        </Link>
+    );
+}

enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx

@@ -0,0 +1,48 @@
+import { ExitIcon } from "@radix-ui/react-icons";
+import { Flex, Text } from "@radix-ui/themes";
+import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
+import { useMutation } from "@tanstack/react-query";
+import { useSetAtom } from "jotai";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import queryClient from "../../../../../api/QueryClient/QueryClient";
+import { userAtom } from "../../../../../AtomStore/AtomStore";
+import useToast from "../../../../../hooks/useToast";
+import { logout } from "../../../../../utils/logout";
+
+export default function LogoutButton() {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const setUserData = useSetAtom(userAtom)
+
+    const createToast = useToast()
+
+    const logoutMutation = useMutation({
+        onMutate: () => {
+            queryClient.cancelQueries({
+                queryKey: ["authKey"],
+            });
+        },
+        mutationFn: async () => {
+            await logout();
+        },
+        onError: () => {},
+        onSuccess: () => {
+            setUserData(undefined)
+            createToast({ title: "Success!", description: "Logged out successfully"})
+            navigate("/");
+        },
+    });
+
+    return (
+        <Flex
+            className="justify-between gap-2"
+            onClick={() => logoutMutation.mutate()}
+        >
+            <Icon>
+                <ExitIcon />
+            </Icon>
+            <Text>{t("signOut")}</Text>
+        </Flex>
+    );
+}

enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx

@@ -1,8 +1,6 @@
 import {
-    EnterIcon,
-    ExitIcon,
     LaptopIcon,
-    PersonIcon,
+    PersonIcon
 } from "@radix-ui/react-icons";
 import { DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes";
 import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
@@ -10,6 +8,8 @@ import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { userAtom } from "../../../../AtomStore/AtomStore";
+import LoginButton from "./LoginButton/LoginButton";
+import LogoutButton from "./LogoutButton/LogoutButton";
 
 export default function UserButton() {
     const user = useAtomValue(userAtom);
@@ -19,7 +19,7 @@ export default function UserButton() {
         <div className="">
             <DropdownMenu.Root>
                 <DropdownMenu.Trigger>
-                    <IconButton>
+                    <IconButton className="cursor-pointer">
                         <PersonIcon />
                     </IconButton>
                 </DropdownMenu.Trigger>
@@ -52,21 +52,9 @@ export default function UserButton() {
 
                     <DropdownMenu.Item color={user ? "red" : "green"}>
                         {user ? (
-                            <Flex className="justify-between gap-2">
+                            <LogoutButton />
-                                <Icon>
-                                    <ExitIcon />
-                                </Icon>
-                                <Text>{t("signOut")}</Text>
-                            </Flex>
                         ) : (
-                            <Link to={"/login"}>
+                            <LoginButton />
-                                <Flex className="justify-between gap-2">
-                                    <Icon>
-                                        <EnterIcon />
-                                    </Icon>
-                                    <Text>{t("signIn")}</Text>
-                                </Flex>
-                            </Link>
                         )}
                     </DropdownMenu.Item>
                 </DropdownMenu.Content>

enshi/src/utils/logout.ts

@@ -0,0 +1,13 @@
+import { axiosLocalhost } from "../api/axios/axios";
+
+export async function logout() {
+    try {
+        let response = await axiosLocalhost.delete('/auth/logout')
+        console.log(`Logout successful`)
+        return true;
+    }
+    catch (error) {
+        console.error(error)
+        return false;
+    }
+}

enshi_back/REST_API_stuff/setCookie.go

@@ -25,3 +25,15 @@ func SetCookie(c *gin.Context, params *CookieParams) {
 		params.HttpOnly,
 	)
 }
+
+func RemoveCookie(c *gin.Context, params *CookieParams) {
+	c.SetCookie(
+		params.Name,
+		params.Value,
+		-1,
+		params.Path,
+		params.Domain,
+		params.Secure,
+		params.HttpOnly,
+	)
+}

enshi_back/middleware/corsMiddleware.go

@@ -12,7 +12,7 @@ func CORSMiddleware() gin.HandlerFunc {
 				"authorization, Authorization, accept, origin, Cache-Control, "+
 				"X-Requested-With, Cookie",
 		)
-		c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT")
+		c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT, DELETE, PATCH")
 		c.Writer.Header().Set("Access-Control-Expose-Headers", "Access-Token, Uid, Authorization")
 
 		if c.Request.Method == "OPTIONS" {

enshi_back/routes/authRoutes/logout.go

@@ -0,0 +1,13 @@
+package authRoutes
+
+import (
+	"enshi/global"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+func Logout(c *gin.Context) {
+	c.SetCookie("auth_cookie", "", -1, "/", global.DomainForCookies, false, true)
+	c.IndentedJSON(http.StatusOK, gin.H{"message": "you have been logged out"})
+}

enshi_back/routes/routesSetup.go

@@ -204,6 +204,11 @@ func SetupRotes(g *gin.Engine) error {
 	authGroup.Use(middleware.AuthMiddleware())
 	authGroup.GET("check", testAuth)
 
+	authGroup.DELETE(
+		"logout",
+		authRoutes.Logout,
+	)
+
 	temporal := g.Group("/")
 	temporal.Use(middleware.AuthMiddleware())