Dynamic login/logout button using next-auth

src/components/navbar/Navbar.js

@@ -2,20 +2,33 @@ import React from 'react';
 import Image from 'next/image';
 import { Button } from 'primereact/button';
 import { Menubar } from 'primereact/menubar';
-import 'primereact/resources/primereact.min.css';                  // core css
-import 'primeicons/primeicons.css';                                // icons
+import { useSession, signIn, signOut } from 'next-auth/react';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
 import styles from './navbar.module.css';
 
-const end = (
+const Navbar = () => {
+    const { data: session } = useSession();
+
+    const handleAuthClick = () => {
+        if (session) {
+            signOut();
+        } else {
+            signIn();
+        }
+    };
+
+    const end = (
         <Button
-        label="Login"
+            label={session ? "Logout" : "Login"}
             icon="pi pi-user"
             className="text-[#f8f8ff]"
             rounded
+            onClick={handleAuthClick}
         />
-);
+    );
 
-const start = (
+    const start = (
         <div className={styles.titleContainer}>
             <Image
                 alt="logo"
@@ -26,9 +39,8 @@ const start = (
             />
             <h1 className={styles.title}>PlebDevs</h1>
         </div>
-);
+    );
 
-const Navbar = () => {
     return (
         <Menubar start={start} end={end} className='px-[5%]' />
     );