auth

components/AdminNav.tsx

@@ -1,14 +1,21 @@
 import React from "react";
 import Link from "next/link";
 import styles from "@/styles/modules/AdminNav.module.scss";
+import { useSession } from "next-auth/react";
+import { redirect, useRouter } from "next/navigation";
 
 function AdminNav() {
-  return (
-    <div className={styles.adminNav}>
-      <Link href={"/admin/editor/article/0"}>New article</Link>
-      <Link href={"/admin/editor/category/0"}>New category</Link>
-    </div>
-  );
+  const { data: session } = useSession();
+
+  if (session) {
+    return (
+      <div className={styles.adminNav}>
+        <Link href={"/admin/editor/article/0"}>New article</Link>
+        <Link href={"/admin/editor/category/0"}>New category</Link>
+        <Link href={"/api/auth/signout"}>Logout</Link>
+      </div>
+    );
+  }
 }
 
 export default AdminNav;

components/ArticleControl.tsx

@@ -2,8 +2,12 @@ import React from "react";
 import { apiUrl } from "@/global";
 import urlJoin from "url-join";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { isElementAccessExpression } from "typescript";
 
 export default function ArticleControl({ articleId }: { articleId: string }) {
+  const { data: session } = useSession();
+
   const router = useRouter();
   async function deleteArticle() {
     await fetch(urlJoin(apiUrl, `articles/${articleId}`), { method: "DELETE" })
@@ -17,15 +21,18 @@ export default function ArticleControl({ articleId }: { articleId: string }) {
   function editArticle() {
     router.push("/admin/editor/article/" + articleId);
   }
-
-  return (
-    <div>
-      <button className="danger" onClick={deleteArticle}>
-        Delete
-      </button>
-      <button className="warning" onClick={editArticle}>
-        Edit
-      </button>
-    </div>
-  );
+  if (session) {
+    return (
+      <div>
+        <button className="danger" onClick={deleteArticle}>
+          Delete
+        </button>
+        <button className="warning" onClick={editArticle}>
+          Edit
+        </button>
+      </div>
+    );
+  } else {
+    return <></>;
+  }
 }

components/CategoryControl.tsx

@@ -2,8 +2,11 @@ import React from "react";
 import { apiUrl } from "@/global";
 import urlJoin from "url-join";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 
 export default function CategoryControl({ categoryId }: { categoryId: string }) {
+  const { data: session } = useSession();
+
   const router = useRouter();
   async function deleteCategory() {
     await fetch(urlJoin(apiUrl, `categories/${categoryId}`), { method: "DELETE" })
@@ -18,14 +21,18 @@ export default function CategoryControl({ categoryId }: { categoryId: string })
     router.push("/admin/editor/category/" + categoryId);
   }
 
-  return (
-    <div>
-      <button className="danger" onClick={deleteCategory}>
-        Delete
-      </button>
-      <button className="warning" onClick={editCategory}>
-        Edit
-      </button>
-    </div>
-  );
+  if (session) {
+    return (
+      <div>
+        <button className="danger" onClick={deleteCategory}>
+          Delete
+        </button>
+        <button className="warning" onClick={editCategory}>
+          Edit
+        </button>
+      </div>
+    );
+  } else {
+    return <></>;
+  }
 }

components/Nav.tsx

@@ -123,7 +123,7 @@ export default function Nav() {
               <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z" />
             </svg>
           </div>
-          <input onInput={handleSearchInput} type="text" name="" id="" />
+          <input onChange={handleSearchInput} type="text" name="" id="" />
         </div>
         <div className={styles.searchResults}>
           <div className={styles.content}>