UserLogin

backend/src/middleware/authMiddleware.js

@@ -38,7 +38,21 @@ const verifyToken = async (req, res, next) => {
   }
 };
 
+const logout = (req, res, next) => {
+  try {
+    const { token } = req.cookies;
+    if (token) {
+      res.clearCookie("token");
+      res.status(200).json({ message: "Logged out successfully" });
+    } else res.status(401).json({ error: "Internal error" });
+  } catch (err) {
+    res.status(401).json({ error: "Internal error" });
+    next(err);
+  }
+};
+
 module.exports = {
   hashPwd,
   verifyToken,
+  logout,
 };

backend/src/router.js

@@ -45,6 +45,8 @@ router.get("/instructionbyrecipe/:id", InstructionControllers.readByRecipe); //
 
 router.use(AuthMiddleware.verifyToken);
 
+router.get("/logout", AuthMiddleware.logout);
+
 router.put(
   "/users/:id",
   uploadUsersAvatars.single("avatar"),

frontend/src/components/Navbar.jsx

@@ -1,5 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import axios from "axios";
+
 import searchIcon from "../assets/searchIcon.svg";
 import namNamIcon from "../assets/namNamIcon.svg";
 import burgerMenuIcon from "../assets/burgerMenuIcon.svg";
@@ -27,6 +29,27 @@ function activateBurgerMenu() {
 
 function Navbar() {
   const [searchValue, setSearchValue] = useState("");
+  const [isLogin, setIsLogin] = useState(false);
+
+  useEffect(() => {
+    axios
+      .get(`${import.meta.env.VITE_BACKEND_URL}/api/verify-token`, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        setIsLogin(res.data.is_loggin);
+      });
+  }, []);
+
+  const handleClickLogout = () => {
+    axios
+      .get(`${import.meta.env.VITE_BACKEND_URL}/api/logout`, {
+        withCredentials: true,
+      })
+      .then(() => {
+        window.location.href = "/";
+      });
+  };
 
   return (
     <>
@@ -86,21 +109,40 @@ function Navbar() {
 
       <div className="BurgerMenu">
         <ul>
-          <li>
-            <a href="/Connexion">
-              Connexion
-              <br />
-              ou
-              <br />
-              Inscription
-            </a>
-          </li>
+          {!isLogin && (
+            <li>
+              <a href="/Connexion">
+                Connexion
+                <br />
+                ou
+                <br />
+                Inscription
+              </a>
+            </li>
+          )}
+
           <li>
             <a href="/recipes">Voir les recettes</a>
           </li>
-          <li>
-            <a href="/">Contact</a>
-          </li>
+          {isLogin && (
+            <>
+              <li>
+                <a href="/createrecipe">Créer une recette</a>
+              </li>
+              <li>
+                <a href="/profil">Mon Profil</a>
+              </li>
+              <li>
+                <button
+                  className="navbar-logout"
+                  type="submit"
+                  onClick={handleClickLogout}
+                >
+                  Se Déconnecter
+                </button>
+              </li>
+            </>
+          )}
         </ul>
       </div>
     </>

frontend/src/components/style/Navbar.scss

@@ -60,6 +60,19 @@
   }
 }
 
+.navbar-logout {
+  font-size: 1rem;
+  font-weight: 550;
+  color: inherit;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  outline: inherit;
+  padding: 0.5rem;
+  color: $black-color;
+  background: none;
+}
+
 .SearchBar {
   display: flex;
   align-items: center;

frontend/src/main.jsx

@@ -64,7 +64,7 @@ const router = createBrowserRouter([
         },
       },
       {
-        path: "/Profil",
+        path: "/profil",
         element: <Profil />,
       },
       { path: "/connexion", element: <Connexion /> },