Project - Authentication

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.
+An authentication website for signing up and login. 
 
 ## 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 got some issues when deployed both frontend and backend. 
 
 ## 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.
+[Backend](https://project-auth-3-ueps.onrender.com/)
+[Frontend](https://res-auth.netlify.app/)

backend/package.json

@@ -12,9 +12,12 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
     "express": "^4.17.3",
-    "mongoose": "^8.0.0",
+    "express-list-endpoints": "^7.1.0",
+    "mongodb": "^6.6.2",
+    "mongoose": "^8.4.0",
     "nodemon": "^3.0.1"
   }
 }

backend/server.js

@@ -1,14 +1,44 @@
 import cors from "cors";
 import express from "express";
-import mongoose from "mongoose";
+import mongoose, { Schema, model } from "mongoose";
+import bcrypt from "bcrypt";
+import expressListEndpoints from "express-list-endpoints";
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-auth";
 mongoose.connect(mongoUrl);
 mongoose.Promise = Promise;
 
+const userSchema = new Schema({
+  name: {
+    type: String,
+    required: true,
+  },
+  password: {
+    type: String,
+    required: true,
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true,
+  },
+  token: {
+    type: String,
+    default: () => bcrypt.genSaltSync(),
+  },
+  phone: {
+    type: String,
+    required: true,
+    unique: true,
+  },
+});
+
+const User = model("User", userSchema);
+
 // 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 port = process.env.PORT || 8080;
 const app = express();
 
@@ -18,7 +48,69 @@ app.use(express.json());
 
 // Start defining your routes here
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+  const endpoints = expressListEndpoints(app);
+  res.json(endpoints);
+});
+
+// Register new user
+app.post("/register", async (req, res) => {
+  try {
+    const { name, phone, email, password } = req.body;
+    const salt = bcrypt.genSaltSync();
+    const user = new User({
+      name,
+      phone,
+      email,
+      password: bcrypt.hashSync(password, salt),
+    });
+    user.save();
+    res
+      .status(201)
+      .json({ message: `UserID ${user._id} successfully created!` });
+  } catch (err) {
+    res.status(400).json({
+      message: "Could not create user.",
+      errors: err.errors,
+    });
+  }
+});
+
+// Login
+app.post("/login", async (req, res) => {
+  const matchUser = await User.findOne({
+    email: req.body.email,
+  });
+  if (matchUser && bcrypt.compareSync(req.body.password, matchUser.password)) {
+    res.json({
+      message: "User logged in.",
+      matchUserId: matchUser._id,
+      token: matchUser.token,
+    });
+  } else {
+    res.json({ message: "User not found." });
+  }
+});
+
+// Authorize
+const authenticateUser = async (req, res, next) => {
+  const user = await User.findOne({
+    token: req.header("Authorization"),
+  });
+  if (user) {
+    req.user = user;
+    next();
+  } else {
+    res.status(401).json({
+      message: "failed.",
+    });
+  }
+};
+
+app.get("/secrets", authenticateUser);
+app.get("/secrets", (req, res) => {
+  res.json({
+    secret: "This is secrets.",
+  });
 });
 
 // Start the server

frontend/.eslintrc.cjs

@@ -2,19 +2,20 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
+    "react/prop-types": "off",
   },
-}
+};

frontend/package.json

@@ -10,13 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "antd": "^5.17.3",
     "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",
     "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",

frontend/src/App.jsx

@@ -1,3 +1,53 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { Login } from "./Pages/Login";
+import { Signup } from "./Pages/Signup";
+import { NavBar } from "./Pages/NavBar";
+import { HomePage } from "./Pages/HomePage";
+
+// Check if Net-Token in local storage is not empty
+const checkAuth = () => {
+  const isLoggedin = localStorage.getItem("Net-Token") !== null;
+  return isLoggedin;
+};
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <BrowserRouter>
+      <>
+        <NavBar checkAuth={checkAuth} />
+        <Routes>
+          <Route
+            path="/"
+            element={<HomePage checkAuth={checkAuth} />}
+          />
+          <Route
+            path="/login"
+            element={
+              checkAuth() ? (
+                <Navigate
+                  replace
+                  to="/"
+                />
+              ) : (
+                <Login />
+              )
+            }
+          />
+          <Route
+            path="/signup"
+            element={
+              checkAuth() ? (
+                <Navigate
+                  replace
+                  to="/"
+                />
+              ) : (
+                <Signup />
+              )
+            }
+          />
+        </Routes>
+      </>
+    </BrowserRouter>
+  );
 };

frontend/src/Pages/HomePage.jsx

@@ -0,0 +1,45 @@
+import { Carousel } from "antd";
+
+const imageStyle = {
+  width: "100%",
+  height: "500px",
+  objectFit: "cover",
+};
+
+export const HomePage = ({ checkAuth }) => (
+  <main>
+    <h1>
+      {checkAuth() ? `Nice to see you again!` : `Welcome to Authentication`}
+    </h1>
+    <Carousel autoplay>
+      <div>
+        <img
+          src="/photo1.jpg"
+          alt="Slide 1"
+          style={imageStyle}
+        />
+      </div>
+      <div>
+        <img
+          src="/photo2.jpg"
+          alt="Slide 2"
+          style={imageStyle}
+        />
+      </div>
+      <div>
+        <img
+          src="/photo3.jpg"
+          alt="Slide 3"
+          style={imageStyle}
+        />
+      </div>
+      <div>
+        <img
+          src="/photo4.jpg"
+          alt="Slide 4"
+          style={imageStyle}
+        />
+      </div>
+    </Carousel>
+  </main>
+);

frontend/src/Pages/Login.css

@@ -0,0 +1,80 @@
+/* General styles for the form to center everything */
+body {
+  background-color: #e5e5e5;
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+}
+
+form {
+  align-items: center;
+  padding: 20px;
+  margin: auto;
+  max-width: 300px;
+}
+
+/* Styles for the icon image */
+.login-icon {
+  display: flex; 
+  justify-content: center; 
+  width: 100px;
+  margin: 0 auto 30px; 
+}
+
+/* Styles for headers inside the form */
+h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+/* Styles for form input containers */
+div {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+/* Styles for labels */
+label {
+  display: block;
+  text-align: left;
+  margin-bottom: 5px;
+}
+
+/* Styles for input fields to expand to full width of their container */
+input[type="email"],
+input[type="password"] {
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+/* Styles for the submit button */
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #ffd935;
+  color: #333;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  border-radius: 30px;
+  font-size: 15px;
+}
+
+/* Additional styling for hover effect on button */
+button:hover {
+  background-color: #fe9c80;
+}
+
+/* Centering paragraph below the form */
+.login-form p {
+  text-align: center;
+  margin-top: 20px;
+}
+
+p {
+  text-align: center;
+}
+
+.login-form {
+  margin-top: 30px;
+}