DEV Community: Nuel

Image Management and Database Integration with Node.js, Multer, Cloudinary and MySQL

Nuel — Thu, 26 Oct 2023 13:03:14 +0000

In our previous article, we laid the foundation for a secure authentication system, ensuring user data privacy and application security. Read the previous article here
Today, we're back with an exciting update, introducing image handling and profile editing features to empower our users make adjustments to their profiles. Let's explore the implementation of these new functionalities and how they enhance the overall user experience.

Prerequisites
cloudinary account

Project structure:

Step 1: Installation

Before we dive into the implementation details, let's install two important packages that will play a crucial role in enabling user registration and profile editing:

npm i multer cloudinary

Multer is a middleware for handling file uploads, while Cloudinary is a cloud-based media management solution. We will utilize these tools to manage image uploads for user profiles.

Step 2: Create user profile
In the previous article, we implemented a register function which creates an account for a new user. We'll add a few more codes to this function which creates a profile for the user after the user is created.

const { v4: uuidv4 } = require("uuid");
const jwt = require("jsonwebtoken");
const userSchema = require("../schemas/userSchema");
const bcrypt = require("bcryptjs");
const {
  createTable,
  checkRecordExists,
  insertRecord,
} = require("../utils/sqlFunctions");
const profileSchema = require("../schemas/profileSchema");

const register = async (req, res) => {
  const { email, password } = req.body;

  // Check for empty email or password fields
  if (!email || !password) {
    res
      .status(400)
      .json({ error: "Email or Password fields cannot be empty!" });
    return;
  }

  // Hash the user's password
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(password, salt);

  // Create a user record
  const user = {
    userId: uuidv4(),
    email,
    password: hashedPassword,
  };

  // Create a profile record
  const profile = {
    profileId: uuidv4(),
    userId: user.userId,
    email: user.email,
  };

  try {
    // Create necessary tables
    await createTable(userSchema);
    await createTable(profileSchema);

    // Check if the user already exists
    const userAlreadyExists = await checkRecordExists("users", "email", email);

    if (userAlreadyExists) {
      res.status(409).json({ error: "Email already exists" });
    } else {
      await insertRecord("users", user);
      await insertRecord("profiles", profile);

      res.status(201).json({ message: "User created successfully!" });
    }
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};

Step 3: Implement user Authentication Middleware
Just like our previous article, user authentication remains a core component of our application's security. We've enhanced our authentication middleware to ensure that only authenticated users can access the profile editing feature.

Inside authMiddleware.js:

const jwt = require("jsonwebtoken");
const { checkRecordExists } = require("../utils/sqlFunctions");

const requiresAuth = async (req, res, next) => {
  const authorizationHeader = req.headers.authorization;

  if (!authorizationHeader || !authorizationHeader.startsWith("Bearer")) {
    return res.status(401).json({ error: "Not authorized, no token" });
  }

  try {
    const token = authorizationHeader.split(" ")[1];

    if (!token) {
      return res.status(401).json({ error: "Not authorized, no token" });
    }

    const decoded = jwt.verify(token, process.env.JWT_SECRET);

    if (!decoded || !decoded.userId) {
      return res.status(401).json({ error: "Invalid token" });
    }

    const user = await checkRecordExists("users", "userId", decoded.userId);

    if (!user) {
      return res.status(401).json({ error: "User not found" });
    }

    req.user = user;
    delete req.user.password;

    next();
  } catch (error) {
    console.error(error);
    return res.status(401).json({ error: "Token verification failed" });
  }
};

module.exports = { requiresAuth };

This middleware is used to protect routes that require authentication. It ensures that only users with a valid, unexpired token and a corresponding user record in the database can access the protected resources. If the user is authenticated, their information is made available in the req object for subsequent route handlers to use. If not authenticated or any verification fails, the middleware sends an error response.

Step 4: Multer Configuration
To handle image uploads in our profile editing feature, we've set up a Multer configuration in the utils/multer.js file. This configuration ensures that only image files with specific extensions (jpg, jpeg, and png) are accepted:

const multer = require("multer");
const path = require("path");

module.exports = multer({
  storage: multer.diskStorage({}),
  fileFilter: (req, file, cb) => {
    let ext = path.extname(file.originalname);
    if (ext !== ".jpg" && ext !== ".jpeg" && ext !== ".png") {
      cb(new Error("Unsupported file type!"), false);
      return;
    }
    cb(null, true);
  },
});

Step 5: Cloudinary Integration
To store and manage user profile images, we've integrated Cloudinary. In the utils/cloudinary.js file, we configure Cloudinary with the necessary credentials:

const cloudinary = require("cloudinary").v2;

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_API_KEY,
  api_secret: process.env.CLOUD_API_SECRET,
});

