DEV Community: Gyanshu Kumar

Authentication using Passport

Gyanshu Kumar — Mon, 15 Apr 2024 15:41:25 +0000

Introduction to Passport.org

Passport is a library of authentication functions that is adaptable to the needs of most applications.

Node.js authentication using Passport is a popular choice for developers because it provides a simple and flexible way to authenticate users. Passport is a middleware that can be easily integrated into any Node.js application to handle authentication strategies, such as local authentication with username and password, OAuth, OpenID, and more.

Setup and installation Passport.org

First, you need to set up a Node.js project. Initialize a new Node.js project using npm or yarn.

Then, install Passport and any relevant strategies you plan to use.

npm install passport passport-local

Configure Passport.js

Create a File Like eg-app.js
Create a server and connect it with database to Store user data

const express = require("express");N
const app = express();
const { connectMongoose, User } = require("./database.js");
const expressSession = require("express-session");
const ejs = require("ejs");
const passport = require("passport");
const { initializingPassport, isAuthenticated } = require("./passportConfig.js");
// Call the connectMongoose function to establish the database connection
connectMongoose();

initializingPassport(passport);

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

// To Use Passport..
app.use(
  expressSession({ secret: "secret", resave: false, saveUninitialized: false })
);
app.use(passport.initialize());
app.use(passport.session());

app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("index");
});

app.get("/register", (req, res) => {
  res.render("register");
});

app.get("/login", (req, res) => {
  res.render("login");
});

app.post("/register", async (req, res) => {
  // Handle registration logic here
  const user = await User.findOne({ username: req.body.username });
  if (user) return res.status(400).send("User already exists");

  const newuser = await User.create(req.body);

  res.status(201).send(newuser);
});

app.post(
  "/login",
  passport.authenticate("local", {
    failureRedirect: "/register",
    successRedirect: "/",
  })
);

app.get("/profile", isAuthenticated, (req, res) => {
    res.send(req.user);
});

// For Logout...
app.get("/logout", (req, res) => {
  req.logout();
  res.send("logged out");
})


app.listen(3000, () => {
  console.log("Listening on 3000");
});

This code creates a web server using Express and enables user authentication using Passport. It sets up routes for registering, logging in, accessing user profiles, and logging out. Data is stored in a MongoDB database, allowing users to register, log in, view their profile, and log out securely.

Database Connection

First You need to install mongoDB inside Your Terminal

npm i mongoose

To Connect with Databse We write

const mongoose = require('mongoose');

exports.connectMongoose = () => {
   mongoose.connect("mongodb://localhost:27017/Your Collection Name") //Write Your collection address here
   .then((e) => console.log(`connected to mongodb: ${e.connection.host}`))
   .catch((e) => console.log(e));
};

const userSchema = new mongoose.Schema({
   name: String,

   username: {
      type: String,
      required: true,
      unique: true
   },
   password:String,
});

exports.User = mongoose.model("User", userSchema);

This code defines a module for connecting to a MongoDB database using Mongoose. It exports a function connectMongoose that connects to the MongoDB server at localhost:27017/passport. It also defines a User model with a schema containing fields for name, username (required and unique), and password.

Passport Config

In Passport Config It Checks where If user is Real or not.

const User = require("./database").User; // Import the User model directly
const LocalStrategy = require("passport-local").Strategy;

exports.initializingPassport = (passport) => {
  passport.use(
    new LocalStrategy(async (username, password, done) => {
      try {
        const user = await User.findOne({ username }); // Correct variable name

        if (!user) return done(null, false);

        if (user.password !== password) return done(null, false);

        return done(null, user); // Authentication successful
      } catch (error) {
        return done(error, false);
      }
    })
  );

  passport.serializeUser((user, done) => {
    done(null, user.id);
  });

  passport.deserializeUser(async (id, done) => {
    try {
      const user = await User.findById(id);
      done(null, user);
    } catch (error) {
      done(error, false);
    }
  });
};

// For accessing Own Account....
exports.isAuthenticated = (req, res, done) => {
     if(req.user) return done();

     res.redirect("/login");
}

This module sets up Passport for local authentication, allowing users to log in with a username and password.

It verifies user credentials by checking if the provided username exists in the database and if the password matches the stored password for that user.

If authentication is successful, it stores the user's ID in the session to keep them logged in across requests.

It also includes middleware to ensure that users accessing certain routes are authenticated, redirecting them to the login page if they are not.

Create Basic Frontend Using Basic .ejs File

An EJS file is a template file used in web development to generate dynamic HTML content. "EJS" stands for Embedded JavaScript. It allows developers to embed JavaScript code directly into the HTML markup, making it easier to generate dynamic content based on data from the server or user interactions.

