..

client/src/App.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { UserProvider } from './Components/userContext';
 import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
 import Home from './Components/Home';  // Ensure this path is correct
 import AuthComponent from './Components/authComponent';
@@ -9,15 +10,15 @@ import { CssBaseline, Box } from '@mui/material';
 
 function App() {
     return (
-        <Router>
+        <UserProvider>
             <Layout>
                 <Routes>
                     <Route path="/" element={<Home />} />
                     <Route path="/auth" element={<AuthComponent />} />
                     <Route path="/user/profile/:userId" element={<UserProfile />} />
                 </Routes>
             </Layout>
-        </Router>
+        </ UserProvider>
     );
 }
 

client/src/Components/authComponent.jsx

@@ -87,6 +87,8 @@ function AuthComponent() {
         const response = await axios.post('/api/user/login', { username, password });
         if (response && response.data) {
           const userId = response.data.userId;
+          localStorage.setItem('token', response.data.access_token);  // Ensure this is correctly saving the token
+          console.log('Token stored:', localStorage.getItem('token')); // Confirm the token is stored
           setMessage('Login successful!');
           setSeverity('success');
           setIsAuthenticated(true);
@@ -121,6 +123,8 @@ function AuthComponent() {
             });
             if (response && response.data) {
               const userId = response.data.userId;
+              localStorage.setItem('token', response.data.access_token);  // Ensure this is correctly saving the token
+              console.log('Token stored:', localStorage.getItem('token')); // Confirm the token is stored
               setMessage('User registered successfully!');
               setSeverity('success');
               setIsAuthenticated(true);
@@ -147,6 +151,8 @@ function AuthComponent() {
             const response = await axios.post('/api/user/anonymous_signin');
             if (response && response.data) {
               const userId = null;
+              localStorage.setItem('token', response.data.access_token);  // Ensure this is correctly saving the token
+              console.log('Token stored:', localStorage.getItem('token')); // Confirm the token is stored
               setMessage('Anonymous sign-in successful!');
               setSeverity('success');
               setIsAuthenticated(true);

client/src/Components/sideBar.jsx

@@ -1,28 +1,29 @@
-import React from 'react';
-import { Drawer, List, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material';
+import React, {useContext} from 'react';
+import { Drawer, List, ListItem, ListItemIcon, ListItemText} from '@mui/material';
 import HomeIcon from '@mui/icons-material/Home';
 import PersonIcon from '@mui/icons-material/Person';
-import SettingsIcon from '@mui/icons-material/Settings';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import { UserContext } from './userContext';
 
-const drawerWidth = 240;
+const drawerWidth = 230;
 
 function Sidebar() {
+  const { logout } = useContext(UserContext);
   return (
     <Drawer
       sx={{
         width: drawerWidth,
         flexShrink: 0,
+        mt: 8,
         '& .MuiDrawer-paper': {
           width: drawerWidth,
           boxSizing: 'border-box',
+          position: 'relative'
         },
       }}
       variant="permanent"
       anchor="left"
     >
-      <Typography variant="h6" sx={{ my: 2, mx: 2 }}>
-        Dashboard
-      </Typography>
       <List>
         <ListItem button>
           <ListItemIcon><HomeIcon /></ListItemIcon>
@@ -32,10 +33,11 @@ function Sidebar() {
           <ListItemIcon><PersonIcon /></ListItemIcon>
           <ListItemText primary="Profile" />
         </ListItem>
-        <ListItem button>
-          <ListItemIcon><SettingsIcon /></ListItemIcon>
-          <ListItemText primary="Settings" />
-        </ListItem>
+        <ListItem button onClick={logout}>
+          <ListItemIcon><ExitToAppIcon /></ListItemIcon>
+          <ListItemText primary="Logout" /> 
+        </ListItem>      
+
       </List>
     </Drawer>
   );

client/src/Components/userContext.jsx

@@ -1,12 +1,38 @@
-import React, { createContext, useState } from 'react';
-
+import React, { createContext, useState, useCallback } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
 export const UserContext = createContext(null);
 
 export const UserProvider = ({ children }) => {
-  const [user, setUser] = useState({ userId: null });
+  const [user, setUser] = useState(null);
+  const navigate = useNavigate();
+  const logout = useCallback(async () => {
+    try {
+      const token = localStorage.getItem('token');
+      console.log('Logging out with token:', token);
+      if (!token) {
+        console.error('No token available for logout');
+        return; // Exit the function if no token is available
+      }
+      const response = await axios.post('/api/user/logout', {}, {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      if (response.status === 200) {
+        setUser(null); // Clear user context
+        localStorage.removeItem('token'); // Clear token from local storage
+        navigate('/auth'); // Redirect after logout
+      } else {
+        throw new Error('Logout failed with status: ' + response.status);
+      }
+    } catch (error) {
+      console.error('Logout failed:', error.response?.data || error.message);
+    }
+  }, [navigate]);
 
   return (
-    <UserContext.Provider value={{ user, setUser }}>
+    <UserContext.Provider value={{ user, setUser, logout }}>
       {children}
     </UserContext.Provider>
   );

client/src/main.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import { UserProvider } from './Components/userContext';
+import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <UserProvider>
+    <BrowserRouter>
     <App />
-    </UserProvider>
+    </BrowserRouter>
   </React.StrictMode>,
 )

server/tools/azure_mongodb.py

@@ -159,4 +159,6 @@ def get_user_mood_logs(user_id):
             return list(db.mood_logs.find({"user_id": user_id}))
         except pymongo.errors.PyMongoError as e:
             logging.error(f"Error retrieving mood logs: {str(e)}")
-            raise
+            raise
+
+