Display user data conditionally

4 years ago · 3e1a09f46d
10 changed files with 127 additions and 15 deletions
--- a/client/app.js
+++ b/client/app.js
@ -1,4 +1,5 @@
 const express = require("express");
+const jwt = require("jsonwebtoken");

 const app = express();

@ -25,14 +26,16 @@ app.use(require("cookie-parser")());
 app.use("/landing", require("./routes/landing"));
 app.use("/auth", require("./routes/auth"));

+// Attach user
 app.use((req, res, next) => {
  const token = req.cookies.token;
-  req.token = token;
+  req.user = jwt.decode(token);
  next();
 });

+// Redirect if not authenticated
 app.use((req, res, next) => {
-  if (!req.token) res.redirect("/landing");
+  if (!req.user) res.redirect("/landing");
  next();
 });

--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -3504,6 +3504,11 @@
        "fill-range": "^7.0.1"
      }
    },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
    "buffer-from": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@ -3843,6 +3848,14 @@
      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
    },
+    "ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "editorconfig": {
      "version": "0.15.3",
      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@ -4344,6 +4357,42 @@
      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
    },
+    "jsonwebtoken": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
+      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
+      "requires": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^5.6.0"
+      }
+    },
+    "jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "requires": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "requires": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "keyv": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@ -4386,6 +4435,41 @@
      "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
      "integrity": "sha1-ZHYsSGGAglGKw99Mz11YhtriA0c="
    },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+    },
    "loose-envify": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -18,6 +18,7 @@
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-react-views": "^0.11.0",
+    "jsonwebtoken": "^8.5.1",
    "nodemon": "^2.0.6",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
--- a/client/routes/clients.js
+++ b/client/routes/clients.js
@ -6,7 +6,7 @@ const basePath = process.env.API_BASE_PATH;
 router.get("/", async (req, res) => {
  const clients = await axios
    .get(basePath + "/clients", {
-      headers: { Authorization: "Bearer " + req.token },
+      headers: { Authorization: "Bearer " + req.cookies.token },
    })
    .then((response) => response.data)
    .then((clients) =>
@ -17,6 +17,7 @@ router.get("/", async (req, res) => {

  res.render("clients/Index", {
    clients,
+    user: req.user,
  });
 });

--- a/client/routes/index.js
+++ b/client/routes/index.js
@ -1,7 +1,7 @@
 const router = require("express").Router();

 router.get("/", (req, res) => {
-  res.render("Index");
+  res.render("Index", { user: req.user });
 });

 module.exports = router;
--- a/client/views/Index.jsx
+++ b/client/views/Index.jsx
@ -1,9 +1,9 @@
 import React from "react";
 import Layout from "./layouts/Main";

-export default function Index() {
+export default function Index({ user }) {
  return (
-    <Layout>
+    <Layout user={user}>
      <h1>Hello</h1>
    </Layout>
  );
--- a/client/views/clients/Index.jsx
+++ b/client/views/clients/Index.jsx
@ -1,7 +1,7 @@
 import React from "react";
 import Layout from "../layouts/Main";

-export default function Clients({ clients }) {
+export default function Clients({ clients, user }) {
  const clientViews = clients.map((client) => {
    return (
      <a
@ -14,7 +14,7 @@ export default function Clients({ clients }) {
  });

  return (
-    <Layout>
+    <Layout user={user}>
      <div className="row">
        <div className="col-4">
          <a href="/clients/new">
--- a/client/views/layouts/Header.jsx
+++ b/client/views/layouts/Header.jsx
@ -1,8 +1,6 @@
 import React, { useState, useEffect } from "react";

-import UserService from "../../service/UserService.js";
-
-export default function Head() {
+export default function Head({ user }) {
  const [username, setUsername] = useState("");

  const onLogout = () => {
@ -36,6 +34,28 @@ export default function Head() {
            </a>
          </li>
        </ul>
+        <ul class="navbar-nav ml-auto">
+          {user ? (
+            <li class="nav-item">
+              <a class="nav-link" href="/auth/login">
+                {user.name} <span class="sr-only">(current)</span>
+              </a>
+            </li>
+          ) : (
+            <>
+              <li class="nav-item">
+                <a class="nav-link" href="/auth/login">
+                  Login <span class="sr-only">(current)</span>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/auth/register">
+                  Register <span class="sr-only">(current)</span>
+                </a>
+              </li>
+            </>
+          )}
+        </ul>
      </div>
    </nav>
  );
--- a/client/views/layouts/Main.jsx
+++ b/client/views/layouts/Main.jsx
@ -1,7 +1,7 @@
 import React from "react";
 import Header from "./Header";

-export default function (props) {
+export default function ({ user, children }) {
  return (
    <>
      <head>
@ -10,8 +10,8 @@ export default function (props) {
        <script src="/bootstrap.min.js"></script>
      </head>
      <body>
-        <Header></Header>
-        <div className="container mt-3">{props.children}</div>
+        <Header user={user}></Header>
+        <div className="container mt-3">{children}</div>
      </body>
    </>
  );
--- a/server/routes/auth.js
+++ b/server/routes/auth.js
@ -44,7 +44,10 @@ router.post("/login", async (req, res) => {
  const validPass = await bcrypt.compare(password, user.password);
  if (!validPass) return res.status(400).send("Email or password incorrect");

-  const token = jwt.sign({ _id: user.id }, process.env.AUTH_SECRET);
+  const token = jwt.sign(
+    { _id: user.id, name: user.full_name, email: user.email },
+    process.env.AUTH_SECRET
+  );

  console.debug("Login success for userId:", user.id);
  res.json({ status: "success", token, id: user.id });