In simpler terms, an EJS file is like an HTML file with the added capability of including JavaScript code within it. This JavaScript code can be used to insert dynamic data, loop through arrays, conditionally show/hide content, and more. When the EJS file is rendered by the server, the JavaScript code is executed, and the resulting HTML is sent to the client's browser for display.

register.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <input type="text" placeholder="Name" name="name" />
        <input type="email" placeholder="Email" name="username" />
        <input type="password" placeholder="Password" name="password" />
        <button>Register</button>
    </form>
</body>
</html>

login.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <input type="email" placeholder="Email" name="username" />
        <input type="password" placeholder="Password" name="password" />
        <button>Login</button>
    </form>
</body>
</html>

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Page 1</h2>

    <a href="/">Home</a>
    <a href="/register">Register</a>
    <a href="/login">Login</a>



</body>
</html>

By this Following Code We Cand Easily Perforem Local Authentication.

                        THANK YOU

Introduction to Web Socket

Gyanshu Kumar — Fri, 05 Apr 2024 10:35:06 +0000

Socket.IO is a JavaScript library that enables real-time, bidirectional communication between web clients (like browsers) and servers. It’s particularly useful for building interactive web applications where data needs to be transmitted instantly and continuously between the client and the server.

Why SOCKET.io
It's popular for applications like chat, gaming, and live data updates. It works across platforms, handles fallbacks gracefully, offers event-driven architecture, supports rooms and namespaces, scales well, and has a strong community for support.
How Socket.io Work
Connection Establishment: When a client wants to establish a real-time connection with the server, it initiates a WebSocket handshake. If WebSocket support is available, Socket.IO uses it for communication. If not, it falls back to other transport mechanisms like long polling.

Event-Based Communication: Once the connection is established, both the client and the server can emit events and listen for events. Events are essentially messages that can carry data and trigger actions on the other side.

Bi-Directional Communication: Socket.IO allows both the client and the server to send and receive events. This bidirectional communication enables real-time updates and interactions between the client and the server without the need for continuous polling.

Handling Disconnections and Errors: Socket.IO provides mechanisms for handling disconnections and errors gracefully. It automatically attempts to reconnect in case of a connection loss and provides event listeners for error handling.

Additional Features: Socket.IO offers additional features like rooms and namespaces for organizing clients, as well as support for broadcasting messages to multiple clients simultaneously.

Steps To Create Socket Application

First you have to create a Folder and open That folder inside VS code
Open Terminal inside that folder write npm init after installing Packege.JSON created in your Folder.
install npm i express in terminal.
then install socket npm install socket.io inside terminal. After installing socket you will see that socket successfully added in your Json File.

{
  "name": "websocket",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.19.2",
    "socket.io": "^4.7.5"
  }
}

Create a new file eg. app.js
add Socket in the code

const http = require("http");
const express = require("express");
const path = require("path");
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
    console.log('A user connected');

    socket.on("user-message", (message) => {
        console.log('Message received:', message);
        io.emit("Message", message);
    });
});

app.use(express.static(path.resolve("./public")));

app.get("/", (req, res) => {
    return res.sendFile("/public/index.html");
});

server.listen(9000, () => console.log(`Server started at PORT 9000`));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat APP</title>
</head>
<body>
    <h1>Chatting</h1>

    <input type="text" id="message" placeholder="Enter Message"/>
    <button id="SendBtn">Send</button>

    <div id="messages"></div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();
        console.log('Client connected');

        const sendBtn = document.getElementById('SendBtn');
        const messageInput = document.getElementById('message');
        const allMessages = document.getElementById('messages')

        socket.on("Message", (message) => {
          const p = document.createElement("p");
          p.innerText = message;
          allMessages.appendChild(p);  
        });

        sendBtn.addEventListener("click", () => {
            const message = messageInput.value;
            console.log('Message sent to server:', message);
            socket.emit('user-message', message);
            messageInput.value = ''; // Clear input field after sending
        });
    </script>
</body>
</html>

To Run this code node app.js
The Output Will Look Like

Server started at PORT 9000

open two Chrome browsers, split your screen and search for localhost:9000 in both. Then, open the inspect feature and access the console. Write a message in the console and you will notice that it appears in both browsers simultaneously. This is how websocket works.

                 **Thank You**

Introduction to REST_API

Gyanshu Kumar — Thu, 04 Apr 2024 09:20:30 +0000

