DEV Community: Joshua O.

Zero-Friction AI Dev: Build and Deploy Chatbots with a Single Docker Compose File

Joshua O. — Tue, 09 Dec 2025 12:28:45 +0000

1. The Unspoken Challenge of the Agentic Era

2. The Model Problem Solved: Docker Model Runner and GPU Acceleration

3. Orchestration: The Single YAML File That Simplifies the Stack (PoC)

3.1. What We’re Building: The Private Q&A Bot

3.2. Project Structure

3.3. Step-by-Step Code

3.4. Ingestion

3.5. The Final Proof: One Command

3.6. Testing

4. The Security Imperative: Sandboxes and Isolation

5. Conclusion: The New Standard for AI Stack Orchestration

Project repo - RAG-Docker-POC

1. The Unspoken Challenge of the Agentic Era

Two months ago, I wanted to build a code swarm - a multi-agent code reviewer. The first struggle was memory. If you’re a developer, you know the dream of building the next great autonomous AI agent is often interrupted by the nightmare of the toolchain. You don’t just need Python; you need a specific version of CUDA, a compatible PyTorch install, a dependency manager that behaves, and a local machine strong enough to even host a small Large Language Model (LLM).

This initial friction is where most AI projects stall. It’s what leads to the feeling that AI development is fundamentally different and far more complicated than traditional software engineering.

But what if you could eliminate that friction? What if getting a complex, multi-service AI application running on your laptop took less time than installing a single Python library?

Docker’s Mandate: Simplicity, Security, and Speed

The vision, as laid out by Docker, is simple: to make building and running AI applications as easy, secure, and shareable as any other kind of software.

It’s a mandate that is already paying off:

TheCUBE Research confirms that 52% of users cut their AI project setup time by more than half, while 87% accelerated their time-to-market by at least 26%.

Docker's impact by TheCUBE Research

TheCUBE Research Report on Docker’s impact: Report
Docker achieves this transformation by bringing standardization to the two most chaotic parts of any AI project: the model itself and the complex infrastructure required to support it.

The Proof: A Real-World RAG Pipeline

To prove this dramatic reduction in friction and time-to-market, we are going to build a Full Retrieval-Augmented Generation (RAG) Pipeline - the foundation of modern and private AI applications.

Manually setting up the three core components - the LLM, the Vector Database, and the Orchestration Service - can take hours or even days. With Docker’s new tooling, it takes a single command: bash docker compose up

2. The Model Problem Solved: Docker Model Runner and GPU Acceleration

The first point of friction in any AI project is the model itself. Before you can write a single line of application code, you must conquer the three-headed hydra of model setup: Dependencies, CUDA, and GPU Access.

Docker Model Runner (or a standardized local server like Ollama) abstracts away this complexity. The model is treated as just another containerized service, simplifying the setup.

The single biggest barrier is GPU accessibility. Docker Compose solves this with declarative simplicity, ensuring the container running our LLM has direct, optimized access to your hardware:

YAML

# Snippet demonstrating GPU access via Compose
services:
  ollama: # Our LLM Service
    image: ollama/ollama # Use the standardized image
    ports:
      - “11434:11434”
    deploy:
      resources:
        reservations:
          devices:
            - driver: nvidia # Crucial: requests the GPU driver
              count: all
              capabilities: [gpu]

This small configuration confirms that “hardware limits aren’t a blocker anymore.” The model, once running, exposes an OpenAI-compatible API, standardizing communication regardless of the model you choose.

3. Orchestration: The Single YAML File That Simplifies the Stack (PoC)

This section demonstrates the core thesis - that Docker Compose makes the complex RAG architecture plug-and-play, instantly proving the claim that you can “define the whole AI stack... in a single YAML file.”

3.1 What We’re Building: The Private Q&A Bot

We are building a private, local Q&A service using a Retrieval-Augmented Generation (RAG) architecture.

Components

ollama - Generates text and embeddings (LLM/Embedding Model)
qdrant - Stores text embeddings (Vector Database)
rag-app - Orchestrates the RAG flow (Python API)

3.2 Project Structure

We will use two files and a folder in our project root. The folder will have two files:

rag-docker-poc/
├── docker-compose.yml  # The orchestrator
├── rag-app/
│   ├── Dockerfile      # Build instructions for our Python service
│   └── requirements.txt # Python dependencies
│   └── main.py # The main application file
└── .env                # Stores environment variables (e.g., model name)

3.3 Step-by-Step Code

Step 1: The Python Dependencies (rag-app/requirements.txt)

We need libraries to talk to Ollama and Qdrant.

rag-app/requirements.txt
ollama # This allows us to talk to the LLM/Embedding service
qdrant-client # This allows us to talk to the Vector DB
fastapi
uvicorn
pydantic
pypdf # For document loading
langchain-text-splitters # For the splitter utility

Step 2: The Application Container (rag-app/Dockerfile)

We define a lightweight container for our orchestrator API.

rag-app/Dockerfile
FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
# Use a simple entry command (e.g., to run a web server)
CMD [”uvicorn”, “main:app”, “--host”, “0.0.0.0”, “--port”, “8000”]

Step 3: The Main Application File (main.py)

We define a simple FastAPI application that ingests a document and stores it in Qdrant.

rag-app/main.py
import os
import uuid
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from qdrant_client import QdrantClient, models
import ollama
from ollama import Client as OllamaClient
from langchain_text_splitters import RecursiveCharacterTextSplitter

# --- Configuration (Pulled from Environment)
OLLAMA_HOST = os.getenv(”OLLAMA_HOST”)
QDRANT_HOST = os.getenv(”QDRANT_HOST”)
EMBEDDING_MODEL = os.getenv(”EMBEDDING_MODEL_NAME”, “all-minilm”)
GENERATOR_MODEL = os.getenv(”GENERATOR_MODEL_NAME”, “qwen2:0.5b”)
COLLECTION_NAME = “private_documents”
VECTOR_SIZE = 384

# --- Chunking Parameters (CRITICAL for RAG Quality)
CHUNK_SIZE = 500  # Number of characters per chunk
CHUNK_OVERLAP = 100 # Overlapping characters between chunks

# --- Initialization
app = FastAPI()
qdrant_client = QdrantClient(url=QDRANT_HOST)
ollama_client = OllamaClient(host=OLLAMA_HOST)

class Query(BaseModel):
    question: str

class Ingest(BaseModel):
    document_text: str

# --- RAG Functions ---

def create_collection_if_not_exists():
    “”“Ensures the Qdrant collection is ready for vectors.”“”
    if not qdrant_client.collection_exists(collection_name=COLLECTION_NAME):
        qdrant_client.create_collection(
            collection_name=COLLECTION_NAME,
            vectors_config=models.VectorParams(size=VECTOR_SIZE, distance=models.Distance.COSINE)
        )

# UPDATED: Real Text Splitting and Embedding Function**
def process_and_upsert_document(document_text: str):
    “”“Splits a document into chunks, embeds them, and uploads to Qdrant.”“”

    # 1. Initialize the Text Splitter
    text_splitter = RecursiveCharacterTextSplitter(
        chunk_size=CHUNK_SIZE,
        chunk_overlap=CHUNK_OVERLAP,
        separators=[”\n\n”, “\n”, “ “, “”]
    )

    # 2. Split the Text
    chunks = text_splitter.split_text(document_text)

    # 3. Embed all chunks in a batch (for efficiency)
    embeddings_list = []
    points = []

    for chunk in chunks:
        # Generate the embedding vector for the chunk
        response = ollama_client.embeddings(model=EMBEDDING_MODEL, prompt=chunk)
        vector = response[’embedding’]

        # Create a unique point structure
        points.append(
            models.PointStruct(
                id=str(uuid.uuid4()),  # Use UUID string as unique ID
                vector=vector,
                payload={”text”: chunk, “source_doc”: “user_upload”}
            )
        )

    # 4. Upsert (upload) all points to Qdrant
    qdrant_client.upsert(
        collection_name=COLLECTION_NAME,
        points=points,
        wait=True
    )
    return len(chunks)

