token refresher

client/src/Pages/Navbar.jsx

@@ -1,9 +1,26 @@
 import React from "react";
 import { FaUserCircle } from "react-icons/fa";
-import { NavLink } from "react-router-dom"; // Import NavLink for navigation
+import { NavLink, useNavigate } from "react-router-dom"; // Import NavLink for navigation
 import "./Navbar.css"; // Navbar-specific styles
+import axios from "axios";
 
 const Navbar = () => {
+  const navigate = useNavigate();
+
+  // Handle logout functionality
+  const handleLogout = async () => {
+    try {
+      // Call the logout API
+      await axios.get("http://localhost:8080/auth/logout", { withCredentials: true });
+
+      // Redirect to the login page after successful logout
+      navigate("/");
+    } catch (error) {
+      console.error("Error during logout:", error);
+      alert("Failed to log out. Please try again.");
+    }
+  };
+
   return (
     <header className="navbar">
       <div className="navbar-container">
@@ -21,6 +38,11 @@ const Navbar = () => {
             Course Consolidated
           </NavLink>
         </div>
+        <div>
+          <button className="logout-button" onClick={handleLogout}>
+            Logout
+          </button>
+        </div>
 
         {/* User icon at the right */}
         <NavLink to="/accounts" className="user-icon-link">