module.exports = cloudinary;

Step 6: Update environment variables
We're going to need some extra variables for cloudinary to work properly. We'll update our .env file with the necessary variables:

.env: PORT=5000
JWT_SECRET=YOUR_JWT_SECRET
HOST=localhost
USER=root
PASSWORD=""
DATABASE=profilePro
CLOUD_NAME=YOUR_CLOUD_NAME
CLOUD_API_KEY=YOUR_CLOUD_API_KEY
CLOUD_API_SECRET=YOUR_CLOUD_API_SECRET

CLOUD_NAME, CLOUD_API_KEY, CLOUD_API_SECRET can be obtained from your cloudinary account.

Step 7: Defining the Profile schema
In schemas/profileSchema.js:

const profileSchema = `
  CREATE TABLE IF NOT EXISTS profiles (
    profileId VARCHAR(255) UNIQUE NOT NULL,
    userId VARCHAR(255) UNIQUE NOT NULL,
    image VARCHAR(255),
    name VARCHAR(255),
    email VARCHAR(255) NOT NULL,
    phone VARCHAR(255),
    address VARCHAR(255),
    country VARCHAR(255),
    state VARCHAR(255),
    city VARCHAR(255),
    zip VARCHAR(255),
    about VARCHAR(255),
    links VARCHAR(255)
  )
`;

module.exports = profileSchema;

Step 8: Update SQL functions

In order to allow users update their profiles, we'll add an update function to the SQL functions we already have.

const updateRecord = (tableName, updates, column, value) => {
  return new Promise((resolve, reject) => {
    const columnValues = Object.keys(updates)
      .map((column) => `${column} = ?`)
      .join(", ");
    const query = `UPDATE ${tableName} SET ${columnValues} WHERE ${column} = ?`;

    pool.query(query, Object.values(updates).concat(value), (err, results) => {
      if (err) {
        reject(err);
      } else {
        resolve(results);
      }
    });
  });
};

module.exports = {
  createTable,
  checkRecordExists,
  insertRecord,
  updateRecord,
};

Step 9: Create profileController function

const { checkRecordExists, updateRecord } = require("../utils/sqlFunctions");
const cloudinary = require("../utils/cloudinary");

