PB-17h: Logout user

application/backend/app/api/auth.py

@@ -5,7 +5,7 @@
 from app.repositories.user_repository import UserRepository
 from app.models.user_schema import UserSchema
 from app.auth import auth
-from flask_jwt_extended import create_access_token, create_refresh_token, jwt_required, get_jwt_identity, set_access_cookies
+from flask_jwt_extended import create_access_token, create_refresh_token, jwt_required, get_jwt_identity, set_access_cookies, unset_jwt_cookies
 from app.services.slack_organization_service import SlackOrganizationService
 from app.services.injector import injector
 
@@ -123,3 +123,11 @@ def get(self):
             set_access_cookies(response, access_token)
             return response
         return abort(401, message = "User email not available or not verified by Slack.")
+
+
+@bp.route("/logout")
+class Auth(views.MethodView):
+    def delete(self):
+        response = jsonify(msg="Successfully logged out")
+        unset_jwt_cookies(response)
+        return response

application/next-frontend/pages/admin/index.tsx

@@ -2,6 +2,7 @@ import { GetServerSideProps } from 'next'
 import jwtDecode from 'jwt-decode'
 import type { JwtToken, User } from '@/Admin/types/User'
 import { Home } from 'Admin/scenarios/Home'
+import { Navbar } from '@/Admin/scenarios/Navbar'
 
 export const getServerSideProps: GetServerSideProps = async ({ req }) => {
     const jwt = req.cookies['access_token_cookie']
@@ -18,7 +19,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req }) => {
 const AdminHome = ({ user }: { user: User }) => {
     return (
         <div>
-            <h1>{user.name} logged in as admin</h1>
+            <Navbar user={user} />
             <Home />
         </div>
     )

application/next-frontend/src/Admin/scenarios/Navbar.tsx

@@ -1,26 +1,24 @@
-import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { User } from '../types/User'
+import { apiRequestHelper } from '@/api/utils'
 
-const Navbar = () => {
-    const navbar = [
-        { name: 'Home', link: '/admin' },
-        { name: 'About', link: '/admin/about' },
-        { name: 'Pictures', link: '/admin/pictures' },
-    ]
+const Navbar = ({ user }: { user: User }) => {
+    const router = useRouter()
 
+    const logout = async () => {
+        try {
+            const res = await apiRequestHelper.del<{ msg: string }>('/auth/logout')
+            if (res) router.push('/login')
+        } catch (err) {
+            console.error(err)
+        }
+    }
     return (
-        <div className="overflow-hidden bg-teal-400 text-gray-700">
-            <ul className="flex items-center space-x-6 p-4">
-                {navbar.map((entry) => (
-                    <li className="m-3 cursor-pointer" key={entry.name}>
-                        <Link
-                            href={entry.link}
-                            className="text-lg font-bold transition duration-300 hover:text-gray-500"
-                        >
-                            {entry.name}
-                        </Link>
-                    </li>
-                ))}
-            </ul>
+        <div className="flex w-full items-center gap-4 overflow-hidden bg-teal-400 px-8 py-4 text-gray-700">
+            <div className="flex-1">Logged in as {user.name}</div>
+            <button className="m-auto w-fit border border-black px-8 py-2 hover:bg-slate-300" onClick={logout}>
+                Logout
+            </button>
         </div>
     )
 }