Cookies in Express JS

It is the small pieces of data that are stored in the client’s browser. Express has a middleware ‘cookie-parser’ that is issued to set cookies. The following command installs that middleware in your application.

npm install cookie-parser

Include the cookie-parser middleware function in your express js program.

Javascript

const cookieParser = require('cookie-parser');
app.use(cookieParser());

Example: The following program demonstrates ‘express-session’ and ‘cookie-parser’ usage in Expres JS

filename: login.html,server.js

Javascript

const express = require("express");
const session = require("express-session");
const cookieParser = require("cookie-parser");
 
const app = express();
 
// Middleware setup
app.use(
    session({
        secret: "your-secret-key",
        resave: false,
        saveUninitialized: false,
    })
);
 
app.use(cookieParser());
 
// Sample user data for demonstration purposes
 
// Middleware to check if the user is authenticated
const isAuthenticated = (req, res, next) => {
    if (req.session.user) {
        next();
    } else {
        res.redirect("/login");
    }
};
 
// Routes
app.get("/", (req, res) => {
    res.send("Welcome to the Express.js Session and Cookies Example!");
});
 
app.get("/login", (req, res) => {
    res.sendFile(__dirname + "/login.html");
});
 
app.post("/login", express.urlencoded({ extended: true }), (req, res) => {
    const { username, password } = req.body;
 
    // Check if the provided credentials are valid
    if (username === "admin" && password === "admin") {
        // Store user data in the session
        req.session.user = username;
        res.cookie("sessionId", req.sessionID);
 
        res.redirect("/profile");
    } else {
        res.send("Invalid credentials. Please try again.");
    }
});
 
app.get("/profile", isAuthenticated, (req, res) => {
    // Retrieve user data from the session
    const userData = req.session.user;
    res.send(`Welcome, ${userData.username}!
  <a href="/logout">Logout</a>`);
});
 
app.get("/logout", (req, res) => {
    // Destroy the session and redirect to the login page
    req.session.destroy(() => {
        res.clearCookie("sessionId");
        res.redirect("/login");
    });
});
 
// Start the server
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
 
        form {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
 
        label {
            display: block;
            margin-bottom: 8px;
        }
 
        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            box-sizing: border-box;
        }
 
        button {
            background-color: #4caf50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
 
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
 
<body>
    <form action="/login" method="post">
        <h2>Login</h2>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Login</button>
    </form>
</body>
 
</html>

Output:

How to manage sessions and cookies in Express JS?

Express is a small framework that sits on top of NodeJS web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing. It adds helpful utilities to NodeJS HTTP objects, it helps the rendering of dynamic HTTP objects. Express is a part of MEAN stack, a full-stack JavaScript solution for building fast, robust, and maintainable production web applications.

In this post, we will learn how to manage sessions and cookies in Express JS. Two packages in Express js are commonly used to manage cookies and sessions in Express JS. These are the package examples ‘express-session’ and for cookie parsing ‘cookie-parser.’

Table of Content

Sessions in Express JS
Cookies in Express JS

Cookies in Express JS

Javascript

Javascript

HTML

How to manage sessions and cookies in Express JS?

Categories

Contact US

Cookies in Express JS

Javascript

Javascript

HTML

How to manage sessions and cookies in Express JS?

Similar Reads

Categories

Contact US