@app.on_event(”startup”)
def startup_event():
    “”“Runs on container startup.”“”
    create_collection_if_not_exists()

@app.post(”/ingest”)
def ingest_document(data: Ingest):
    “”“Ingests a document (text) into the vector database by splitting it.”“”
    num_chunks = process_and_upsert_document(data.document_text)
    return {”message”: f”Successfully indexed {num_chunks} chunks using {EMBEDDING_MODEL}”}

# The /query endpoint remains the same as it correctly handles retrieval and generation.
@app.post(”/query”)
def retrieve_and_generate(query: Query):
    “”“Retrieves context and asks the LLM to generate an answer.”“”

    # 1. Generate Query Vector
    query_vector = ollama_client.embeddings(model=EMBEDDING_MODEL, prompt=query.question)[’embedding’]

    # 2. Retrieve Context from Qdrant (using new API)
    search_result = qdrant_client.query_points(
        collection_name=COLLECTION_NAME,
        query=query_vector,
        limit=2
    ).points

    # 3. Construct the RAG Prompt
    context = “\n”.join([hit.payload[’text’] for hit in search_result])
    prompt_template = f”“”
    Context: {context}
    Question: {query.question}
    Use the provided context to answer the question briefly.
    “”“

    # 4. Generate Answer using LLM
    response = ollama_client.generate(
        model=GENERATOR_MODEL,
        prompt=prompt_template,
    )

    return {”answer”: response[’response’], “context_used”: context, “retrieval_score_1”: search_result[0].score if search_result else None}

Step 4: The Orchestration Blueprint (docker-compose.yml)

This single file links the three services and handles all configuration.

YAML

# docker-compose.yml
services:
  # 1. The LLM and Embedding Model Service (Ollama)
  ollama:
    image: ollama/ollama
    container_name: ollama
    ports:
      - “11434:11434”
    volumes:
      - ollama_data:/root/.ollama
    # CRITICAL: Enable GPU access for performance (remove if no GPU is available)
    deploy:
      resources:
        reservations:
          devices:
            - driver: nvidia
              count: all
              capabilities: [gpu]
    entrypoint:
      - /bin/bash
      - -c
      - |
        ollama serve &
        sleep 5
        ollama pull all-minilm
        ollama pull qwen2:0.5b
        wait

    healthcheck:
      test: [”CMD”, “ollama”, “list”]
      interval: 30s
      timeout: 10s
      retries: 10
      start_period: 300s # 5 minutes for initial model pulls

  # 2. The Vector Database Service (Qdrant)
  qdrant:
    image: qdrant/qdrant:latest
    container_name: qdrant
    ports:
      - “6333:6333”
      - “6334:6334”
    volumes:
      - qdrant_data:/qdrant/storage
    healthcheck:
      test: [”CMD-SHELL”, “bash -c ‘echo > /dev/tcp/localhost/6333’”]
      interval: 10s
      timeout: 5s
      retries: 5
      start_period: 5s

  # 3. The RAG Orchestrator API (rag-app)
  rag-app:
    build:
      context: ./rag-app
      dockerfile: Dockerfile
    container_name: rag-app
    ports:
      - “8100:8100”
    environment:
      OLLAMA_HOST: http://ollama:11434
      QDRANT_HOST: http://qdrant:6333
      GENERATOR_MODEL_NAME: qwen2:0.5b
      EMBEDDING_MODEL_NAME: all-minilm
    depends_on:
      qdrant:
        condition: service_healthy
      ollama:
        condition: service_healthy

volumes:
  qdrant_data:
  ollama_data:

3.4 Ingestion

To prove the RAG pipeline's effectiveness, we will use a real, dense technical document. For this demonstration, we'll use a portion of the Kubernetes Documentation (a complex, multi-layered topic) as our private knowledge source - like we want to build a chat agent that answers any question related to Kubernetes. We ingest the document into Qdrant, and then use the LLM to generate embeddings for each chunk of text.

Sample Document Text (for Ingestion):

"A Pod is the smallest execution unit in Kubernetes. It represents a single instance of a running process in a cluster. Pods can contain one or more containers, which are guaranteed to be co-located on the same host and share resources. The resources shared include volumes and a unique cluster IP address. Controllers like Deployments manage Pods automatically, handling replication and self-healing. When a node fails, the Controller automatically creates an equivalent replacement Pod on a different healthy node."

3.5 The Final Proof: One Command

The complexity of three distinct services, specialized models, and GPU configuration is now hidden behind the unified Docker surface.

Command:

Bash

docker compose up -d

This single command replaces hours of manual installation. In moments, your entire RAG pipeline - LLM, Vector DB, and application - is running securely on your local machine, fully isolated, proving the 52% reduction in setup time claim.

3.6 Testing

Step 1: Ingest the Private Document

Send the sample text to our API's /ingest endpoint.

curl -X POST http://localhost:8000/ingest \
-H "Content-Type: application/json" \
-d '{"document_text": "A Pod is the smallest execution unit in Kubernetes. It represents a single instance of a running process in a cluster. Pods can contain one or more containers, which are guaranteed to be co-located on the same host and share resources. The resources shared include volumes and a unique cluster IP address. Controllers like Deployments manage Pods automatically, handling replication and self-healing. When a node fails, the Controller automatically creates an equivalent replacement Pod on a different healthy node."}'

Output:

Step 2: Query the System

Ask a question that requires knowledge only found in the document.

curl -X POST http://localhost:8000/query \
-H "Content-Type: application/json" \
-d '{"question": "What happens to a Pod when its node fails?"}'

Output:

4 The Security Imperative: Sandboxes and Isolation

The Docker vision is equally focused on security, which becomes paramount with highly capable, autonomous agents.

Agents need to run shell commands (npm install, git commit) to be useful. When running directly on your host machine, this capability is a liability, as a Prompt Injection attack can trick the agent into running malicious code (e.g., reading your ~/.ssh/keys or running destructive commands).

Docker addresses this by providing a structural solution: OS-level isolation. When our rag-app runs in its container, the agent can only see the files mounted into the container - our project directory. Any attempt to access sensitive files on the host system fails immediately with a “No such file or directory” error. This moves security from fragile application guardrails to a robust, structural defence that is always on.

5 Conclusion: The New Standard for AI Stack Orchestration

The fragmented toolchain that once defined AI development is now obsolete. By containerizing the entire workflow—from GPU-accelerated LLMs to complex multi-service architectures—Docker has successfully shifted the focus from infrastructure friction to pure innovation.

The statistics from TheCUBE research are not hyperbole; they are the logical outcome of a standardized platform:

52% faster setup: Proven by deploying a complete RAG pipeline with a single docker compose up command.
Secure: Confirmed by enforcing OS-level isolation, neutralizing the risks posed by highly autonomous agents.
Shareable: Demonstrated by packaging the entire stack (models, database, app) into a single, portable YAML file.

Docker's vision is clear, and as we've demonstrated, it's working. The future of AI development belongs to the standard, secure, and zero-friction containerized workflow.

Next Step: Optional

You can use the resources below to learn more -

HTML DOM and JavaScript

Joshua O. — Thu, 31 Aug 2023 07:40:48 +0000

Content Overview

Introduction
The web browser
The HTML document as an object
Javascript – A language for creating and manipulating web pages
Why understanding the DOM is important
DOM – the standard for accessing web documents
Node and Element
Methods and Properties
Finding, creating, manipulating, styling, and removing elements using HTML DOM methods and properties
Conclusion

Prerequisite: You should have a basic understanding of HTML, CSS, and Javascript.

Introduction

