Added initial example code

Author: SeedyROM

api/src/controllers/auth.controller.js

@@ -4,6 +4,7 @@ const { check, validationResult } = require("express-validator");
 
 const User = require("../models/User");
 const handleValidationErrors = require("../helpers/handleValidationErrors");
+const jwtMiddleware = require("../helpers/jwtMiddleware");
 
 const router = AsyncRouter();
 
@@ -30,16 +31,31 @@ router.post(
       return res.status(400).send("Passwords do not match");
 
     const user = await User.signUp(req.body.email, req.body.password);
-    res.status(201).send(user);
+    res.status(201).send(user.sanitize());
   }
 );
 
 router.post(
   "/login", 
   [...loginValidators, handleValidationErrors],
   async (req, res) => {
-    
+    const user = await User.findOne({email: req.body.email});
+
+    if(!user || !user.comparePassword(req.body.password))
+      return res.status(400).send("Invalid login information");
+      
+    const token = jwt.sign({
+      _id: user._id,
+    }, "CHANGEME!");
+
+    res.send({token});
   }
 );
 
+router.get("/profile", [jwtMiddleware], async (req, res) => {
+  const user = await User.findOne({_id: req.user._id});
+
+  res.send(user);
+});
+
 module.exports = router;

api/src/helpers/jwtMiddleware.js

@@ -0,0 +1,22 @@
+const jwt = require("jsonwebtoken");
+const User = require("../models/User");
+
+const jwtMiddleware = async (req, res, next) => {
+  const authorization = req.header("Authorization") || "";
+  const [type, token] = authorization.split(" ");
+
+  try {
+    if(type === "Bearer" && jwt.verify(token, "CHANGEME!")) {
+      const payload = jwt.decode(token, "CHANGEME!");
+      const user = await User.findOne({_id: payload._id});
+      req.user = user;
+      next();
+    } else {
+      res.status(401).send("Unauthorized");
+    }
+  } catch(err) {
+    res.status(401).send("Unauthorized");
+  }
+}
+
+module.exports = jwtMiddleware;

api/src/models/User.js

@@ -35,7 +35,15 @@ userSchema.statics.signUp = async function(email, password) {
 userSchema.methods.hashPassword = function(plainText) {
   this.password = bcrypt.hashSync(plainText, 4);
 };
-
+userSchema.methods.sanitize = function() {
+  return {
+    ...this._doc,
+    password: undefined,
+  }
+}
+userSchema.methods.comparePassword = function(plainText) {
+  return bcrypt.compareSync(plainText, this.password);
+}
 const User = mongoose.model("User", userSchema);
 
 module.exports = User;

api/src/server.js

@@ -28,7 +28,7 @@ const connectDatabase = async (databaseName="fullstackjs-boilerplate", hostname=
   return database;
 }
 
-const startServer = (hostname="localhost", port=1337) => {
+const startServer = (hostname="0.0.0.0", port=1337) => {
   app.listen(port, hostname, async () => {
     await connectDatabase();
     if(process.env.ENV !== "test") 

ui/package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.10.1",
     "react-dom": "^16.10.1",
-    "react-scripts": "3.1.2"
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.1.2",
+    "reactn": "^2.2.4"
   },
   "scripts": {
     "start": "BROWSER=none react-scripts start",

ui/src/App.js

@@ -1,25 +1,59 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useGlobal } from "reactn";
+
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+
+import "./App.css";
+import Home from "./pages/Home";
+// import NotFound from './pages/NotFound';
+import Profile from "./pages/Profile";
+import PrivateRoute from "./components/PrivateRoute";
+import Login from "./pages/Login";
+import Logout from './components/Logout';
+
+const NavBar = () => {
+  const { 0: token } = useGlobal("token");
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link type="li" to="/">
+            Home
+          </Link>
+        </li>
+        {!token && (
+          <li>
+            <Link type="li" to="/login">
+              Login
+            </Link>
+          </li>
+        )}
+        {token && (
+          <>
+            <li>
+              <Link type="li" to="/profile">
+                Profile
+              </Link>
+            </li>
+            <li>
+              <Logout />
+            </li>
+          </>
+        )}
+      </ul>
+    </nav>
+  );
+};
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <NavBar />
+      <Route path="/" exact component={Home} />
+      <Route path="/login" component={Login} />
+      <PrivateRoute path="/profile" component={Profile} />
+      {/* <Route component={NotFound} /> */}
+    </Router>
   );
 }
 

ui/src/App.test.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const localUrl = `//${window.location.host.split(":")[0]}:1337`;
+const client = axios.create({
+  baseURL: localUrl,
+});
+
+export default client;

ui/src/api/client.js

@@ -0,0 +1,64 @@
+import React, { useState, useGlobal } from "reactn";
+import { Redirect } from "react-router-dom";
+import client from "../api/client";
+
+const LoginForm = (props) => {
+  const [formState, setFormState] = useState({
+    email: "[email protected]",
+    password: "password123"
+  });
+  const [loggedIn, setLoggedIn] = useState(false);
+
+  const { 1: setToken } = useGlobal("token");
+
+  const handleChange = e => {
+    setFormState({
+      ...formState,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+
+    const { data } = await client.post(
+      "/auth/login",
+      formState
+    );
+    setToken(data.token);
+    setLoggedIn(true);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {(loggedIn) && (
+        (props.redirect) && (
+          <Redirect push to={props.redirect} />
+        )
+      )}
+      <div>
+        <input
+          type="email"
+          name="email"
+          value={formState.email}
+          onChange={handleChange}
+          placeholder="E-mail"
+        />
+      </div>
+      <div>
+        <input
+          type="password"
+          name="password"
+          value={formState.password}
+          onChange={handleChange}
+          placeholder="Password..."
+        />
+      </div>
+      <div>
+        <button>Sign In</button>
+      </div>
+    </form>
+  );
+};
+
+export default LoginForm;

ui/src/components/LoginForm.jsx

@@ -0,0 +1,16 @@
+import React, { useGlobal } from "reactn";
+import { Redirect } from "react-router-dom";
+
+const Logout = (props) => {
+  const [token, setToken] = useGlobal("token");
+  return (
+    <>
+      {(!token && props.redirect) && (
+        <Redirect push to={props.redirect} />
+      )}
+      <button onClick={() => setToken(null)}>Logout</button>
+    </>
+  );
+}
+
+export default Logout;