Auth app

.anima/.gitignore

@@ -0,0 +1 @@
+cache

README.md

@@ -1,13 +1,14 @@
 # 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 project, completed as part of the Technigo bootcamp, involves developing a full-stack authentication system with a backend API and a React frontend. The project includes user registration and login functionalities, token-based authentication, and protected routes that require valid authentication tokens for access.
 
 ## 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?
+The goal of this project was to create a secure user authentication system. The system allows users to register and log in, storing their credentials securely. Once logged in, users can access protected content that is only available to authenticated users. The primary challenge was ensuring the security of user data and tokens while providing a seamless user experience.
+
+To create a secure user authentication system with a backend API and a React frontend, we planned the project by outlining the essential components and their interactions. The approach involved building a Node.js and Express backend with MongoDB for data storage, and bcrypt for password hashing. The frontend was developed using React, incorporating forms for user registration and login, with authenticated routes to manage secure content access. If given more time, we would enhance the validation and security features, add more user functionalities, and improve the user experience with better error handling.
 
 ## 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://authentication-service.netlify.app/)
+[Backend](https://auth-s0og.onrender.com)

backend/package.json

@@ -12,8 +12,10 @@
     "@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",
+    "express-list-endpoints": "^7.1.0",
     "mongoose": "^8.0.0",
     "nodemon": "^3.0.1"
   }

backend/server.js

@@ -1,15 +1,67 @@
+import bcrypt from "bcrypt";
 import cors from "cors";
 import express from "express";
+import expressListEndpoints from "express-list-endpoints";
 import mongoose from "mongoose";
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/auth";
 mongoose.connect(mongoUrl);
 mongoose.Promise = Promise;
 
-// Defines the port the app will run on. Defaults to 8080, but can be overridden
+// Create user object that has access-token. Mongoose-model
+// Destructure schema & model
+const { Schema, model } = mongoose;
+
+const userSchema = new Schema({
+  name: {
+    type: String,
+    unique: true,
+    required: [true, "Name is required"],
+  },
+  email: {
+    type: String,
+    unique: true,
+    required: [true, "Email is required"],
+    match: [/.+\@.+\..+/, "Please enter a valid email address"],
+  },
+  password: {
+    type: String,
+    required: [true, "Password is required"],
+    minlength: [8, "Password must be at least 8 characters long"],
+  },
+  accessToken: {
+    type: String,
+    default: () => bcrypt.genSaltSync(),
+  },
+});
+
+const User = model("User", userSchema);
+
+const authenticateUser = async (req, res, next) => {
+  try {
+    const user = await User.findOne({
+      accessToken: req.header("Authorization"),
+    });
+    if (user) {
+      req.user = user;
+      next();
+    } else {
+      res.status(401).json({
+        message: "Authentication missing or invalid.",
+        loggedOut: true,
+      });
+    }
+  } catch (err) {
+    res
+      .status(500)
+      .json({ message: "Internal server error", error: err.message });
+  }
+};
+
+// Defines the port the app will run on. Defaults to 8030, 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 port = process.env.PORT || 8030;
 const app = express();
 
 // Add middlewares to enable cors and json body parsing
@@ -18,7 +70,70 @@ app.use(express.json());
 
 // Start defining your routes here
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+  const endpoints = expressListEndpoints(app);
+  res.json(endpoints);
+});
+
+app.post("/register", async (req, res) => {
+  try {
+    const { name, email, password } = req.body;
+
+    // check if password is empty
+    if (!password) {
+      return res.status(400).json({ message: "Password is required" });
+    }
+
+    // Check if password meets minimum length req
+    if (password.length < 8) {
+      return res.status(400).json({
+        message: "Password has to be at least 8 characters long",
+      });
+    }
+    // Encrypt the password
+    const user = await new User({
+      name,
+      email,
+      password: bcrypt.hashSync(password, 10),
+    }).save();
+
+    res.status(201).json({ id: user._id, accessToken: user.accessToken });
+  } catch (err) {
+    res
+      .status(400)
+      .json({ message: "Could not create user", errors: err.errors });
+  }
+});
+
+// protect my-pages endpoint
+app.get("/my-pages", authenticateUser, (req, res) => {
+  res.json({ message: "This is your personal page" });
+});
+
+// Allow the user to log in, not only register
+
+app.post("/sign-in", async (req, res) => {
+  try {
+    const { email, password } = req.body;
+    if (!email || !password) {
+      res.status(400).json({ message: "Email and password are required" });
+      return;
+    }
+
+    const user = await User.findOne({ email });
+    if (user && bcrypt.compareSync(password, user.password)) {
+      res.json({
+        userId: user._id,
+        name: user.name,
+        accessToken: user.accessToken,
+      });
+    } else {
+      res.status(401).json({ message: "Invalid email or password" });
+    }
+  } catch (err) {
+    res
+      .status(500)
+      .json({ message: "Internal server error", error: err.message });
+  }
 });
 
 // Start the server

frontend/src/App.jsx

@@ -1,3 +1,33 @@
+import { useEffect, useState } from "react";
+
+import { MyPages } from "./components/MyPages";
+import { Registration } from "./components/Registration";
+import { SignIn } from "./components/SignIn";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    // Check if user data is available in localStorage on component mount
+    const accessToken = localStorage.getItem("accessToken");
+    const userName = localStorage.getItem("userName");
+    const userId = localStorage.getItem("userId");
+
+    if (accessToken && userName && userId) {
+      setUser({ id: userId, name: userName });
+    }
+  }, []);
+
+  return (
+    <div className="app-container">
+      {user ? (
+        <MyPages user={user} setUser={setUser} />
+      ) : isRegistering ? (
+        <Registration setIsRegistering={setIsRegistering} />
+      ) : (
+        <SignIn setIsRegistering={setIsRegistering} setUser={setUser} />
+      )}
+    </div>
+  );
 };

frontend/src/components/Loader.css

@@ -0,0 +1,17 @@
+.loader {
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #000000;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

frontend/src/components/Loader.jsx

@@ -0,0 +1,5 @@
+import "./Loader.css";
+
+export const Loader = () => {
+  return <div className="loader"></div>;
+};

frontend/src/components/MyPages.jsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { SignOut } from "./SignOut";
+
+export const MyPages = ({ user, setUser }) => {
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchMyPages = async () => {
+      const accessToken = localStorage.getItem("accessToken");
+      if (!accessToken) {
+        setError("No access token found. Please log in again.");
+        return;
+      }
+      try {
+        const response = await fetch(
+          "https://auth-s0og.onrender.com/my-pages",
+          {
+            headers: {
+              Authorization: accessToken,
+            },
+          }
+        );
+        const data = await response.json();
+        if (response.ok) {
+          setMessage(data.message);
+        } else {
+          setError("Failed to fetch data. Please log in again");
+        }
+      } catch (error) {
+        setError("An error occurred. Please try again later");
+      }
+    };
+    fetchMyPages();
+  }, []);
+
+  if (error) {
+    return (
+      <div className="error-container">
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  if (!message) {
+    return (
+      <div className="loading-container">
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container">
+      <h1>Welcome, {user.name}</h1>
+      <p>{message}</p>
+      <SignOut setUser={setUser} />
+    </div>
+  );
+};

frontend/src/components/Registration.css

@@ -0,0 +1,61 @@
+.container {
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  margin: 50px auto;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #218838;
+}
+
+p {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.login-link {
+  color: blue;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.register-link:hover {
+  text-decoration: none;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}