The World Wide Web was introduced to simplify the sharing of resources between two or more computers through a connected system, called the internet. These resources could be in the form of text, images, or video. They are usually retrieved and displayed in a human-readable format by a web browser. This write-up provides a succinct overview of the internet browser, and the HTML document, along with the basis for manipulating and interacting with web pages via scripting.

The web browser

A web browser, or browser for short, is an application that retrieves data from a remote or local server and renders it in a form that a user can interact with. The process of parsing and displaying data in a human-readable format is usually done by the browser engine, which is sometimes called a rendering engine. You may check here for different browser engines and comparisons.

The browser receives web contents as byte packets and then converts them into a format it understands. What this means is that the bytes are first converted to characters, then to tokens. Tokens are then converted into nodes. This is simply the process through which the document tree is created. We will talk more about this later in this article.

How the DOM tree is being created (Image source: web-dev)

For over two decades now, the web browser has been an important tool for retrieving web pages from the internet. We use it for quite many things including shopping, chatting with friends, getting information about the latest trend, sending and retrieving emails, searching for jobs, and so on. For this reason, makers of browsers are always working hard to optimize rendering and security.

The HTML Document as an object

Remember, for a web browser to display web pages, it needs to translate them into a format it can comprehend. This involves converting web content segments into nodes. The initial step in this process involves creating the document node, or object, representing the entire HTML (HyperText Markup Language) document. Consequently, your browser perceives the document as an entity comprised of multiple objects instead of a collection of characters. The image below shows the document object inside the browser's window.

The global window object (Image source: medium)

If this so far is not yet clear to you, please take a breath and read again to this point as it lays the foundation upon which this article is built. You may also use the external links for more explanation.

Javascript - a language for creating and manipulating web pages

Javascript is simply a scripting language for creating interactive and dynamic web content. For your script to communicate with the browser and web document, it needs an interface or a standard API called the Document Object Model (DOM). As you have learned above, the browser models the HTML or XML document into an object during parsing which then provides you with an interface through which your script can manipulate the web document.

The good news is that Javascript has evolved over the years, it is now used not only for client code but for the server as well.

Why understanding the DOM is important?

It is the standard way by which the browser represents an HTML or XML document for fast rendering of the web page.
It allows you to dynamically style, interact, and manipulate web pages through a script. You can hide a navigation element or dropdown and only show it when a user clicks a particular button. That reduces the browser's load time as it dynamically adds an element when it is needed.
The DOM transforms a web document into a central object with access to methods and properties.

DOM - the standard for accessing web documents

A web document could be in HTML or XML format. The DOM is a structured representation of the web document in the browser memory after parsing. It is a tree representing the document object.

The World Wide Web Consortium (W3C) is an organization that handles the standardization of the DOM. It separates the DOM standard into three (3) parts, namely:

Core DOM - This defines the model for all document types
HTML DOM - The model for HTML documents
XML DOM - This standard defines the model for XML documents

The primary focus of this article is the HTML DOM.

Node and Element

The term "Node" in this sense is commonly used as a generic name for any object in the DOM tree. A node could be an element, attribute, text, or comment - MDN - nodeType. An element is a node with a specified HTML tag such as <head>, <table>, <p>, etc.

Methods and Properties

Each element in the DOM represents specific data in the web document and responds to some sort of instructions. For you to perform actions such as adding or deleting an element, or even adding an event, you need some sort of command the element responds to.

The HTML DOM provides you with various methods and properties that you can use to manipulate elements. When it comes to working with elements, there are specific actions you can perform using certain methods. On the other hand, properties are values that you can easily obtain or modify as needed. Knowing the distinction between methods and properties is crucial for effectively managing and manipulating elements in your projects. We have quite many of them. However, this article explains those you will most likely be using in your scripts.

Before we go ahead, let's write a sample HTML file we will be using for this tutorial. I added the styling code too just for some nice visual output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample HTML Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="parent">
        <h1>Sample HTML Document</h1>
        <div class="wrapper">
          <div class="navigation" id="navigation">
            <button class="dom btn" id="dom" data-name="nav-btn">DOM</button>
            <button class="methods btn" id="methods" data-name="nav-btn">Methods</button>
            <button class="properties btn" id="properties" data-name="nav-btn">Properties</button>
          </div>
         <!--Dynamically add text to div element-->
          <div class="content" id="content"></div>
        </div>
    </div>

    <script></script>
  </body>
</html>

You can use the DOM API to manipulate the rendered version of this document. We will see how to do that later in this tutorial.

Here are the styles we have applied:

