project-auth

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.
+Creating my own Authentication API and using it in a simple website.
 
 ## 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?
+I used tools like MongoDB Atlas and postman to test my API. I did a small plan for the project using Figma. If I had more time I would work on the strech goals.
 
 ## 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 deploy: https://project-auth-backend-kfgp.onrender.com/
+Frontend deploy: https://sweet-lily-05d48d.netlify.app/

backend/.gitignore

@@ -1,2 +1,3 @@
 node_modules
-package-lock.json
+package-lock.json
+.env

backend/models/User.js

@@ -0,0 +1,11 @@
+import mongoose from "mongoose";
+
+const userSchema = new mongoose.Schema({
+  username: { type: String, unique: true, required: true },
+  password: { type: String, required: true },
+  accessToken: { type: String },
+});
+
+const User = mongoose.model("User", userSchema);
+
+export default User;

backend/package.json

@@ -12,9 +12,15 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "bcrypt": "^5.1.1",
+    "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.17.3",
-    "mongoose": "^8.0.0",
+    "jsonwebtoken": "^9.0.2",
+    "mongoose": "^8.0.0"
+  },
+  "devDependencies": {
     "nodemon": "^3.0.1"
   }
 }

backend/server.js

@@ -1,26 +1,110 @@
 import cors from "cors";
 import express from "express";
 import mongoose from "mongoose";
+import bcrypt from "bcrypt";
+import jwt from "jsonwebtoken";
+import dotenv from "dotenv";
+import User from "./models/User";
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
-mongoose.connect(mongoUrl);
-mongoose.Promise = Promise;
+dotenv.config();
 
-// 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();
+const port = process.env.PORT || 8080;
 
-// Add middlewares to enable cors and json body parsing
+// Middleware
 app.use(cors());
 app.use(express.json());
 
-// Start defining your routes here
+// Connect to MongoDB
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-auth";
+mongoose.connect(mongoUrl);
+mongoose.Promise = Promise;
+
+// Routes
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+  res.send("Welcome to your Express API");
 });
 
+app.post("/api/register", async (req, res) => {
+  const { username, password } = req.body;
+
+  try {
+    // Check if the username already exists
+    let user = await User.findOne({ username });
+    if (user) {
+      return res.status(400).json({ message: "Username already taken" });
+    }
+
+    // Hash the password
+    const salt = await bcrypt.genSalt(10);
+    const hashedPassword = await bcrypt.hash(password, salt);
+
+    // Create a new user
+    user = new User({ username, password: hashedPassword });
+    await user.save();
+
+    // Generate JWT token
+    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, {
+      expiresIn: "1h",
+    });
+
+    res.status(201).json({ message: "User registered successfully", token });
+  } catch (error) {
+    console.error("Registration error:", error);
+    res.status(500).json({ message: "Server error" });
+  }
+});
+
+app.post("/api/login", async (req, res) => {
+  const { username, password } = req.body;
+
+  try {
+    // Find the user by username
+    const user = await User.findOne({ username });
+    if (!user) {
+      return res.status(400).json({ message: "Invalid credentials" });
+    }
+
+    // Check if the password matches
+    const isMatch = await bcrypt.compare(password, user.password);
+    if (!isMatch) {
+      return res.status(400).json({ message: "Invalid credentials" });
+    }
+
+    // Generate JWT token
+    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, {
+      expiresIn: "1h",
+    });
+
+    res.json({ token });
+  } catch (error) {
+    console.error("Login error:", error);
+    res.status(500).json({ message: "Server error" });
+  }
+});
+
+app.get("/api/protected", authenticateToken, (req, res) => {
+  res.json({ message: "This is protected content" });
+});
+
+function authenticateToken(req, res, next) {
+  const authHeader = req.headers["authorization"];
+  const token = authHeader && authHeader.split(" ")[1];
+
+  if (!token) {
+    return res.status(401).json({ message: "No token, authorization denied" });
+  }
+
+  jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
+    if (err) {
+      console.error("Token verification error:", err);
+      return res.status(403).json({ message: "Token is not valid" });
+    }
+    req.user = decoded;
+    next();
+  });
+}
+
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);

frontend/.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-package-lock.json
+package-lock.json
+.env

frontend/index.html

@@ -1,10 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Cute kitties</title>
+    <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=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/App.jsx

@@ -1,3 +1,14 @@
+import { BrowserRouter as Router } from "react-router-dom";
+import AppRoutes from "./routes/AppRoutes";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <Router>
+      <div className="app">
+        <AppRoutes />
+      </div>
+    </Router>
+  );
 };
+
+export default App;

frontend/src/components/Home.jsx

@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom";
+import { FaLongArrowAltDown } from "react-icons/fa";
+import "../styling/Home.css";
+
+const Home = () => {
+  return (
+    <div className="homeContainer">
+      <div className="homeIntro">
+        <h1 className="homeTitle">Ready to see some very cute kitties?</h1>
+        <div className="homeSection">
+          <img src="/homeKitten.jpg" alt="cute kitten" className="homeImage" />
+          <p className="homeText">
+            "A cat will do what it wants, when it wants, and there is not a
+            thing you can do about it"
+          </p>
+        </div>
+      </div>
+
+      <div className="arrowIcon">
+        <FaLongArrowAltDown />
+      </div>
+
+      <div className="homeAccount">
+        <p className="accountIntro">
+          To get access to the kittens you need to log in.
+        </p>
+        <p className="accountText">Already have an account?</p>
+        <Link to="/login">
+          <button className="accountButton">Login</button>
+        </Link>
+
+        <p className="accountText">Need to create an account?</p>
+        <Link to="/register">
+          <button className="accountButton">Register</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

frontend/src/components/Navbar.jsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+import "../styling/Navbar.css";
+
+const Navbar = () => {
+  return (
+    <nav className="navbar">
+      <div className="navContainer">
+        <div className="navTitleSection">
+          <img src="/LogoIcon.png" alt="Cat icon" className="logoIcon" />
+          <h1 className="navTitle">Cute kitties</h1>
+        </div>
+        <ul className="navList">
+          <li className="navItem">
+            <Link to="/" className="navLink">
+              Home
+            </Link>
+          </li>
+          <li className="navItem">
+            <Link to="/register" className="navLink">
+              Register
+            </Link>
+          </li>
+          <li className="navItem">
+            <Link to="/login" className="navLink">
+              Login
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

frontend/src/components/auth/Login.jsx

@@ -0,0 +1,62 @@
+import "../../styling/Auth.css";
+import { useState } from "react";
+import axiosInstance from "../axiosInstance";
+import { useNavigate } from "react-router-dom";
+
+const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axiosInstance.post("/api/login", {
+        username,
+        password,
+      });
+      const { token } = response.data;
+      localStorage.setItem("token", token);
+      console.log("Login successfull");
+      navigate("/protected");
+    } catch (error) {
+      setError("Invalid credentials. Please try again");
+      console.error("Login error", error);
+    }
+  };
+
+  return (
+    <div className="authContainer">
+      <h1 className="authTitle">Login</h1>
+      <form className="authForm" onSubmit={handleLogin}>
+        <label className="authLabel">
+          Username:
+          <input
+            type="text"
+            required
+            className="textInput"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </label>
+        <label className="authLabel">
+          Password:
+          <input
+            type="password"
+            required
+            className="passwordInput"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        <button type="submit" className="authButton">
+          Login
+        </button>
+      </form>
+      {error && <p className="errorMessage">{error}</p>}
+    </div>
+  );
+};
+
+export default Login;