const updateProfile = async (req, res) => {
  try {
    const profile = await checkRecordExists(
      "profiles",
      "userId",
      req.user.userId
    );

    const updates = {
      ...req.body,
    };

    if (req.file) {
      if (!profile.image) {
        const image = await cloudinary.uploader.upload(req.file.path, {
          folder: "profilePro",
        });
        updates.image = image.secure_url;
      } else {
        const image_url = profile.image.split("/");
        const publicId = image_url[image_url.length - 1].split(".")[0];
        await cloudinary.uploader.destroy(`profilePro/${publicId}`);

        const image = await cloudinary.uploader.upload(req.file.path, {
          folder: "profilePro",
        });
        updates.image = image.secure_url;
      }
    }

    await updateRecord("profiles", updates, "profileId", profile.profileId);
    res.json({ message: "Profile Updated Successfully" });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};

module.exports = {
  updateProfile,
};

In the code above, we're getting the user's profile using the user's information which we have saved in the req from the auth middleware, then we set the fields we want to update, upload the profile image to cloudinary and set the image to the image url from cloudinary, finally we update the user's profile using the updateRecord SQL function.

Step 10: Create profileRoutes

const express = require("express");
const router = express.Router();
const upload = require("../utils/multer");

const { updateProfile } = require("../controllers/profileControllers");
const { requiresAuth } = require("../middlewares/authMiddleware");

router.put("/update_profile", requiresAuth, upload.single("image"), updateProfile);

module.exports = router;

This route ties everything together, ensuring that only authenticated users can access the profile editing feature.

Step 11: Server Configuration

const express = require("express");
const dotenv = require("dotenv");
dotenv.config();
const cors = require("cors");
const connectDB = require("./db/db");
const port = process.env.PORT;
const authRoutes = require("./routes/authRoutes");
const profileRoutes = require("./routes/profileRoutes");

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", authRoutes, profileRoutes); // Include the profile routes

connectDB();

app.listen(port, () => {
  console.log(`Server running on port: ${port}`);
});

With this configuration, users can now access and update their profiles via the /update_profile route.

Find the project Github repo here. Happy coding! 🎉

Conclusion

With the addition of the profile editing feature, ProfilePro has evolved into a more versatile and user-friendly application. Users can now customize their profiles, upload images, and keep their information up-to-date. We've utilized powerful tools like Multer and Cloudinary to manage image uploads and seamlessly integrated them into our authentication and database systems.

In the next article, we would build a beautiful user interface with React enabling our users to register, login, edit their profiles, upload profile image and logout. Stay tuned 😉

Building a Node.js Authentication System with MySQL: A Step-by-Step Guide

Nuel — Tue, 24 Oct 2023 14:21:32 +0000

In today's interconnected world, securing user data is paramount. Whether you're developing a web application, mobile app, or any digital service, implementing user authentication is a crucial step in ensuring the safety and privacy of your users.

The Ultimate aim of this project is to create a web app where users can register, login, and create profiles. We'll call this web app "profilePro".

In this comprehensive guide, we will walk through the process of creating a Node.js authentication server from scratch. By following these step-by-step instructions, you'll gain a deep understanding of how to implement robust user authentication, a fundamental feature for ProfilePro and many other applications.

To get started, you need to have the following installed on your system:

Now let's get started.

Project Structure:

Step 1: Initialization



npm init -y

This command generates a package.json file, which serves as a metadata file for your Node.js project. It contains information about your project, its dependencies, and various configuration settings.

Step 2: Install Dependencies

Next, we need to install the necessary dependencies for our authentication server. These packages will help us handle HTTP requests, database connections, authentication, and more. To install the required dependencies, use the following npm command:



npm i express cors dotenv nodemon mysql uuid jsonwebtoken bcryptjs

express: A popular web framework for building APIs and web applications.
cors: Middleware for handling Cross-Origin Resource Sharing (CORS).
dotenv: A package for managing environment variables.
nodemon: A tool for automatically restarting the server during development.
mysql: A MySQL database driver for Node.js.
uuid: A package for generating universally unique identifiers (UUIDs).
jsonwebtoken: A library for generating and verifying JSON Web Tokens (JWTs).
bcryptjs: A library for hashing and verifying passwords securely.

Step 3: Setup Nodemon

Nodemon is a handy utility that automatically restarts your Node.js server when you make code changes. To configure Nodemon, update your package.json file as follows:

Before edit:



"main": "index.js",

After edit:



"main": "server.js",
"scripts": {
  "server": "nodemon server.js"
}

Now our package.json should look like this:



{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "jsonwebtoken": "^9.0.2",
    "mysql": "^2.18.1",
    "nodemon": "^3.0.1",
    "uuid": "^9.0.1"
  }
}

This modification sets the main entry point to "server.js" and adds a "server" script that runs the server using Nodemon.

Step 4: Create Environment Variables

To keep sensitive information and configuration separate from your code, create a .env file in your project directory and add the following environment variables:



PORT=5000
JWT_SECRET=*********
HOST=localhost
USER=root
PASSWORD=""
DATABASE=profilePro

Step 5: Create Server

Now, let's create the server itself. In your server.js file, include the following code:



const express = require("express");
const dotenv = require("dotenv");
dotenv.config();
const cors = require("cors");
const port = process.env.PORT;

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.listen(port, () => {
  console.log(`Server running on port: ${port}`);
});

To run your server, use the following command:



npm run server

You should see a message in your terminal indicating that the server is running on the specified port.

Step 6: Connect Database

Now, it's time to connect your server to a database. We'll use MySQL as the database management system for this tutorial. Start by creating a configuration file (config.js) to store the database connection details:



const config = {
  host: process.env.HOST,
  user: process.env.USER,
  password: process.env.PASSWORD,
  database: process.env.DATABASE,
};

module.exports = config;

Then, create a function (db.js) for connecting to the database:



const mysql = require("mysql");
const config = require("./config");

const connectDB = async () => {
  const pool = mysql.createPool(config);

  pool.getConnection((err, connection) => {
    if (err) {
      console.log({ error: err.message });
    }

    console.log("Connected to MySQL database");
    connection.release();
  });
};

module.exports = connectDB;

In your server.js file, import and call the connectDB function to establish the database connection.



const express = require("express");
const dotenv = require("dotenv");
dotenv.config();
const cors = require("cors");
const connectDB = require("./db/db");
const port = process.env.PORT;

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

connectDB();

app.listen(port, () => {
  console.log(`Server running on port: ${port}`);
});

In the terminal:

Step 7: Create SQL Functions

To interact with the database, you'll need functions to create tables, check for record existence, and insert records. Create a file (sqlFunctions.js) to house these functions:



const mysql = require("mysql");
const config = require("../db/config");
const pool = mysql.createPool(config);

const createTable = (schema) => {
  return new Promise((resolve, reject) => {
    pool.query(schema, (err, results) => {
      if (err) {
        reject(err);
      } else {
        resolve(results);
      }
    });
  });
};