html,
body {
    margin: 0;
    padding: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
            UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    scrollbar-width: thin;
    scrollbar-color: #f00;
}
* {
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.parent {
    height: 200px;
}
.wrapper {
    margin: auto;
    width: 25rem;
    display: grid;
    gap: 2rem;
}
h1 {
    text-align: center;
}
.navigation {
    display: flex;
    gap: 10px;
}
button {
    padding: 8px 15px;
    background-color: #fff;
    border: none;
    outline: none;
    box-shadow: 1px 2px 15px 1px #e0e0e0;
    text-transform: uppercase;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px;
    flex-basis: 100%;
}
.content {
    padding: 1px 10px;
    text-align: center;
}

/*Reduce width on devices with a maximum width of 400 pixels*/
@media screen and (max-width: 400px) {
    .wrapper {
        width: 20rem;
    }
}

Now, view the file on your browser, you should see something like,

Image of a web page with three navigation buttons

Finding, creating, manipulating, styling, and removing elements in the document using HTML DOM methods and properties.

To utilize or modify any element within your script, it is essential to verify its presence within the browser's Document Object Model (DOM). To achieve this, you may use any methods offered by the DOM for that purpose. As previously stated, a method executes a predefined action. Typically, the name of a method provides insights into its function.

Let's say you wanted to retrieve an element, you may use getElementById or querySelector. Either of these two selects an element. The element selected may have children or not. This means you can also access children elements by retrieving their parent and using the children or childNodes property.

getElementById

Finding an element in the browser DOM using this method returns the element with the specified id. If more than one element has the same id, it returns the first in the DOM tree. Also, note that if the element does not exist, getElementById returns null.

Unlike the querySelector method which returns the generic element type, this method returns a more specific element type.

Now, let's get the navigation and content element. You may add the following code inside the script tag in the html file or you create a separate file for it and link it to the html file.
```
const navs = document.getElementById("navigation"); // get element by id
const content = document.getElementById("content"); // get element by id
```
We called the getElementById() method on the document object and specified the id of the element we wanted. Go ahead and log one of those in the console to confirm.
```
console.log(navs);
```

Image of selected node using getElementById

You'd want to do more than just retrieve elements in your scripts. Now, assuming you wanted to give the first button of the navigation element a different background color, it is as simple as,

navs.firstElementChild.classList.add("active");

.active {
    background-color: rgb(1, 29, 29) !important;
    color: #fff !important;
}

The preceding code shows that we added a new class to the target element's class list. We also needed to write the class styling code inside our CSS file. Please take note of that. The add() allows us to add a class(es) to an element specified in the script.

firstElementChild is a read-only property that returns the first child element of a specified element.

The classList property returns a token list of the class attribute of an element. CSS class names or tokens of an element are usually separated by a space.

The add method adds one or more class names to an element.

Image of selected element with a different style on its first child. Demo using getElementById, firstElementChild.

querySelector

This method like getElementById returns the first element in the document with a specified CSS selector(s). The selector could be an id, class name, ids, class names, attributes, dataset selector, or even a tag name. Assuming you wanted to select the navigation element by its class name, using querySelector you just need to add a dot (.) before the class name. If you wanted to select by id, you add the hash symbol (#) instead. Like so,
```
const navs = document.querySelector(".navigation"); // Select by class name
const content = document.querySelector("#content"); // Select by id
const firstButton = document.querySelector(".navigation .dom"); // deep select by class name
```
Now, let's create a fourth button and append it to the navigation element.
```
const fourthButton = document.createElement("button"); // create a new node
fourthButton.innerText = "Event"; // add inner text
navs.appendChild(fourthButton); // append child to nav element
```
We have created a button element, added a text node, and append it to navs.

The createElement method creates an element node in the browser memory according to a specified tag name.

The innerText property returns the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements. Read more

The appendChild method adds new elements to the end of the list of children. It only accepts a node type.

Image of selected element with a newly-added child element. Demo using querySelector, appendChild.

querySelectorAll

The querySelectorAll method returns a list of nodes matching the specified selector. These nodes could be text nodes, element nodes, and attribute nodes. When you query a list of elements using querySelectorAll, the returned list can only be accessed by their index number.

Let's select all button elements with a data attribute of name=nav-btn. Learn more about data attributes. After that, we will set an active class on the button that is currently clicked by simply looping through all button elements and determining if the button is the target element clicked.
```
const buttons = document.querySelectorAll("button[data-name=nav-btn]"); // Retrieve all button elements with a data name `nav-btn`
console.log(buttons);
```

<img src="https://i.imgur.com/nd5ShaL.png" alt="Image of selected nodes using querySelectorAll">
<figcaption><center>Image of selected nodes using **<mark>querySelectorAll</mark>**.</center></figcaption>

const buttonsContainer = document.querySelector(".navigation"); // select parent element
const buttons = document.querySelectorAll("button[data-name=nav-btn]"); // retrieve all elements matching the specified selector
buttonsContainer.addEventListener("click", (e) => {
    // add an event listener on the parent element
    if (e.target.nodeName === "BUTTON") {
        // only execute if target is a button element
        buttons.forEach((btn) => {
            // loop through the array of buttons in the parent element
            // check if the current click is on the button
            if (btn == e.target) {
                // add the active class
                btn.classList.add("active");
            } else btn.classList.remove("active"); // otherwise remove the active class
        });
    } else return;
});

The addEventListener method adds an event to a specified target through a listener. The listener receives a notification whenever an event occurs such as a click.

forEach method iterate over each element of an array and executes the specified function. It returns an undefined value, unlike the map method which returns a new array.

remove is a method which removes the specified class name from DOMTokenList

A short output of manipulating button elements using querySelectorAll, addEventListener.

getElementsByClassName

This method retrieves a collection of elements matching the specified class name(s). It returns a type of HTMLCollection, which is a list of HTML elements similar to an array but it's not, because you can't call Array methods like push(), pop(), or join() on it.
```
const buttons = getElementsByClassName("btn");
console.log(buttons);
```
In the following image, you will see that this method returns a list of elements (HTML Collection). One advantage of using getElementsByClassName over querySelectorAll is the flexibility it offers in accessing elements. While querySelectorAll returns a NodeList that can only be accessed by index, getElementsByClassName allows you to access each element in the returned list either by index or by name. This makes it easier and more convenient to work with the specific elements you need. For instance, the marked portion in the image indicates that the faded items in the HTMLCollection are the named items, so you can access them by their name-like buttons.namedItem('dom').

Image of retrieved elements using getElementsByClassName.

Again, we will add a click event to each of the buttons and change the text content of the text element.

const buttonsContainer = document.querySelector(".navigation"); // select parent element
const buttons = document.getElementsByClassName("btn"); // retrieve all elements matching the specified class name
const textElement = document.getElementById("content");
buttonContainer.addEventListener("click", (e) => {
    // add an event listener on the parent element
    if (e.target.nodeName === "BUTTON") {
        // only execute if target is a button element
        Array.from(buttons).forEach((btn) => {
            // loop through the array of buttons in the parent element
            // check if the current click is on the button
            if (btn == e.target) {
                // add the active class
                btn.classList.add("active");
                textElement.innerText = `This is the ${e.target.innerText} button`;
            } else btn.classList.remove("active"); // otherwise remove the active class
        });
    } else return;
});

Both getElementsByClassName and getElementsByTagName are useful methods that return an HTML Collection of elements. It's important to note that the list they return is not an array, but rather an array-like or iterable object. So if you want to iterate over the list, you need to convert it into an actual array. Thankfully, Array.from comes to our rescue by allowing us to easily achieve this conversion.

The Array.from method returns an array from an array-like object or an iterable object. It is used to convert an iterable object to an array.

A short gif of manipulating button elements using getElementsByClassName, addEventListener.

getElementsByTagName

getElementsByTagName retrieves elements by a given tag name. It accepts only one tag name which must be a string. Similar to getElementsByClassName, it returns a list of elements. You can return all elements in the HTML DOM by supplying the * as the tag name, e.g.getElementsByTagName('*').
```
const buttons = getElementsByTagName("*");
console.log(buttons);
```

<img src="https://i.imgur.com/k0rUl5i.png" alt="Image of selected elements using getElementsByTagName">
<figcaption><center>Image of retrieved elements using **<mark>getElementsByTagName</mark>**.</center></figcaption>

Now, let's remove the last button element from the DOM.

function renderRemoveButtonAndExecute() {
    const arrayOfButtons = document.getElementsByTagName("button");
    const lastElement = arrayOfButtons.item(arrayOfButtons.length - 1);
    const textElement = document.getElementById("content");
    textElement.innerHTML = `<button class="remove-btn">Remove last button</button>`;
    textElement.children[0].addEventListener("click", () =>
        lastElement.remove()
    );
}
renderRemoveButtonAndExecute();

Above, we wrote a function called renderRemoveButtonAndExecute. It retrieves an array of navigation buttons, gets the last button from the array, and removes it when the remove button is clicked.

The item method returns an element with the specified index in an HTMLCollection.

The innerHTML property allows you to set or retrieve the HTML content of an element. See here for reference.

A gif showing how an element was removed from the DOM -- getElementsByTagName, remove.

Conclusion

The browser is an incredibly powerful tool equipped with a wide array of APIs. From the HTML DOM to the File API, Web Audio API, Navigation API, and WebRTC, among many others, these APIs enhance the functionality and versatility of the browser. With such capabilities at your fingertips, you can create dynamic web experiences that push boundaries and meet the needs of modern users. For anyone starting in web development, having a solid grasp of the HTML Document Object Model (DOM) is essential. It forms the foundation of web page manipulation and interaction. There are numerous methods and properties within the DOM that enable developers to efficiently work with HTML elements. Although this article only covered a handful of them, it aimed to give beginners a taste of what the DOM has to offer.

Now you've come to the end of this tutorial. I hope this article has added to your knowledge.

Build a Login and Logout API using Express.js (Node.js)

Joshua O. — Wed, 15 Mar 2023 11:54:14 +0000

Introduction
The Concept of Authentication and Authorization
- Authentication
- Authorization
Setting up the development files, installing required packages, and creating a database
Creating Main Route and API server instance
- Create a Main route
- Create a server instance for your API
Authentication Logic
Authorization Logic
Logout Logic

Introduction

One of the first challenges I encountered when I started writing server code was how to build a secured yet simple authentication and authorization (AA) flow without dependence on third-party providers. Thank God for the tech community and platform such as StackOverflow from where I got better explanations.

Note that there are better technologies to use when it comes to implementing an AA system in your app. Nowadays, you don't have to write AA code yourself, allowing you to focus on the business logic of your app.

In this article, you will learn the basics of authentication and authorization, and how to build a login and logout system using ExpressJS. I have chosen ExpressJS for this tutorial because it is flexible and has an easy learning curve.

Prerequisites:

Basic knowledge of Backend development in Node (ExpressJS)
Basic knowledge of NOSQL - Mongoose or MongoDB
Basic knowledge of JSON Web Tokens (JWT)
Basic knowledge of how cookies work

Clone the project repository - https://github.com/mjosh51/authentication-authorization-expressjs-tutorial-starterfiles (optional)

Before we dive into writing codes, let’s review some theories. Doesn’t sound good to you? Yes, I am a fan of practicals too. However, let’s define a few concepts.

The Concept of Authentication and Authorization

In this section, you will briefly get to know what Authentication and Authorization is, and their difference.

Authentication

Authentication is the process of verifying a user’s identity. Essentially, it means making sure that a user is who they say they are.

You can use one or more of the following methods while implementing authentication:

What a person knows (password or passphrase).
What a person has (one-time token or physical device).
What a person is (biometrics, fingerprint reader, facial recognition).

Authorization

Authorization follows authentication. It ensures that a logged-in user has the right to perform specific actions or view certain data. For example, a user may have access to view his personal information through a web interface, but shouldn’t be permitted to view other user’s data. He also shouldn’t have access to administrative functions if he is just a regular user. In cases where a user was able to access another user’s account either by changing parameters or ID, then there is a flaw in the authentication/authorization flow. You can read more here https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/authentication-and-authorization-in-aspnet-web-api

Now, that’s enough theory to get us started.

Setting up the development files, installing required packages, and creating a database.

Here, you will set up your development files, install dependencies and create a Mongo database.

You may skip Step One and Two if you already cloned the starter files from https://github.com/mjosh51/authentication-authorization-expressjs-tutorial-starterfiles, instead, in your project's folder terminal, type npm i to install the required packages.

Step One

Create a folder for your project and open it using your favourite code editor. For this tutorial, I will be using VSCode.
In your terminal, enter npm init. (Assuming you have node installed on your machine)
Respond appropriately to the prompts.
Create a folder in the root of your project folder, name it "v1". Note that this is optional. It just helps to organize the versions of your app. Other names you can use are "app", and "src"...
Inside your package.json file, under "scripts", add a dev and/or start command to enable you to start your API.
Add "dev": "nodemon v1/server.js", under "scripts" in your package.json file
Add "type": "modules" to your package.json file, to use import statements rather than require.

Step Two
Installing required packages: In your project directory terminal, enter,

npm install express mongoose bcrypt cookie-parser dotenv cors express-validator jsonwebtoken
npm install --save-dev nodemon. (To install Nodemon as dev dependency)

Now you have installed the necessary tools for this tutorial.

A quick explanation of some of the tools you just installed

ExpressJS is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. https://expressjs.com

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB. https://mongoosejs.com/docs/index.html

Bcrypt is a library to help you hash passwords. It uses a password-hashing function that is based on the Blowfish cipher. We will use this to hash sensitive things like passwords.

Cookie-parser is a middleware used to parse the Cookie header and populate req.cookies with an object keyed by the cookie names. Optionally you may enable signed cookie support by passing a secret string, which assigns req.secret so it may be used by other middleware.

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options. We don’t necessarily need this as we are developing just the API, however, good that you know in case you want to implement one.

Express-Validator is a set of express.js middlewares that wraps validator.js validator and sanitiser functions. You may want to check for an empty request body or validate or even sanitize the request body. This package is very useful for that. You will add one or two of its functions in your code later.

Nodemon is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected. With this, you don’t have to manually restart your application each time you make changes. Another powerful tool used mostly in production is pm2. You can check it out pm2.

Step Three
Get your URI string from MongoDB or your database of choice. In this particular tutorial, I am using Mongoose.

Create an account on MongoDB.
Create a database.

Once you have done that, it should look like this,

Click connect
Copy the connection string into your .env file as the value for URI.

Now, get set to code.

Creating Main Route and API server instance

In this section, you will create a route for the main app and other mini apps. Here think of an app as a route. This means that your API will have a main route which routes other mini-routes.

A route is a part of your code that handles an HTTP request e.g. GET, POST, DELETE, PUT, and the associated function. The home route is like a welcome page for your API. As you might have known, an API is the middleman between a client app and the database.

Create a Main route

To create a main route:

Create a folder named "routes" in your v1 folder.
Create a file inside your routes’ folder, name it "index.js" (without the quotes).
Create the main route function. It will take the server instance as its argument.
Next, write the home route logic.
Export the route function as default.

Check the GitHub repository for the starter files to confirm that you have the same number of folders. Note: You may ignore the utils folder for now.

Your code should look like the following:

File Path - v1/routes/index.js


const Router = (server) => {
// home route with the get method and a handler
server.get("/v1", (req, res) => {
    try {
        res.status(200).json({
            status: "success",
            data: [],
            message: "Welcome to our API homepage!",
        });
    } catch (err) {
        res.status(500).json({
            status: "error",
            message: "Internal Server Error",
        });
    }
})
};
export default Router;

Note that, in the preceding code, we have created an handler that will handle various routing logic in the app. It takes the server instance as an argument. You shall see where we are getting that instance from in a bit.

Create an env and configuration file

Another important file to create is the env file. The env file stores a key-value string for your secret strings which you would not want to be exposed. You may store API keys, secrets, and tokens in it or use a more secured solution.

Run the command npm run env to create an env file with the .env.example file template in the starter files.

Otherwise,

Create a new file in your project's root folder and name it ".env".
Copy and paste the following into it

#DATABASE_STRING
URI=xxxxxxx
#SERVER_PORT
PORT=5005
#TOKEN
SECRET_ACCESS_TOKEN=xxxxx

You will change some of the values later.

You may also create a configuration file or config file for short. It is used to organize environment variables into one place for convenience.

To do that,

Create a folder inside your v1 folder, name it "config"
Create a file named "index.js" inside the folder created previously
Import the dotenv module, and call the config method on it
Destructure environment variables by their keys
Export the destructured variables

Your file should look like,

File Path - v1/config/index.js

import * as dotenv from "dotenv";
dotenv.config();

const { URI, PORT, SECRET_ACCESS_TOKEN } = process.env;

export { URI, PORT, SECRET_ACCESS_TOKEN };

Create a server instance for your API

To keep things simple, we will create a server instance for the main app.

Create a file named "server.js" inside your v1 folder
Import express, cors, cookieParser, mongoose modules
Import port and database string variable from the config file you created earlier (Note: the file is a named export)
Import the Main app route from routes/index.js
Create a server object e.g const server = express()
Configure Server Header
Connect Database
Connect the main route to the server
Start up server

Compare your code with the following code:

File Path - v1/server.js

import express from "express";
import cors from "cors";
import cookieParser from "cookie-parser";
import mongoose from "mongoose";
import { PORT, URI } from "./config/index.js";
import Router from "./routes/index.js";

// === 1 - CREATE SERVER ===
const server = express();

// CONFIGURE HEADER INFORMATION
// Allow request from any source. In real production, this should be limited to allowed origins only
server.use(cors());
server.disable("x-powered-by"); //Reduce fingerprinting
server.use(cookieParser());
server.use(express.urlencoded({ extended: false }));
server.use(express.json());

// === 2 - CONNECT DATABASE ===
// Set up mongoose's promise to global promise
mongoose.promise = global.Promise;
mongoose.set("strictQuery", false);
mongoose
    .connect(URI, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    })
    .then(console.log("Connected to database"))
    .catch((err) => console.log(err));

// === 4 - CONFIGURE ROUTES ===
// Connect Route handler to server
Router(server);

// === 5 - START UP SERVER ===
server.listen(PORT, () =>
    console.log(`Server running on http://localhost:${PORT}`)
);

It is time to start your API for testing. First, inside your terminal, run this command - npm run dev. Your server should be started like so,

Using Postman or your favourite API testing platform, send a GET request to http://localhost:5005/v1. I am using the REST Client extension for VSCode. If everything goes well, you should get a similar response like,

Authentication Logic

In this part of the code, you will be writing functions and routes for user authentication and input validation.

To do that, you will complete a few tasks, which are:

Create a user model for your API
Create an Input validation for your API
Create an authentication controller and routes for your API
- Create a Registration logic
- Add a Registration route
- Create a Simple Login logic
- Add a Login route
- Add Session to Login logic

A controller is a logic that handles a particular task. The router receives a request and executes the controller logic associated with it.

Create a user model

First, you have to create your user model or schema. This schema defines a user profile that is stored in the database.

To create a schema,

Create a folder named "models" in your v1 folder
Inside the models' folder, create a file with the name "User.js"
Copy the following code into it,

File Path - v1/models/User.js

import mongoose from "mongoose";
import bcrypt from "bcrypt";

const UserSchema = new mongoose.Schema(
    {
        first_name: {
            type: String,
            required: "Your firstname is required",
            max: 25,
        },
        last_name: {
            type: String,
            required: "Your lastname is required",
            max: 25,
        },
        email: {
            type: String,
            required: "Your email is required",
            unique: true,
            lowercase: true,
            trim: true,
        },
        password: {
            type: String,
            required: "Your password is required",
            select: false,
            max: 25,
        },
        role: {
            type: String,
            required: true,
            default: "0x01",
        },
    },
    { timestamps: true }
);

UserSchema.pre("save", function (next) {
    const user = this;

    if (!user.isModified("password")) return next();
    bcrypt.genSalt(10, (err, salt) => {
        if (err) return next(err);

        bcrypt.hash(user.password, salt, (err, hash) => {
            if (err) return next(err);

            user.password = hash;
            next();
        });
    });
});

export default mongoose.model("users", UserSchema);

With this, you have a user model and a function that hashes the user’s password during registration or any modification before saving it into the database. You don't want to save plain passwords into the database. Note that, in the preceding code block, we have added a default role to every user that registers on the app. We will manually change a user to an admin by editing the role code later in this article.

Next, let's write a function to validate user inputs.

Create an Input validation

It is important to validate user input for any incorrect information or malicious attempts. To confirm that users supply the right information,

Create a folder named "middleware" inside your v1 folder. A middleware is a handler that has access to the request and response object. It can be used to modify requests or responses.
Create a "validate.js" file inside the middleware folder
Import validationResult from express-validator. The validationResult returns an array of errors, if any.
Write a function that validates the request object and returns an array of errors.

Your code should be similar to the following:

File Path - v1/middleware/validate.js

import { validationResult } from "express-validator";

const Validate = (req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
        let error = {};
        errors.array().map((err) => (error[err.param] = err.msg));
        return res.status(422).json({ error });
    }
    next();
};
export default Validate;

