Add logout in user dropdown

backend/users/views.py

@@ -95,6 +95,8 @@ class GoogleRetrieveUserInfo(APIView):
     """
     Retrieve user information from Google and create a user if not exists.
     """
+    permission_classes = (AllowAny,)
+
     def post(self, request):
         access_token = request.data.get("token")
 

frontend/src/App.jsx

@@ -13,12 +13,6 @@ const App = () => {
         <BrowserRouter>
         <div className="App">
                     <NavBar/>
-                    <nav>
-                        <Link className={"nav-link"} to={"/"}>Home</Link>
-                        <Link className={"nav-link"} to={"/login"}>Login</Link>
-                        <Link className={"nav-link"} to={"/signup"}>Signup</Link>
-                        <Link className={"nav-link"} to={"/testAuth"}>testAuth</Link>
-                    </nav>
                     <Routes>
                         <Route path={"/"} render={() => <h1>This is Home page!</h1>} />
                         <Route path="/login" element={<AuthenticantionPage/>}/>

frontend/src/components/Nav/Navbar.jsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import IsAuthenticated from '../authentication/IsAuthenticated';
+import axiosapi from '../../api/axiosapi';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -13,6 +15,7 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 import AdbIcon from '@mui/icons-material/Adb';
+import Stack from '@mui/material/Stack';
 
 const pages = {
     TestAuth: '/testAuth',
@@ -22,7 +25,6 @@ const settings = {
     Profile: '/profile',
     Account: '/account',
     Dashboard: '/dashboard',
-    Logout: '/logout',
   };
 
 function NavBar() {
@@ -44,6 +46,14 @@ function NavBar() {
     setAnchorElUser(null);
   };
 
+  const isAuthenticated = IsAuthenticated();
+
+  const logout = () => {
+    // Log out the user, clear tokens, and navigate to the "/testAuth" route
+    axiosapi.apiUserLogout();
+    Navigate('/testAuth');
+}
+
   return (
     <AppBar position="static">
       <Container maxWidth="xl">
@@ -138,6 +148,7 @@ function NavBar() {
             ))}
           </Box>
 
+        {isAuthenticated ? (
         <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Open settings">
             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
@@ -167,8 +178,23 @@ function NavBar() {
                 </Link>
                 </MenuItem>
             ))}
+              <MenuItem>
+                <Link to={'/'} onClick={logout} className="nav-link">
+                    <Typography textAlign="center">Logout</Typography>
+                </Link>
+              </MenuItem>
             </Menu>
         </Box>
+        ) : (
+            <Stack direction="row" spacing={2}>
+                <Button variant="contained" href="/login" color="secondary">
+                Login
+                </Button>
+                <Button variant="contained" href="/signup" color="secondary">
+                Sign Up
+                </Button>
+            </Stack>
+        )}
         </Toolbar>
       </Container>
     </AppBar>

frontend/src/components/authentication/IsAuthenticated.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import axiosapi from './axiosapi';
+import axiosapi from '../../api/axiosapi';
 
 function IsAuthenticated() {
   const [isAuthenticated, setIsAuthenticated] = useState(false);