const checkRecordExists = (tableName, column, value) => {
  return new Promise((resolve, reject) => {
    const query = `SELECT * FROM ${tableName} WHERE ${column} = ?`;

    pool.query(query, [value], (err, results) => {
      if (err) {
        reject(err);
      } else {
        resolve(results.length ? results[0] : null);
      }
    });
  });
};

const insertRecord = (tableName, record) => {
  return new Promise((resolve, reject) => {
    const query = `INSERT INTO ${tableName} SET ?`;

    pool.query(query, [record], (err, results) => {
      if (err) {
        reject(err);
      } else {
        resolve(results);
      }
    });
  });
};

module.exports = {
  createTable,
  checkRecordExists,
  insertRecord,
};

Step 8: Create Table Schema

Define the schema for the user table in a separate file (userSchema.js):



const userSchema = `
  CREATE TABLE IF NOT EXISTS users (
      userId VARCHAR(255) UNIQUE NOT NULL,
      email VARCHAR(255) NOT NULL,
      password VARCHAR(255)
  )
`;

module.exports = userSchema;

Step 9: Create Auth Controller Functions

Your authentication server will require controller functions for user registration and login. These functions will handle user data and authentication logic. Create a file (authControllers.js) and add the following code:



const { v4: uuidv4 } = require("uuid");
const jwt = require("jsonwebtoken");
const userSchema = require("../schemas/userSchema");
const bcrypt = require("bcryptjs");
const {
  createTable,
  checkRecordExists,
  insertRecord,
} = require("../utils/sqlFunctions");

const generateAccessToken = (userId) => {
  return jwt.sign({ userId }, process.env.JWT_SECRET, { expiresIn: "7d" });
};

const register = async (req, res) => {
  const { email, password } = req.body;
  if (!email || !password) {
    res
      .status(400)
      .json({ error: "Email or Password fields cannot be empty!" });
    return;
  }
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(password, salt);
  const user = {
    userId: uuidv4(),
    email,
    password: hashedPassword,
  };
  try {
    await createTable(userSchema);
    const userAlreadyExists = await checkRecordExists("users", "email", email);
    if (userAlreadyExists) {
      res.status(409).json({ error: "Email already exists" });
    } else {
      await insertRecord("users", user);
      res.status(201).json({ message: "User created successfully!" });
    }
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};

const login = async (req, res) => {
  const { email, password } = req.body;
  if (!email || !password) {
    res
      .status(400)
      .json({ error: "Email or Password fields cannot be empty!" });
    return;
  }

  try {
    const existingUser = await checkRecordExists("users", "email", email);

    if (existingUser) {
      if (!existingUser.password) {
        res.status(401).json({ error: "Invalid credentials" });
        return;
      }

      const passwordMatch = await bcrypt.compare(
        password,
        existingUser.password
      );

      if (passwordMatch) {
        res.status(200).json({
          userId: existingUser.userId,
          email: existingUser.email,
          access_token: generateAccessToken(existingUser.userId),
        });
      } else {
        res.status(401).json({ error: "Invalid credentials" });
      }
    } else {
      res.status(401).json({ error: "Invalid credentials" });
    }
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};

module.exports = {
  register,
  login,
};

These controller functions handle user registration and login processes, including password hashing and JWT generation.

Step 10: Create Auth Routes

To expose your authentication functionality through HTTP endpoints, create a router for authentication routes. In a separate file (authRoutes.js), add the following code:



const express = require("express");
const { register, login } = require("../controllers/authControllers");
const router = express.Router();

router.post("/register", register);
router.post("/login", login);

module.exports = router;

*Step 11: Add Auth Routes to Server
*
Finally, include your authentication routes in your server configuration (server.js):



const express = require("express");
const dotenv = require("dotenv");
dotenv.config();
const cors = require("cors");
const connectDB = require("./db/db");
const port = process.env.PORT;
const authRoutes = require("./routes/authRoutes");

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use("/", authRoutes);

connectDB();

app.listen(port, () => {
  console.log(`Server running on port: ${port}`);
});

Testing

Entering required fields

User registration result

User login result

MySQL database

Find the project Github repo here. Happy coding! 🎉

Conclusion

By following these 11 steps, you've built a robust Node.js authentication server from scratch. This server is capable of handling user registration, login, and securely storing user data in a MySQL database. You've also implemented JWT-based authentication for enhanced security. This is a foundational setup that can be expanded and customized to meet the authentication needs of your specific application. With a solid understanding of these concepts, you're well-equipped to create secure user authentication in your Node.js projects.