Create an authentication controller and routes

You will create authentication (auth) logic for both registration and login and routes for them.

Create a Registration logic

To create an auth logic that handles user registration, complete the following tasks,

Create a folder with the name "controllers" in your v1 folder
Create a file named "auth.js" inside the controllers folder
Import the User model
Write a Register function that accepts the request and response objects
Destructure the HTTP request body to get user-supplied information such as email, password, first name, last name, etc.
Inside a try-and-catch block, create a user instance with the request's body information
Check if the email supplied already exists in the database. If it exists, send back a message to the client notifying it of the error. Otherwise, save the new user into the database and send the appropriate server response.

Your code should be similar to the following,

File Path - v1/controllers/auth.js

import User from "../models/User.js";

/**
 * @route POST v1/auth/register
 * @desc Registers a user
 * @access Public
 */
export async function Register(req, res) {
    // get required variables from request body
    // using es6 object destructing
    const { first_name, last_name, email, password } = req.body;
    try {
        // create an instance of a user
        const newUser = new User({
            first_name,
            last_name,
            email,
            password,
        });
        // Check if user already exists
        const existingUser = await User.findOne({ email });
        if (existingUser)
            return res.status(400).json({
                status: "failed",
                data: [],
                message: "It seems you already have an account, please log in instead.",
            });
        const savedUser = await newUser.save(); // save new user into the database
        const { role, ...user_data } = savedUser._doc;
        res.status(200).json({
            status: "success",
            data: [user_data],
            message:
                "Thank you for registering with us. Your account has been successfully created.",
        });
    } catch (err) {
        res.status(500).json({
            status: "error",
            code: 500,
            data: [],
            message: "Internal Server Error",
        });
    }
    res.end();
}