RESTful APIs are a crucial component of modern software development. By adhering to the principles of REST, they provide a standardized way for systems to communicate over HTTP. RESTful APIs allow developers to create more flexible and scalable applications that can be easily integrated with other systems. These APIs make it possible to manipulate resources using HTTP methods like GET, POST, PUT, and DELETE, and identify resources using URIs. By keeping the state of the system on the client side, RESTful APIs make it easier to build applications that are more resilient and adaptable to change. If you're looking to build modern, flexible applications, RESTful APIs are an essential tool in your toolkit.

Before creating a REST API, you typically need to set up a server to handle incoming HTTP requests. Express.js is a popular choice for creating servers in Node.js due to its simplicity and flexibility. Here's a basic overview of how you can create a server using Express:

To install Express:
Open Vs Code Inside Terminal write

npm install Express

Create a file eg. app.js
Code For Creating Server Using Express:

require("dotenv").config();
const express = require('express');
const app = express();
const connectDB = require("./db/connect");

const PORT = process.env.PORT || 5001;

const products_routes = require("./routes/products");

app.get("/", (req, res) => {
    res.send("Hi I am Live ");
});

// middleware or to set router
app.use("/api/products", products_routes);

const start = async () => {
    try {
        await connectDB(process.env.MONGODB_URL);
        app.listen(PORT, () => {
            console.log(`${PORT} Yes I am Connected`);
        });
    } catch (error) {
        console.log(error);
    }
}

start();

This code sets up an Express server with routes for handling product-related requests. It connects to a MongoDB database and starts the server on a specified port.

First, the code imports necessary dependencies like Express and MongoDB connection function. Then, it defines a route for the root URL ("/") to respond with "Hi I am Live".

Next, it mounts the product routes at "/api/products". This means that any requests to URLs beginning with "/api/products" will be handled by the product routes defined in the code.

After that, the code establishes a connection to MongoDB using the provided URL. This is necessary in order to interact with the database and perform CRUD (create, read, update, delete) operations on the product data.

Finally, the code starts the server on a specified port and logs a confirmation message. This means that the server is now running and ready to handle incoming requests.

To Run This code Simply Write in your Terminal:

node app.js

The Output Will Be Look Like:

5001 Yes I am Connected

Open Your Chrome Browser Then Search:
https://localhost:5001

result: Hi I am Live

I have created a REST API with pagination, searching, sorting, and filtering functionalities.
Suppose Our Product Data Look Like:

{
      "name": "iPhone 13",
      "price": 999,
      "featured": true,
      "rating": 4.9,
      "createdAt": "2024-03-05T00:00:00.000Z",
      "company": "apple"
    },
    {
      "name": "iPhone 11",
      "price": 999,
      "featured": true,
      "rating": 4.9,
      "createdAt": "2024-03-05T00:00:00.000Z",
      "company": "apple"
    },
    {
      "name": "Galaxy S22",
      "price": 1099,
      "featured": false,
      "rating": 4.8,
      "createdAt": "2024-03-05T00:00:00.000Z",
      "company": "samsung"
    },

This File is stored in JSON Format.
To access these Files We have to store all these Files on Our Database
To Connect With MongoDB:

const mongoose = require("mongoose");

const connectDB = async (uri) => {
  try {

    await mongoose.connect(uri);
    console.log("MongoDB connected successfully");
  } catch (error) {
    console.error("MongoDB connection error:", error);
    throw error; // Rethrow for external handling
  }
};

module.exports = connectDB;

After Writing this code You have to your MongoDB ID and Password inside your .env folder

const getAllProducts = async (req, res) => {

  const { company, name, featured, sort, select } = req.query;
  const queryObject = {};

Now We can apply All REST API Filteration on our Data
if We Want to See featured Product Only then we apply
suppose We have to see the Product Whose featured is True

if (featured){
    queryObject.featured = featured;
  }

open POSTMAN Create Workspace Select GET option write https://localhost:5001/product/featured:true
The result filters only that Product Whose Featured is True.

For Companywise Product

if (company){
    queryObject.company = company;
  }

https://localhost:5001/company = apple
It Shows Apple Product Only

For Sorting by Price

if (sort){
    let sortFix = sort.split(",").join(" ");
    apiData = apiData.sort(sortFix);
  }

http://localhost:5001/api/products?sort=-price

Now We want to see only 10 Product per Page the we apply pagination Formula

let page = Number(req.query.page) || 1;
  let limit = Number(req.query.limit) || 10;

  // Formula of Pagination
  let skip = (page - 1) * limit;

inside POSTMAN http://localhost:5001/api/products?page=2
The features mentioned are indeed commonly used in REST APIs. If you would like to learn more about these features or explore additional content, you can visit the official Express.js website at expressjs.com.

                **THANK YOU**

Gyanshu Kumar

Gyanshu Kumar — Tue, 16 Jan 2024 13:19:03 +0000