Mai, Sofie & Wen | Project Authentication

.gitignore

@@ -12,4 +12,26 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-package-lock.json
+package-lock.json
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,13 +1,12 @@
 # Project Auth API
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This assignment involves creating a backend API with Mongoose for user registration, login, and an authenticated endpoint for logged-in users. The React frontend includes registration and login forms, a page for authenticated content, and a sign-out button that clears the access token from local storage. The API should validate user input, encrypt passwords with bcrypt, and handle unauthorized access with appropriate error messages.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+We were confused by the instructions. Authentication using tokens was required, but we also implemented authentication using sessions with Passport.js for higher security.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+Frontend: https://team-peace-auth.netlify.app
+Backend: https://project-auth-lh3p.onrender.com

backend/.gitignore

@@ -1,2 +1,31 @@
+package-lock.json
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-package-lock.json
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

backend/package.json

@@ -12,8 +12,11 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.17.3",
+    "express-list-endpoints": "^7.1.0",
     "mongoose": "^8.0.0",
     "nodemon": "^3.0.1"
   }

backend/server.js

@@ -1,24 +1,128 @@
+import bcrypt from "bcrypt";
 import cors from "cors";
+import dotenv from "dotenv";
 import express from "express";
+import expressListEndpoints from "express-list-endpoints";
 import mongoose from "mongoose";
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
+dotenv.config();
+const { Schema } = mongoose;
+const mongoUrl =
+  process.env.MONGO_URL || "mongodb://localhost/project-authentication";
 mongoose.connect(mongoUrl);
 mongoose.Promise = Promise;
 
-// Defines the port the app will run on. Defaults to 8080, but can be overridden
-// when starting the server. Example command to overwrite PORT env variable value:
-// PORT=9000 npm start
+const userSchema = new Schema({
+  username: { type: String, unique: true, required: true, minLength: 8 },
+  email: {
+    type: String,
+    unique: true,
+    required: true,
+    match: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+  },
+  password: { type: String, required: true },
+  accessToken: { type: String, default: () => bcrypt.genSaltSync() },
+});
+
+const User = mongoose.model("User", userSchema);
+
 const port = process.env.PORT || 8080;
 const app = express();
 
+// Function for authenticate by token
+const authenticateUser = async (req, res, next) => {
+  const user = await User.findOne({ accessToken: req.header("Authorization") });
+  if (user) {
+    req.user = user;
+    next();
+  } else {
+    res.status(401).json({
+      message: "Unauthorised access",
+      success: false,
+      error: "You are not allowed to see our top secret message!",
+    });
+  }
+};
+
 // Add middlewares to enable cors and json body parsing
-app.use(cors());
+app.use(
+  cors({
+    origin: "https://team-peace-auth.netlify.app",
+    methods: ["GET", "POST"],
+  }) // Allow sending credentials from frontend to backend
+);
 app.use(express.json());
 
 // Start defining your routes here
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+  const endpoints = expressListEndpoints(app);
+  res.json(endpoints);
+});
+
+// Sign-up
+app.post("/signup", async (req, res) => {
+  try {
+    const { username, email, password } = req.body;
+    const user = new User({
+      username,
+      email,
+      password: bcrypt.hashSync(password, 10),
+    });
+    await user.save();
+    res.status(201).json({ message: "Sign up successfully", success: true });
+  } catch (error) {
+    console.log(error.message);
+    res.status(400).json({
+      message: "Could not sign up.",
+      success: false,
+      error: error.message,
+    });
+  }
+});
+
+// Log-in
+app.post("/login", async (req, res) => {
+  try {
+    const { username, password } = req.body;
+    const user = await User.findOne({ username });
+
+    if (user && bcrypt.compareSync(password, user.password)) {
+      res.status(200).json({
+        message: "Login Successful.",
+        success: true,
+        accessToken: user.accessToken,
+      });
+    } else if (user) {
+      res.status(401).json({
+        message: "Could not login.",
+        success: false,
+        error: "Incorrect password",
+      });
+    } else {
+      res.status(401).json({
+        message: "Could not login.",
+        success: false,
+        error: "Invalid username",
+      });
+    }
+  } catch (error) {
+    res.status(400).json({
+      message: "Could not login. Something is wrong.",
+      success: false,
+      error: error.message,
+    });
+  }
+});
+
+// secrets - Authentication method 2 - by Token
+app.get("/secrets", authenticateUser);
+app.get("/secrets", (req, res) => {
+  res.json({
+    message: "This is a super secret message",
+    success: true,
+    id: req.user._id,
+    name: req.user.username,
+  });
 });
 
 // Start the server

frontend/.gitignore

@@ -23,4 +23,11 @@ dist-ssr
 *.sln
 *.sw?
 
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
 package-lock.json

frontend/index.html

@@ -1,8 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>

frontend/package.json

@@ -4,14 +4,16 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 5173",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/App.jsx

@@ -1,3 +1,11 @@
+import { AuthRoutes } from "./routes/AuthRoutes";
+import { BrowserRouter } from "react-router-dom";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <BrowserRouter>
+      <h1>TOP secret saver!</h1>
+      <AuthRoutes />
+    </BrowserRouter>
+  );
 };

frontend/src/assets/loading.json