So simple right? Yes, that’s it.

Head to your routes folder, you need to include a route for the authentication logic.

Add a Registration route

Inside your routes folder, create another file called "auth.js"
Import express module
Import the Register logic from "controllers/auth.js"
Import check function from express-validator
Import the Validate function from middleware
Write the register route with a POST method and a "/register" path. Note that since we want to get user input and save it into the database, we will use the POST method. Learn more about HTTP request methods. You may want to know the difference between POST and PUT method
Validate input using the check and Validate functions
Export router as the default

Compare your code with the following:

File Path - v1/routes/auth.js

import express from "express";
import { Register } from "../controllers/auth.js";
import Validate from "../middleware/validate.js";
import { check } from "express-validator";

const router = express.Router();

// Register route -- POST request
router.post(
    "/register",
    check("email")
        .isEmail()
        .withMessage("Enter a valid email address")
        .normalizeEmail(),
    check("first_name")
        .not()
        .isEmpty()
        .withMessage("You first name is required")
        .trim()
        .escape(),
    check("last_name")
        .not()
        .isEmpty()
        .withMessage("You last name is required")
        .trim()
        .escape(),
    check("password")
        .notEmpty()
        .isLength({ min: 8 })
        .withMessage("Must be at least 8 chars long"),
    Validate,
    Register
);

export default router;

Now, head to your routes folder one more time, and inside the index.js file, do the following,

Import the Auth route

import Auth from './auth.js';

Call the use() method on the app object and pass a defined route path

app.use('/v1/auth', Auth);

Send a POST request with email, first name, last name, and password to http://localhost:5005/v1/auth/register

Your API has successfully registered a user. If you don’t want to return the password, you could adjust your auth.js file (controller) like so,

File Path - v1/controllers/auth.js

...
const savedUser = await newUser.save(); // save new user into the database
    const { password, role, ...user_data } = savedUser; // Return user's details but password
    res.status(200).json({
      status: 'success',
      data: [user_data],
      message:
        'Thank you for registering with us. Your account has been successfully created.',
    });
...

Next, you will learn how to write the login logic for your app.

Create a Simple Login logic

To create an auth for user login, do the following,

Navigate to the "auth.js" file inside your controllers' folder
Import bcrypt package (this will be used to compare the user's supplied password on login to the one you have associated with the user's email in your database)
Write a function that first checks if the email from the request body can be found in your database. If not, return a message clearly stating the error. Otherwise, continue to validate the password, by comparing the password from the request body to the stored password. If the result is not valid, return an error accordingly, else, return a message telling the user, that the login was successful.

Now, compare your code with the following code block.

File Path - v1/controllers/auth.js

import bcrypt from "bcrypt";

/**
 * @route POST v1/auth/login
 * @desc logs in a user
 * @access Public
 */
export async function Login(req, res) {
    // Get variables for the login process
    const { email } = req.body;
    try {
        // Check if user exists
        const user = await User.findOne({ email }).select("+password");
        if (!user)
            return res.status(401).json({
                status: "failed",
                data: [],
                message:
                    "Invalid email or password. Please try again with the correct credentials.",
            });
        // if user exists
        // validate password
        const isPasswordValid = await bcrypt.compare(
            `${req.body.password}`,
            user.password
        );
        // if not valid, return unathorized response
        if (!isPasswordValid)
            return res.status(401).json({
                status: "failed",
                data: [],
                message:
                    "Invalid email or password. Please try again with the correct credentials.",
            });
        // return user info except password
        const { password, ...user_data } = user._doc;

        res.status(200).json({
            status: "success",
            data: [user_data],
            message: "You have successfully logged in.",
        });
    } catch (err) {
        res.status(500).json({
            status: "error",
            code: 500,
            data: [],
            message: "Internal Server Error",
        });
    }
    res.end();
}

