Express js react app

server.js

@@ -3,21 +3,35 @@ const cors = require('cors');
 const express = require('express');
 const app = express(); // create express app
 const http = require('http');
+
+const bodyParser = require("body-parser");
+const cookieParser = require("cookie-parser");
+const session = require("express-session");
+
 const mysql = require('mysql');
 const bcrypt = require('bcrypt');
 const saltRounds = 10;
-app.use(cors());
 
-const bodyParser = require('body-parser');
-app.use(bodyParser.json());
+app.use(express.json());
+app.use(cors({
+    origin: ["http://localhost:3000"],
+    methods: ["GET", "POST"],
+    credentials: true,
+}));
 
-// add middlewares
-const root = require('path').join(__dirname, 'build');
-app.use(express.static(root));
+app.use(cookieParser());
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.use(session({
+    key: "userId",
+    secret: "test",
+    resave: false,
+    saveUninitialized: false,
+    cookie: {
+        expires: 60 * 60 * 60 * 24,
+    },
+}));
 
-//app.use('/*', (req, res) => {
-//  res.sendFile(path.join(__dirname, 'build', 'index.html'));
-//});
 
 const server = http.createServer(app);
 
@@ -30,6 +44,7 @@ const db = mysql.createConnection({
 
 db.connect((err) => {
     if (err) {
+        console.log("\x1b[41m", "MySQL Connection Error:")
         throw err;
     }
 
@@ -88,35 +103,46 @@ app.post("/register", (req, res) => {
     )
 });
 
-app.post('/signin', (req, res) => 
-{
+
+app.get("/signin", (req, res) => {
+    if (req.session.user) {
+        res.send({ loggedIn: true, user: req.session.user })
+    } else {
+        res.send({ loggedIn: false })
+    }
+})
+
+app.get("/register", (req, res) => {
+    if (req.session.user) {
+        res.send({ loggedIn: true, user: req.session.user })
+    } else {
+        res.send({ loggedIn: false })
+    }
+})
+
+app.post('/signin', (req, res) => {
     const username = req.body.username;
     const password = req.body.password;
 
     db.query(
         "SELECT * FROM account WHERE username = ?",
         username,
-        (err, result) =>
-        {
-            if(err)
-            {
-                res.send({err: err})
+        (err, result) => {
+            if (err) {
+                res.send({ err: err })
             }
-
-            if (result.length > 0)
-            {
-                bcrypt.compare(password, result[0].password, (error, response) =>
-                {
-                    if(response)
-                    {
+
+            if (result.length > 0) {
+                bcrypt.compare(password, result[0].password, (error, response) => {
+                    if (response) {
+                        req.session.user = result;
+                        console.log(req.session.user)
                         res.send(result)
-                    } else
-                    {
+                    } else {
                         res.send({ message: "Incorrect username or password" })
                     }
                 })
-            } else
-            {
+            } else {
                 res.send({ message: "Incorrect username" })
             }
         }

src/App.css

@@ -0,0 +1,42 @@
+.App {
+    width: 100%;
+    height: auto;
+}
+
+
+/* NAVBAR */
+.navbar {
+    background-color: dodgerblue;
+    display: flex;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.navbar .links {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.navbar a {
+    margin-left: 20px;
+    text-decoration: none;
+    color: white;
+}
+
+.navbar a:hover {
+    color: greenyellow;
+}
+
+/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
+@media screen and (max-width: 600px) {
+    .navbar .links {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
+        margin: 0;
+        padding: 14px;
+    }
+
+}

src/App.js

@@ -1,8 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Registration from "./Pages/RegistrationPage/RegistrationPage";
 import Home from "./Pages/HomePage/HomePage"
+import Axios from "axios";
 import Product from "./Pages/ProductPage/ProductPage"
+import Login from "./Pages/SignInPage/SignInPage"
 import "./GeneralStyles.css";
+import "./App.css"
 import home from "../src/images/homebutton.png"
 
 import {
@@ -12,38 +15,44 @@ import {
   Link
 } from "react-router-dom";
 function App() {
-  const basename = process.env.REACT_APP_BASENAME || null;
-  return ( 
-    <Router basename={basename}>
-      <div style = {{background: "lightgrey"}}>
-        <nav>
-          &nbsp;
-          <Link to="/">
-            <img src = {home} alt = ""
-            width="50"
-            height="50" />
-          </Link>
-          &nbsp;
-          &nbsp;
-          <Link to="/registration">Registration</Link>
-          &nbsp;
-          &nbsp;
-          <Link to="/product">Product</Link>
-          </nav>
+  const [loginState, setLoginState] = useState(false);
+  Axios.defaults.withCredentials = true;
 
+  useEffect(() => {
+    Axios.get("http://localhost:5000/signin").then((response) => {
+      if (response.data.user) {
+        setLoginState(true);
+      }
+    })
+  }, [])
+
+  return (
+    <div className="App">
+      <Router>
+        <div className="navbar">
+          <div className="links">
+            <Link to="/">
+              <img src={home} alt=""
+                width="50"
+                height="50" />
+            </Link>
+            <Link to="/product">Product</Link>
+            {!loginState && (
+              <>
+                <Link to="/registration">Register</Link>
+                <Link to="/login">Sign In</Link>
+              </>
+            )}
+          </div>
+        </div>
         <Switch>
-          <Route path="/registration">
-            <Registration />
-          </Route>
-          <Route path="/product">
-            <Product />
-          </Route>
-          <Route path="/">
-            <Home />
-          </Route>
+          <Route path="/registration" exact component={Registration} />
+          <Route path="/product" exact component={Product} />
+          <Route path="/login" exact component={Login} />
+          <Route path="/" exact component={Home} />
         </Switch>
-      </div>
-    </Router>
+      </Router>
+    </div>
   );
 }