@@ -0,0 +1 @@
+{"v":"5.8.1","fr":29.9700012207031,"ip":0,"op":57.0000023216576,"w":1080,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":5,"ty":4,"nm":"Load3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,539,0],"ix":2,"l":2},"a":{"a":0,"k":[1518,1004.5,0],"ix":1,"l":2},"s":{"a":0,"k":[51.5,51.5,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-350.603,530.029],[-350.603,-100.78799999999998],[-193.633,-684.641],[0.001,-684.641],[350.603,-527.678],[350.603,334.722],[350.603,339.305],[195.99099999999999,684.641],[-5.267,684.641]],"o":[[-350.603,339.305],[-350.603,-527.678],[0,-684.641],[193.633,-684.641],[350.603,-334.046],[350.603,334.722],[350.603,530.029],[5.267,684.641],[-195.99099999999999,684.641]],"v":[[-350.603,339.305],[-350.603,-334.046],[0,-684.641],[0.001,-684.641],[350.603,-334.046],[350.603,334.722],[350.603,339.305],[5.267,684.641],[-5.267,684.641]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[50]},{"t":37.0000015070409,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[69]},{"t":37.0000015070409,"s":[19]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[0.9244,0.8486,0.3556,1]},{"t":37.0000015070409,"s":[0.2353,0.149,0.9961,1]}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":150,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[1327.382,1042.938],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":58.0000023623884,"st":-38.0000015477717,"bm":0,"completed":true},{"ddd":0,"ind":6,"ty":4,"nm":"Load3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[344,580,0],"ix":2,"l":2},"a":{"a":0,"k":[1518,1004.5,0],"ix":1,"l":2},"s":{"a":0,"k":[51.5,51.5,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-350.603,530.029],[-350.603,-100.78799999999998],[-193.633,-684.641],[0.001,-684.641],[350.603,-527.678],[350.603,334.722],[350.603,339.305],[195.99099999999999,684.641],[-5.267,684.641]],"o":[[-350.603,339.305],[-350.603,-527.678],[0,-684.641],[193.633,-684.641],[350.603,-334.046],[350.603,334.722],[350.603,530.029],[5.267,684.641],[-195.99099999999999,684.641]],"v":[[-350.603,339.305],[-350.603,-334.046],[0,-684.641],[0.001,-684.641],[350.603,-334.046],[350.603,334.722],[350.603,339.305],[5.267,684.641],[-5.267,684.641]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[0.2353,0.149,0.9961,1]},{"t":37.0000015070409,"s":[0.9725,0.8824,0.3216,1]}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":150,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[1327.382,1042.938],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[50]},{"t":37.0000015070409,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[69]},{"t":37.0000015070409,"s":[19]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true}],"ip":0,"op":58.0000023623884,"st":-48.0000019550801,"bm":0,"completed":true},{"ddd":0,"ind":7,"ty":4,"nm":"Load3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[799.136,559.345,0],"ix":2,"l":2},"a":{"a":0,"k":[2021.177,1040.875,0],"ix":1,"l":2},"s":{"a":0,"k":[51.5,51.5,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-347.995,336.15],[-192.192,684.141],[0,684.141],[347.995,528.342],[347.995,-334.141],[347.995,-338.725],[193.347,-684.141],[-2.575,-684.141],[-347.995,-529.491]],"o":[[-347.995,528.342],[0,684.141],[192.192,684.141],[347.995,336.15],[347.995,-334.141],[347.995,-529.493],[2.58,-684.141],[-193.345,-684.141],[-347.995,-338.72]],"v":[[-347.995,336.15],[0,684.141],[0,684.141],[347.995,336.15],[347.995,-334.141],[347.995,-338.725],[2.58,-684.141],[-2.575,-684.141],[-347.995,-338.72]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[81]},{"t":51.0000020772726,"s":[31]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[100]},{"t":51.0000020772726,"s":[50]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[0.3124,0.3779,0.9676,1]},{"t":51.0000020772726,"s":[1,0.5412,0.4902,1]}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":150,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[1673.182,1042.438],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":58.0000023623884,"st":-42.0000017106951,"bm":0,"completed":true},{"ddd":0,"ind":8,"ty":4,"nm":"Load3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-180,"ix":10},"p":{"a":0,"k":[440.864,560.955,0],"ix":2,"l":2},"a":{"a":0,"k":[2021.177,1020.875,0],"ix":1,"l":2},"s":{"a":0,"k":[51.5,51.5,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-347.995,336.15],[-192.192,684.141],[0,684.141],[347.995,528.342],[347.995,-334.141],[347.995,-338.725],[193.347,-684.141],[-2.575,-684.141],[-347.995,-529.491]],"o":[[-347.995,528.342],[0,684.141],[192.192,684.141],[347.995,336.15],[347.995,-334.141],[347.995,-529.493],[2.58,-684.141],[-193.345,-684.141],[-347.995,-338.72]],"v":[[-347.995,336.15],[0,684.141],[0,684.141],[347.995,336.15],[347.995,-334.141],[347.995,-338.725],[2.58,-684.141],[-2.575,-684.141],[-347.995,-338.72]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[81]},{"t":51.0000020772726,"s":[31]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[100]},{"t":51.0000020772726,"s":[50]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[0.9734,0.3373,0.2666,1]},{"t":51.0000020772726,"s":[0.4431,0.502,0.9922,1]}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":150,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[1673.182,1022.438],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":58.0000023623884,"st":-42.0000017106951,"bm":0,"completed":true}],"markers":[],"__complete":true}