fix(auth): logout

Author: joonas-yoon

react-app/src/App.js

@@ -5,9 +5,10 @@ import { AuthProvider } from 'providers/AuthProvider';
 import Navbar from 'components/NavBar';
 
 const links = [
-  { href: '/my', title: 'Go to My Page' },
-  { href: '/login', title: 'Go to login' },
-  { href: '/', title: 'Go to index' },
+  { href: '/', title: 'Home' },
+  { href: '/my', title: 'My Page' },
+  { href: '/login', title: 'Login', credential: true },
+  { href: '/logout', title: 'Logout', credential: false },
 ];
 
 const App = () => {

react-app/src/components/NavBar.jsx

@@ -1,29 +1,47 @@
 import { AppBar, Box, Toolbar, Typography, styled } from '@mui/material';
+import React, { useCallback } from 'react';
 
 import { Link } from 'react-router-dom';
+import { useAuth } from 'providers/AuthProvider';
 
 const NavItem = styled(Link)`
   color: white;
   text-decoration-line: none;
 `;
 
-const NavLink = ({ href, title, ...props }) => (
-  <NavItem to={href} key={`menu-${href}`}>
-    <Typography>{title}</Typography>
-  </NavItem>
-);
+const NavBar = ({ links }) => {
+  const { isAuthenticated } = useAuth();
 
-const NavBar = ({ links }) => (
-  <AppBar position="relative">
-    <Toolbar>
-      {links &&
-        links.map((link) => (
-          <Box sx={{ flexGrow: 1 }} key={`nav-${link.href}`}>
-            <NavLink href={link.href} title={link.title} />
+  const isHidden = (credential) => {
+    if (credential === undefined) return false;
+    return credential === isAuthenticated;
+  };
+
+  const Item = useCallback(
+    ({ href, title, credential }) => {
+      console.log('item', href, credential, isAuthenticated);
+      if (isHidden(credential)) {
+        return <></>;
+      } else {
+        return (
+          <Box sx={{ flexGrow: 1 }}>
+            <NavItem to={href} key={`menu-${href}`}>
+              <Typography>{title}</Typography>
+            </NavItem>
           </Box>
-        ))}
-    </Toolbar>
-  </AppBar>
-);
+        );
+      }
+    },
+    [isAuthenticated],
+  );
+
+  return (
+    <AppBar position="relative">
+      <Toolbar>
+        {links && links.map((link) => <Item key={`nav-item-${link.href}`} {...link} />)}
+      </Toolbar>
+    </AppBar>
+  );
+};
 
 export default NavBar;

react-app/src/pages/Auth.jsx

@@ -129,8 +129,10 @@ export const Login = () => {
 };
 
 export const Logout = () => {
+  const { logout } = useAuth();
   const location = useNavigate();
   useEffect(() => {
+    logout();
     location(-1);
   }, [location]);
 };

react-app/src/pages/MyPage.jsx

@@ -1,12 +1,14 @@
-import { Avatar, Container, Grid, Typography, Button, Stack } from '@mui/material';
+import { Avatar, Container, Typography, Button, Stack } from '@mui/material';
 import React, { useEffect, useCallback, useState } from 'react';
 
 import { Card } from 'components/Card';
-import { ProtectedRoute } from 'providers/AuthProvider';
+import { ProtectedRoute, useAuth } from 'providers/AuthProvider';
 import { customAxios } from 'libs/customAxios';
 
 const MyPage = () => {
   const [userData, setUserData] = useState(null);
+  const { logout } = useAuth();
+
   useEffect(() => {
     customAxios()
       .get('/users/me')
@@ -49,7 +51,9 @@ const MyPage = () => {
             </Typography>
           </div>
           <div style={{ textAlign: 'center' }}>
-            <Button variant="contained">Logout</Button>
+            <Button variant="contained" onClick={() => logout({ redirectUrl: '/' })}>
+              Logout
+            </Button>
           </div>
         </Stack>
       </Card>

react-app/src/providers/AuthProvider.jsx

@@ -55,12 +55,17 @@ export const AuthProvider = ({ afterLogin, children }) => {
     const { location } = window;
     const url = new URL(location.href);
     const next = url.searchParams.get('next');
-    navigate(redirectUrl || afterLogin || next || '/');
+    navigate(redirectUrl || next || afterLogin || '/');
   };
 
-  const handleLogout = () => {
+  const handleLogout = (options) => {
+    const { redirectUrl } = options || {};
     console.log('handleLogout', getToken());
     updateToken(null);
+    setAuthenticated(false);
+    if (redirectUrl) {
+      navigate(redirectUrl);
+    }
   };
 
   const value = {