Added user authentication.

pages/auth/login.tsx

@@ -0,0 +1,80 @@
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+
+interface FormData {
+  email: string;
+  password: string;
+}
+
+export default function Login() {
+  const session = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (session.status === "authenticated") {
+      router.push("/");
+      console.log("Already logged in.");
+    }
+  }, []);
+
+  const [form, setForm] = useState<FormData>({
+    email: "",
+    password: "",
+  });
+
+  async function loginUser() {
+    console.log(form);
+    if (form.email != "" && form.password != "") {
+      const res = await signIn("credentials", {
+        email: form.email,
+        password: form.password,
+        redirect: false,
+      });
+
+      if (res?.ok) {
+        setForm({
+          email: "",
+          password: "",
+        });
+
+        router.push("/");
+      } else {
+        console.log("User not found or password does not match.", res);
+      }
+    } else {
+      console.log("Please fill out all the fields.");
+    }
+  }
+
+  return (
+    <div className="p-5">
+      <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
+      <input
+        type="text"
+        placeholder="Email"
+        value={form.email}
+        onChange={(e) => setForm({ ...form, email: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <input
+        type="text"
+        placeholder="Password"
+        value={form.password}
+        onChange={(e) => setForm({ ...form, password: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <div
+        className="mx-auto bg-black w-min p-3 m-5 text-white rounded cursor-pointer"
+        onClick={loginUser}
+      >
+        Login
+      </div>
+      <Link href={"/auth/register"} className="block mx-auto w-min">
+        Register
+      </Link>
+    </div>
+  );
+}

pages/auth/register.tsx

@@ -0,0 +1,96 @@
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+
+interface FormData {
+  name: string;
+  email: string;
+  password: string;
+}
+
+export default function Register() {
+  const session = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (session.status === "authenticated") {
+      router.push("/");
+      console.log("Already logged in.");
+    }
+  }, [session]);
+
+  const [form, setForm] = useState<FormData>({
+    name: "",
+    email: "",
+    password: "",
+  });
+
+  async function registerUser() {
+    let success: boolean = false;
+    console.log(form);
+
+    if (form.name != "" && form.email != "" && form.password != "") {
+      await fetch("/api/auth/register", {
+        body: JSON.stringify(form),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      })
+        .then((res) => {
+          success = res.ok;
+          return res.json();
+        })
+        .then((data) => console.log(data));
+
+      if (success) {
+        setForm({
+          name: "",
+          email: "",
+          password: "",
+        });
+
+        router.push("/auth/login");
+      }
+    } else {
+      console.log("Please fill out all the fields.");
+    }
+  }
+
+  return (
+    <div className="p-5">
+      <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
+      <input
+        type="text"
+        placeholder="Name"
+        value={form.name}
+        onChange={(e) => setForm({ ...form, name: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <input
+        type="text"
+        placeholder="Email"
+        value={form.email}
+        onChange={(e) => setForm({ ...form, email: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <input
+        type="text"
+        placeholder="Password"
+        value={form.password}
+        onChange={(e) => setForm({ ...form, password: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <div
+        className="mx-auto bg-black w-min p-3 m-5 text-white rounded cursor-pointer"
+        onClick={registerUser}
+      >
+        Register
+      </div>
+      <Link href={"/auth/login"} className="block mx-auto w-min">
+        Login
+      </Link>
+    </div>
+  );
+}