Added profile data but clears after refresh

components/Authentication/SignInForm.js

@@ -107,12 +107,13 @@ const SignInForm = () => {
         httpOnly: true, // Make the cookie accessible only via HTTP (recommended for security)
       };
 
-      
       // Set the login token in a cookie
       await setCookie("cmc-token", res.token);
 
       const userProfileData = res.profile;
-      dispatch({ type: 'SET_USER_PROFILE', payload: userProfileData });
+      localStorage.setItem("cmc-profile", JSON.stringify(userProfileData));
+
+      dispatch({ type: "SET_USER_PROFILE", payload: userProfileData });
 
       enqueueSnackbar("Login Successful", {
         variant: "success",

components/_App/TopNavbar/Profile.js

@@ -23,6 +23,8 @@ const Profile = () => {
   const { state } = useUserProfile();
   const userProfile = state.userProfile;
 
+  console.log(userProfile)
+
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -102,7 +104,7 @@ const Profile = () => {
                 fontWeight: "500",
               }}
             >
-              Adison Jeck
+              {`${userProfile?.firstname} ${userProfile?.lastname}`}
             </Typography>
           </Box>
         </MenuItem>

pages/_app.js

@@ -31,8 +31,9 @@ function MyApp({ Component, pageProps }) {
     }
   };
 
-  // Attach the event handler when the component mounts
   useEffect(() => {
+    
+    // Attach the event handler when the component mounts
     window.onpopstate = handlePopState;
 
     // Clean up the event handler when the component unmounts

pages/auth/logout.js

@@ -8,8 +8,9 @@ import { deleteCookie } from "cookies-next";
 export default function Logout() {
   const router = useRouter();
   const handleLogout = () => {
-    // Remove the cookie
+    // Remove the cookie and local storage
     deleteCookie("cmc-token");
+    localStorage.removeItem("cmc-profile");
 
     // Use replaceState to replace the current URL with the root URL
     window.history.replaceState({}, document.title, window.location.href);

utils/localStorageHandler.js

@@ -0,0 +1,27 @@
+// utils/localStorageHandler.js
+import { getCookie, deleteCookie } from "cookies-next";
+
+const handleLocalStorageChanges = () => {
+  const storedUserProfile = localStorage.getItem('cmc-profile');
+  const storedToken = getCookie('cmc-token');
+
+  window.onstorage = (e) => {
+    if (e.key === 'userProfile' && e.newValue !== storedUserProfile) {
+      // User profile data in 'localStorage' has changed
+
+      // Delete the 'userProfile' from 'localStorage'
+      localStorage.removeItem("cmc-profile");
+
+      // Delete the 'cmc-token' cookie
+      deleteCookie('cmc-token');
+
+      // Redirect to the login page
+      window.location.href = '/auth/login';
+
+      // Reload the page
+      window.location.reload();
+    }
+  };
+};
+
+export default handleLocalStorageChanges;