fix(Authentication): delete token cookie on logout

client/app/(account)/account/components/Content/index.jsx

@@ -23,7 +23,7 @@ import { FaCompass, FaBell, FaShieldAlt, FaDiscord } from 'react-icons/fa';
 import { RiBrush2Fill, RiRobot2Fill } from 'react-icons/ri';
 import useAuthStore from '@/stores/auth';
 import { HiTemplate } from 'react-icons/hi';
-import { useLocalStorage, useMedia } from 'react-use';
+import { useCookie, useLocalStorage, useMedia } from 'react-use';
 import { PiWaveformBold } from 'react-icons/pi';
 import { FiLink } from 'react-icons/fi';
 import { useShallow } from 'zustand/react/shallow';
@@ -54,13 +54,15 @@ export default function Content() {
   const router = useRouter();
 
   const [themesPageVisited, setThemesPageVisited] = useLocalStorage('themes-page-visited', false);
+  const [,, deleteToken] = useCookie('token');
 
   function logOut() {
     toast.promise(logout(), {
       loading: 'Please wait while we log you out..',
       success: () => {
         setLoggedIn(false);
         setUser(null);
+        deleteToken(null);
 
         return 'Logged out successfully.';
       },

client/app/(dashboard)/components/Sidebar/index.jsx

@@ -29,7 +29,7 @@ import CollapseIcon from '@/app/(dashboard)/components/Sidebar/Icons/Collapse';
 import { BiSolidChevronRight } from 'react-icons/bi';
 import Tooltip from '@/app/components/Tooltip';
 import Link from 'next/link';
-import { useMedia } from 'react-use';
+import { useCookie, useMedia } from 'react-use';
 import { useEffect } from 'react';
 import syncLemonSqueezyPlans from '@/lib/request/auth/syncLemonSqueezyPlans';
 
@@ -162,13 +162,15 @@ export default function Sidebar() {
   const user = useAuthStore(state => state.user);
   const setUser = useAuthStore(state => state.setUser);
   const setLoggedIn = useAuthStore(state => state.setLoggedIn);
+  const [,, deleteToken] = useCookie('token');
 
   function logOut() {
     toast.promise(logout(), {
       loading: 'Please wait while we log you out..',
       success: () => {
         setLoggedIn(false);
         setUser(null);
+        deleteToken();
 
         return 'Logged out successfully.';
       },

client/app/components/Header/UserSide.jsx

@@ -1,10 +1,12 @@
+'use client';
+
 import useAuthStore from '@/stores/auth';
 import Link from 'next/link';
 import config from '@/config';
 import { usePathname } from 'next/navigation';
 import cn from '@/lib/cn';
 import { useEffect, useState } from 'react';
-import { useWindowScroll } from 'react-use';
+import { useCookie, useWindowScroll } from 'react-use';
 import { BiLogOut } from 'react-icons/bi';
 import logout from '@/lib/request/auth/logout';
 import { toast } from 'sonner';
@@ -17,6 +19,8 @@ export default function UserSide({ className }) {
   const user = useAuthStore(state => state.user);
   const setUser = useAuthStore(state => state.setUser);
   const setLoggedIn = useAuthStore(state => state.setLoggedIn);
+  const [,, deleteToken] = useCookie('token');
+
   const pathname = usePathname();
 
   const [open, setOpen] = useState(false);
@@ -32,6 +36,7 @@ export default function UserSide({ className }) {
       success: () => {
         setUser(null);
         setLoggedIn(false);
+        deleteToken();
 
         return 'Logged out successfully';
       },

server/src/server.js

@@ -123,6 +123,7 @@ module.exports = class Server {
           next();
         } catch (error) {
           logger.error('There was an error verifying the token:', error);
+
           response.clearCookie('token');
 
           return response.sendError('Unauthorized', 401);