Cookie Authentication

package.json

@@ -12,6 +12,7 @@
     "@paypal/react-paypal-js": "^7.8.3",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
+    "cookie": "^0.5.0",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.4",
     "mongodb": "^5.4.0",

pages/admin/index.jsx

@@ -115,7 +115,18 @@ const Index = ({ orders, products }) => {
   );
 };
 
-export const getServerSideProps = async () => {
+export const getServerSideProps = async (ctx) => {
+  const myCookie = ctx.req?.cookies || "";
+
+  if (myCookie.token !== process.env.TOKEN) {
+    return {
+      redirect: {
+        destination: "/admin/login",
+        permanent: false,
+      },
+    };
+  }
+
   const productRes = await axios.get("http://localhost:3000/api/products");
   const orderRes = await axios.get("http://localhost:3000/api/orders");
 

pages/admin/login.jsx

@@ -0,0 +1,48 @@
+import styles from "@/styles/Login.module.css";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import axios from "axios";
+
+const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(false);
+  const router = useRouter();
+
+  const handleClick = async () => {
+    try {
+      await axios.post("http://localhost:3000/api/login", {
+        username,
+        password,
+      });
+      router.push("/admin");
+    } catch (err) {
+      setError(true);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <h1>Admin Dashboard</h1>
+        <input
+          placeholder="username"
+          className={styles.input}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          placeholder="password"
+          type="password"
+          className={styles.input}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button onClick={handleClick} className={styles.button}>
+          Sign in
+        </button>
+        {error && <span className={styles.error}>Invalid credentials!</span>}
+      </div>
+    </div>
+  );
+};
+
+export default Login;

pages/api/login.js

@@ -0,0 +1,25 @@
+import cookie from "cookie";
+
+const handler = async (req, res) => {
+  if (req.method === "POST") {
+    const { username, password } = req.body;
+    if (
+      username === process.env.ADMIN_USERNAME &&
+      password === process.env.ADMIN_PASSWORD
+    ) {
+      res.setHeader(
+        "Set-Cookie",
+        cookie.serialize("token", process.env.TOKEN, {
+          maxAge: 60 * 60,
+          sameSite: "strict",
+          path: "/",
+        })
+      );
+      res.status(200).json("Successful");
+    } else {
+      res.status(400).json("Invalid credentials");
+    }
+  }
+};
+
+export default handler;

styles/Login.module.css

@@ -0,0 +1,32 @@
+.container {
+  height: calc(100vh - 100px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.input {
+  height: 40px;
+  margin-bottom: 20px;
+  padding: 0 10px;
+}
+
+.button {
+  height: 40px;
+  margin-bottom: 20px;
+  border: none;
+  background-color: teal;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.error {
+  color: red;
+  font-size: 13px;
+}