Implemented a simple authentication scheme with Firebase and Iron Session

src/components/Navbar.tsx

@@ -1,4 +1,6 @@
+import axios from "axios";
 import Link from "next/link";
+import {useRouter} from "next/router";
 
 interface Props {
 	profilePicture: string;
@@ -6,8 +8,16 @@ interface Props {
 
 /* eslint-disable @next/next/no-img-element */
 export default function Navbar({profilePicture}: Props) {
+	const router = useRouter();
+
+	const logout = async () => {
+		axios.post("/api/logout").finally(() => {
+			router.push("/login");
+		});
+	};
+
 	return (
-		<div className="navbar bg-neutral-100 drop-shadow-md text-black">
+		<div className="navbar bg-neutral-100 drop-shadow-md text-black z-10">
 			<div className="flex-1">
 				<Link className="btn btn-ghost normal-case text-xl" href="/">
 					IELTS GPT
@@ -34,7 +44,7 @@ export default function Navbar({profilePicture}: Props) {
 							<a>Settings</a>
 						</li>
 						<li>
-							<a>Logout</a>
+							<a onClick={logout}>Logout</a>
 						</li>
 					</ul>
 				</div>