Add logout route

backend/src/index.ts

@@ -39,6 +39,10 @@ app.use("/api/chat", chatRoutes); // Use the chat routes
 app.use("/api/post", postsRoutes);
 app.use('/api/room', roomRouter);
 // app.get("/api/post/communities", getCommunities);
+app.get('/api/logout', (req: Request, res: Response) => {
+  res.clearCookie('Authorization').json({ message: 'Logged out successfully' });
+});
+
 
 app.get("/", (req: Request, res: Response) => {
   res.send("Backend is running");

frontend/src/components/Logout.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react'
+import { Navigate } from 'react-router-dom'
+import axios from 'axios'; 
+
+const Logout = () => {
+    const [loggedOut, setLoggedOut] = React.useState(false);
+
+    useEffect(() => {
+        const logout = async () => {
+            try {
+                await axios.get("/api/logout", { 
+                    withCredentials: true,
+                });
+                setLoggedOut(true); 
+            } catch (err) {
+                console.error("Error logging out:", err);
+            }
+        };
+        logout();
+    }, []);
+
+    if (loggedOut) {
+        return <Navigate to="/" />; 
+    }
+
+    return null; 
+};
+
+export default Logout;

frontend/src/components/Posts.jsx

@@ -18,6 +18,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import { Navigate, useNavigate } from "react-router-dom";
 import SearchBar from "./SearchBar";
 import { useUser } from "../hook/useUser";
+import Loader from "./loading";
 const Posts = () => {
   const [posts, setPosts] = useState([]);
   const [communities, setCommunities] = useState([]);
@@ -146,7 +147,7 @@ const Posts = () => {
     window.location.reload();
   };
   if (loading) return <div>Loading...</div>;
-  if (loadingUser) return <div>Loading...</div>;
+  if (loadingUser) return <Loader />;
   if (!userDetails) {
     return <Navigate to="/login" />;
   }

frontend/src/components/chatroomui/joinRoom1.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useUser } from '../../hook/useUser';
 import { useNavigate } from 'react-router-dom';
 import { useToast } from '@chakra-ui/react';
+import Loader from '../loading';
 
 const JoinRoom1 = () => {
   const { loading, userDetails } = useUser();
@@ -29,9 +30,7 @@ const JoinRoom1 = () => {
 
   if (loading) {
     return (
-      <div className="flex justify-center items-center h-screen text-xl text-gray-600">
-        Loading...
-      </div>
+      <Loader />
     );
   }
 
@@ -65,6 +64,7 @@ const JoinRoom1 = () => {
     <h2 className="text-2xl font-semibold text-gray-800 mb-6 text-center">
       Your Chat Rooms
     </h2>
+
     <div className="space-y-4">
       {updateArray.length > 0 ? (
         updateArray.map((room) => (

frontend/src/components/routes/mainroute.jsx

@@ -18,6 +18,7 @@ import { Createroom1 } from "../chatroomui/createRoom1";
 import { JoinRoom1 } from "../chatroomui/joinRoom1";
 import { Header } from "../homePage/HomePage";
 import Navbar from "../MainNavbar";
+import Logout from "../Logout";
 
 const Test = () => {
   const [userId, setUserId] = useState("");
@@ -54,6 +55,16 @@ const Mainrouter = createBrowserRouter([
       },
     ]
   },
+{
+  path: "/",
+  element: <Navbar btnName="sign up" display={true} navigateUrl="/signup" />,
+  children: [
+    {
+      path: "logout",
+      element: <Logout />,
+    },
+  ]
+},
   {
     path: "/",
     element: <Navbar btnName="login" display={true} navigateUrl="/login"/>,