diff --git a/src/components/Layout/TopBar.jsx b/src/components/Layout/TopBar.jsx
index 0c00857..8916882 100644
--- a/src/components/Layout/TopBar.jsx
+++ b/src/components/Layout/TopBar.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useAuth } from "../../auth/AuthContext";
 import { registerUser } from "../../api/client";
 
@@ -46,19 +46,34 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
 
   const closeModal = () => {
     setShowAuth(false);
+    // reset basique des champs
+    setLoginPass("");
+    setSignupError("");
   };
 
+  // 🔒 Quand on devient authentifié → fermer automatiquement le popup
+  useEffect(() => {
+    if (authenticated) {
+      setShowAuth(false);
+    }
+  }, [authenticated]);
+
   const handleLoginSubmit = async (e) => {
     e.preventDefault();
     await login(loginUser, loginPass);
-    // on laisse l'utilisateur fermer manuellement,
-    // il voit en haut si ça a marché ou pas.
+    // le useEffect ci-dessus va fermer le modal quand authenticated passe à true
   };
 
   const handleSignupSubmit = async (e) => {
     e.preventDefault();
     setSignupError("");
-    if (!firstName.trim() || !lastName.trim() || !regUser.trim() || !regEmail.trim() || !regPass) {
+    if (
+      !firstName.trim() ||
+      !lastName.trim() ||
+      !regUser.trim() ||
+      !regEmail.trim() ||
+      !regPass
+    ) {
       setSignupError("Nom, prénom, user, email et mot de passe sont requis.");
       return;
     }
@@ -73,8 +88,7 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
       });
       // après création, on tente le login direct
       await login(regUser.trim(), regPass);
-      // on ferme le popup, l'état auth s'affiche dans la topbar
-      setShowAuth(false);
+      // la fermeture est gérée aussi par le useEffect(authenticated)
     } catch (err) {
       console.error(err);
       setSignupError(err.message || "Register error.");