By default, mongoose returns the user’s password anytime a query is made on that document, but I have disabled that inside the User.js model by using ‘select: false’. So that I only need to call for the password when I need it. In your login logic, you need the user’s password in your database to compare it with the password the user is attempting to log in with. If both are the same, you can say that you know that user and allow him in.

Create a Login route

Inside your routes’ auth.js file,

Import the Login function
Add a Login route

Compare your code:

File Path - v1/routes/auth.js

// Login route == POST request
router.post(
    "/login",
    check("email")
        .isEmail()
        .withMessage("Enter a valid email address")
        .normalizeEmail(),
    check("password").not().isEmpty(),
    Validate,
    Login
);

Send a POST request to http://localhost:5005/v1/auth/login

Add Session to Login logic

So far you can log users into your app. But wait, will you have to re-authenticate a user on every request? HTTP is stateless, so the server treats each request as a new one. To solve this, you have to look for a way to let the server know that a particular request is coming from the same client. Fortunately, the request headers come to the rescue. The request headers contain information about the client or resources being requested.

For each request, the request headers are sent to the server. You will find out that some headers persist with requests while others may not. We will use the cookie header for this guide. That means if you want the server to trust a client, you may use cookies.

Cookies can serve different purposes. They can be used for authentication. Cookies also allow you to specify the duration of the authentication.

In practice, you want to enable the server to provision a "Session" for a client. The session will contain an identity token and a duration (before the token is considered invalid). The server will always look out for this session in the request headers coming from the client at each request, if it is found and within the duration, it authenticates the client, otherwise, it rejects authentication.

For this article, our server will be using JSON Web Token (JWT) to provision identity tokens for clients. We will generate a token on every login and set it as a value for the cookie header.

Json Web Tokenss are an open, industry-standard RFC 7519 method for representing claims securely between two parties.

Now, to add a session to your login logic, follow these steps:

Create a secret key
Create a function to generate tokens at login
Add the generate-token function to the login logic

Create a secret key

The JWT technology allows you to generate, decode, and verify tokens. It digitally signs tokens so that they can be trusted. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA. You may learn more about JWTs here. JWT verifies a token by checking the signature.

To sign a token, create a unique secret key only known by your server. You may generate a random key using node. To do that,

Type node in your terminal, press the return key,
Type crypto.randomBytes(20).toString(‘hex’)

For me, I got something like,

Copy the value and paste it into your .env file as the value for SECRET_ACCESS_TOKEN

Create a function to generate tokens at login

To create a function to generate and sign tokens at login,

Go to your User model file (models/User.js)
Import JWT module
Import the secret key from the config file
Add a generate-token function after the pre-hook function

Examine the following code:

File Path - v1/models/User.js

...
import jwt from 'jsonwebtoken';
import { SECRET_ACCESS_TOKEN } from '../config/index.js';
...

...
UserSchema.methods.generateAccessJWT = function () {
  let payload = {
    id: this._id,
  };
  return jwt.sign(payload, SECRET_ACCESS_TOKEN, {
    expiresIn: '20m',
  });
};

We added a new function called "generateAccessJWT" to the UserSchema methods. The function signs the user ID with a secret key and generates a unique token which expires in 20 minutes.

Now you have to use the generateAccessJWT function (which is now one of the UserSchema methods) in the login function.

Add the generate-token function to the login logic

Once, a user provides an email and password, and the API confirms the details to be correct, we will then generate a unique token for that user, and send the token generated to the client.

Examine the following code:

File Path - v1/controllers/auth.js

/**
 * @route POST v1/auth/login
 * @desc logs in a user
 * @access Public
 */
export async function Login(req, res) {
    // Get variables for the login process
    const { email } = req.body;
    try {
        // Check if user exists
        const user = await User.findOne({ email }).select("+password");
        if (!user)
            return res.status(401).json({
                status: "failed",
                data: [],
                message: "Account does not exist",
            });
        // if user exists
        // validate password
        const isPasswordValid = await bcrypt.compare(
            `${req.body.password}`,
            user.password
        );
        // if not valid, return unathorized response
        if (!isPasswordValid)
            return res.status(401).json({
                status: "failed",
                data: [],
                message:
                    "Invalid email or password. Please try again with the correct credentials.",
            });

        let options = {
            maxAge: 20 * 60 * 1000, // would expire in 20minutes
            httpOnly: true, // The cookie is only accessible by the web server
            secure: true,
            sameSite: "None",
        };
        const token = user.generateAccessJWT(); // generate session token for user
        res.cookie("SessionID", token, options); // set the token to response header, so that the client sends it back on each subsequent request
        res.status(200).json({
            status: "success",
            message: "You have successfully logged in.",
        });
    } catch (err) {
        res.status(500).json({
            status: "error",
            code: 500,
            data: [],
            message: "Internal Server Error",
        });
    }
    res.end();
}

The same login function, only that we have added the ability to generate sessions once credentials are confirmed. Anytime a client successfully logs in, a new session is generated.

We now have an authentication system which verifies credentials and generates unique sessions.

Authorization Logic

Let’s implement a simple authorization flow. Remember, authorization is ensuring that a user can only do what we allow him to do on the app.

I have created another user, called Admin. I will manually upgrade his role to an admin (an admin will have the code 0x88 for his role), and as you may rightly guess, that is 136. You should use complex code for role assignment in production.

I am logged in as an admin,

Next, you want to add middleware functions to tell your API to verify the session and verify role or access.

To get started, create a file inside the middleware folder, and name it "verify.js". This file will be used to verify the session and role.

Verify Session

Your API will have to determine if a session is valid or not. For security purposes, it must do that on every request to a protected route.

To verify the user session,

Inside the verify.js file, import the User model,
Import JWT
Write the verify function
Create a user route
Add the verify middleware to the user route

Examine the following code:

import User from "../models/User.js";
import jwt from "jsonwebtoken";

export async function Verify(req, res, next) {
    try {
        const authHeader = req.headers["cookie"]; // get the session cookie from request header

        if (!authHeader) return res.sendStatus(401); // if there is no cookie from request header, send an unauthorized response.
        const cookie = authHeader.split("=")[1]; // If there is, split the cookie string to get the actual jwt

        // Verify using jwt to see if token has been tampered with or if it has expired.
        // that's like checking the integrity of the cookie
        jwt.verify(cookie, config.SECRET_ACCESS_TOKEN, async (err, decoded) => {
            if (err) {
                // if token has been altered or has expired, return an unauthorized error
                return res
                    .status(401)
                    .json({ message: "This session has expired. Please login" });
            }

            const { id } = decoded; // get user id from the decoded token
            const user = await User.findById(id); // find user by that `id`
            const { password, ...data } = user._doc; // return user object without the password
            req.user = data; // put the data object into req.user
            next();
        });
    } catch (err) {
        res.status(500).json({
            status: "error",
            code: 500,
            data: [],
            message: "Internal Server Error",
        });
    }
}

Next, create a user route and add the verify middleware to it.

Inside the index.js file (routes folder), add:

File Path - v1/routes/index.js

app.get("/v1/user", Verify, (req, res) => {
    res.status(200).json({
        status: "success",
        message: "Welcome to the your Dashboard!",
    });
});

To test this feature:

Send a GET request to /v1/user without or with an invalid cookie. You should see an unauthorized response. Why? The cookie is invalid or not present.

Log in using a valid user
Send a GET request to the user route (/v1/user).

If everything goes well, you should see a Welcome message.

Let's explain where we are now. We have written a login function that takes the user's credentials and checks against the database. It then generates a user session which is sent to the client as a cookie. The client includes that information on subsequent requests it sends to the server. The Verify middleware instructs the server to check the client's header for the authentication/authorization cookie, decode it, and assign a user object to the request object. If the verification middleware catches an error, the next middleware is not called.

Next, you want to add an admin route which only an admin can access.

To do that, first, create a verify role middleware,

File Path - v1/middleware/verify.js

