JWT Authentication

Edward-J-Xu · Feb 25, 2023 · 777e7b3 · 777e7b3
1 parent 909a18f
commit 777e7b3
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 78 deletions.
diff --git a/client/src/pages/LoginRegister/Login.js b/client/src/pages/LoginRegister/Login.js
@@ -1,37 +1,46 @@
-import "./LoginRegister.css"
+import "./LoginRegister.css";
 import React, { useState } from "react";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 function Login() {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    let history = useNavigate();
 
-  const login = () => {
-    const data = { username: username, password: password };
-    axios.post("http://localhost:3001/auth/login", data).then((response) => {
-      console.log(response.data);
-    });
-  };
-  return (
-    <div className="loginContainer">
-      <label>Username:</label>
-      <input
-        type="text"
-        onChange={(event) => {
-          setUsername(event.target.value);
-        }}
-      />
-      <label>Password:</label>
-      <input
-        type="password"
-        onChange={(event) => {
-          setPassword(event.target.value);
-        }}
-      />
+    const login = () => {
+        const data = { username: username, password: password };
+        axios
+            .post("http://localhost:3001/auth/login", data)
+            .then((response) => {
+                if (response.data.error) {
+                    alert(response.data.error);
+                } else {
+                    sessionStorage.setItem("accessToken", response.data);
+                    history.push("/");
+                }
+            });
+    };
+    return (
+        <div className="loginContainer">
+            <label>Username:</label>
+            <input
+                type="text"
+                onChange={(event) => {
+                    setUsername(event.target.value);
+                }}
+            />
+            <label>Password:</label>
+            <input
+                type="password"
+                onChange={(event) => {
+                    setPassword(event.target.value);
+                }}
+            />
 
-      <button onClick={login}> Login </button>
-    </div>
-  );
+            <button onClick={login}> Login </button>
+        </div>
+    );
 }
 
 export default Login;
diff --git a/client/src/pages/posts/Post.js b/client/src/pages/posts/Post.js
@@ -24,22 +24,41 @@ function Post() {
 
     const addComment = () => {
         axios
-            .post("http://localhost:3001/comments", {
-                commentBody: newComment,
-                postId: id,
-            })
+            .post(
+                "http://localhost:3001/comments",
+                {
+                    commentBody: newComment,
+                    postId: id,
+                },
+                {
+                    headers: {
+                        accessToken: sessionStorage.getItem("accessToken"),
+                    },
+                }
+            )
             .then((response) => {
-                const commentToAdd = { commentBody: newComment };
-                setComments([...comments, commentToAdd]);
-                setNewComment("");
+                if (response.data.error) {
+                    console.log(response.data.error);
+                } else {
+                    const commentToAdd = { commentBody: newComment };
+                    setComments([...comments, commentToAdd]);
+                    setNewComment("");
+                }
             });
     };
 
     return (
         <div className="postPage">
             <div className="navbar1">
-                <Link to="/games/posts/createpost" style={{ textDecoration: "none" }}><span>Create A Post</span></Link>
-                <Link to="/games/posts" style={{ textDecoration: "none" }}><span>Posts Home Page</span></Link>
+                <Link
+                    to="/games/posts/createpost"
+                    style={{ textDecoration: "none" }}
+                >
+                    <span>Create A Post</span>
+                </Link>
+                <Link to="/games/posts" style={{ textDecoration: "none" }}>
+                    <span>Posts Home Page</span>
+                </Link>
             </div>
             <div className="leftSide">
                 <div className="post" id="individual">

diff --git a/server/sql.sql → server/createTable.sql b/server/sql.sql → server/createTable.sql
@@ -10,9 +10,9 @@ create table if not exists posts
 
 create table if not exists users
 (
+    id       int primary key auto_increment,
     username varchar(15) unique not null,
-    password varchar(60) not null,
-    primary key (username)
+    password varchar(60) not null
 );
 
 create table if not exists comments

diff --git a/server/middlewares/AuthMiddleware.js b/server/middlewares/AuthMiddleware.js
@@ -0,0 +1,19 @@
+const { verify } = require("jsonwebtoken");
+
+const validateToken = (req, res, next) => {
+    const accessToken = req.header("accessToken");
+
+    if (!accessToken) return res.json({ error: "User not logged in!" });
+
+    try {
+        const validToken = verify(accessToken, "importantsecret");
+
+        if (validToken) {
+            return next();
+        }
+    } catch (err) {
+        return res.json({ error: err });
+    }
+};
+
+module.exports = { validateToken };
diff --git a/server/models/index.js b/server/models/index.js
@@ -53,7 +53,7 @@ db.pool = pool.promise();
 //     .then(rev => console.log(rev))
 //     .catch(err => console.log(err));
 
-let dataSql = fs.readFileSync(path.join(__dirname, "../sql.sql")).toString();
+let dataSql = fs.readFileSync(path.join(__dirname, "../createTable.sql")).toString();
 dataSql = dataSql.replace(/(\r\n|\n|\r)/gm, "");
 dataSql.split(";").forEach((sql) => {
   console.log("sql: ", sql)

diff --git a/server/package-lock.json b/server/package-lock.json
diff --git a/server/package.json b/server/package.json
@@ -13,6 +13,7 @@
     "bcrypt": "^5.1.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.0",
     "mysql2": "^3.1.2",
     "nodemon": "^2.0.20",
     "sequelize": "^6.28.2",