export function VerifyRole(req, res, next) {
    try {
        const user = req.user; // we have access to the user object from the request
        const { role } = user; // extract the user role
        // check if user has no advance privileges
        // return an unathorized response
        if (role !== "0x88") {
            return res.status(401).json({
                status: "failed",
                message: "You are not authorized to view this page.",
            });
        }
        next(); // continue to the next middleware or function
    } catch (err) {
        res.status(500).json({
            status: "error",
            code: 500,
            data: [],
            message: "Internal Server Error",
        });
    }
}

Then inside your index.js file (routes' folder) add:

File Path - v1/routes/index.js

import { Verify, VerifyRole } from "../middleware/verify.js";

app.get("/v1/admin", Verify, VerifyRole, (req, res) => {
    res.status(200).json({
        status: "success",
        message: "Welcome to the Admin portal!",
    });
});

Notice, that the preceding code includes the Verify middleware, then the VerifyRole middleware. The API first verifies the user's session and returns a user object which is accessed by the req.user object. The VerifyRole middleware checks the user object to determine if the user is an admin or not. If a user is an admin, the admin portal is opened, else the user is not allowed to view the page.

To test this feature:

Log in using a user with low privilege access. (Remember users are assigned 0x01 by default as their role code)
Send a GET request to the admin route (v1/admin)

You got an unauthorized response.

Why? The cookie for a user with low privilege can’t access the admin portal.

Now, log in as an admin
Send a GET request to the admin route (v1/admin)

Logout logic

Finally, you may want to add a logout functionality. For that, you have two basic options. One is to blacklist the request cookie on logout, the other is to invalidate the cookie by sending an invalid cookie to the client. The latter is not advisable because if the previous cookie was kept somewhere before logout, it can still be used to log in. Here, you will be implementing the first.

Create another file inside the models' folder and name it "Blacklist.js", that is the document that will store any blacklisted token.

File Path - v1/models/Blacklist.js

import mongoose from "mongoose";
const BlacklistSchema = new mongoose.Schema(
    {
        token: {
            type: String,
            required: true,
            ref: "User",
        },
    },
    { timestamps: true }
);
export default mongoose.model("blacklist", BlacklistSchema);

So this is it - on logout, user’s session token will be blacklisted i.e. added to the blacklist document. Now, whenever the user comes back to access protected routes, your API first checks to see if his token is on the blacklist or not, if it is, he gets an unauthorized response and needs to be re-authenticated, otherwise he is allowed access. You could also look for a way to clear the cookie from the client.

Here is a simple code, add it to your auth.js file (controllers folder).

File Path - v1/controllers/auth.js

...
import Blacklist from '../models/Blacklist.js';
...
/**
 * @route POST /auth/logout
 * @desc Logout user
 * @access Public
 */
export async function Logout(req, res) {
  try {
    const authHeader = req.headers['cookie']; // get the session cookie from request header
    if (!authHeader) return res.sendStatus(204); // No content
    const cookie = authHeader.split('=')[1]; // If there is, split the cookie string to get the actual jwt token
    const accessToken = cookie.split(';')[0];
    const checkIfBlacklisted = await Blacklist.findOne({ token: accessToken }); // Check if that token is blacklisted
    // if true, send a no content response.
    if (checkIfBlacklisted) return res.sendStatus(204);
    // otherwise blacklist token
    const newBlacklist = new Blacklist({
      token: accessToken,
    });
    await newBlacklist.save();
    // Also clear request cookie on client
    res.setHeader('Clear-Site-Data', '"cookies"');
    res.status(200).json({ message: 'You are logged out!' });
  } catch (err) {
    res.status(500).json({
      status: 'error',
      message: 'Internal Server Error',
    });
  }
  res.end();
}

One more thing, in your verify function, check the cookie to determine if blacklisted or not. If blacklisted, ask the user to re-login, otherwise, call the next function.

Compare your code with the following:

export async function Verify(req, res, next) {
    const authHeader = req.headers["cookie"]; // get the session cookie from request header

    if (!authHeader) return res.sendStatus(401); // if there is no cookie from request header, send an unauthorized response.
    const cookie = authHeader.split("=")[1]; // If there is, split the cookie string to get the actual jwt token
    const accessToken = cookie.split(";")[0];
    const checkIfBlacklisted = await Blacklist.findOne({ token: accessToken }); // Check if that token is blacklisted
    // if true, send an unathorized message, asking for a re-authentication.
    if (checkIfBlacklisted)
        return res
            .status(401)
            .json({ message: "This session has expired. Please login" });
    // if token has not been blacklisted, verify with jwt to see if it has been tampered with or not.
    // that's like checking the integrity of the accessToken
    jwt.verify(accessToken, SECRET_ACCESS_TOKEN, async (err, decoded) => {
        if (err) {
            // if token has been altered, return a forbidden error
            return res
                .status(401)
                .json({ message: "This session has expired. Please login" });
        }

        const { id } = decoded; // get user id from the decoded token
        const user = await User.findById(id); // find user by that `id`
        const { password, ...data } = user._doc; // return user object but the password
        req.user = data; // put the data object into req.user
        next();
    });
}

Don’t forget to add the logout function to auth route, like so,

File Path - v1/routes/auth.js

...
// Logout route ==
router.get('/logout', Logout);

If you don't like seeing JWT in cookies, you can encrypt it or use express-session as an alternative to ordinary JWT.

Now, your API is able to authenticate and authorize users. Thank you for reading, and don’t forget to follow me for more.

Other link: https://mjosh.hashnode.dev/build-a-login-and-logout-api-using-expressjs-nodejs

DEV Community: Joshua O.

Zero-Friction AI Dev: Build and Deploy Chatbots with a Single Docker Compose File

Table of Contents

1. The Unspoken Challenge of the Agentic Era

2. The Model Problem Solved: Docker Model Runner and GPU Acceleration

3. Orchestration: The Single YAML File That Simplifies the Stack (PoC)

3.1. What We’re Building: The Private Q&A Bot

3.2. Project Structure

3.3. Step-by-Step Code

3.4. Ingestion

3.5. The Final Proof: One Command

3.6. Testing

4. The Security Imperative: Sandboxes and Isolation

5. Conclusion: The New Standard for AI Stack Orchestration

1. The Unspoken Challenge of the Agentic Era

Docker’s Mandate: Simplicity, Security, and Speed

The Proof: A Real-World RAG Pipeline

2. The Model Problem Solved: Docker Model Runner and GPU Acceleration

3. Orchestration: The Single YAML File That Simplifies the Stack (PoC)

3.1 What We’re Building: The Private Q&A Bot

Components

3.2 Project Structure

3.3 Step-by-Step Code

Step 1: The Python Dependencies (rag-app/requirements.txt)

Step 2: The Application Container (rag-app/Dockerfile)

Step 3: The Main Application File (main.py)

Step 4: The Orchestration Blueprint (docker-compose.yml)

3.4 Ingestion

3.5 The Final Proof: One Command

3.6 Testing

Step 1: Ingest the Private Document

Step 2: Query the System

4 The Security Imperative: Sandboxes and Isolation

5 Conclusion: The New Standard for AI Stack Orchestration

Next Step: Optional

HTML DOM and JavaScript

Content Overview

Introduction

The web browser

The HTML Document as an object

Javascript - a language for creating and manipulating web pages

Why understanding the DOM is important?

DOM - the standard for accessing web documents

Node and Element

Methods and Properties

Finding, creating, manipulating, styling, and removing elements in the document using HTML DOM methods and properties.

Conclusion

Build a Login and Logout API using Express.js (Node.js)

Table of contents

Introduction

The Concept of Authentication and Authorization

Setting up the development files, installing required packages, and creating a database.

Creating Main Route and API server instance

Create a Main route

Create a server instance for your API

Authentication Logic

Create a user model

Create an Input validation

Create an authentication controller and routes

Authorization Logic

Logout logic