Phase 5: Validating the Request Body (With Detailed Comments)

Understanding the Problem

In the previous phase, we implemented the core authentication routes for our application. However, these routes currently accept any data provided in the request body without validation. This can lead to several issues:

• Users might submit incomplete or invalid data.
• Malicious users could exploit vulnerabilities by sending unexpected data.
• Database operations might fail due to validation constraints.
• User experience suffers when errors occur without clear feedback.

To address these issues, we need to implement request body validation for our authentication routes, particularly for login and signup operations where user input is critical.

Think of validation as a security guard at the entrance of a building. The guard checks everyone's ID and ensures they meet certain criteria before letting them in. Similarly, validation middleware examines incoming requests and ensures they contain valid data before letting them reach our route handlers.

Planning the Solution

We'll use the express-validator package to validate request bodies in our application. This package provides middleware functions that check request data against specified rules and collect validation errors.

Our validation plan includes:

1. Installing the express-validator package
2. Creating a reusable validation error handler
3. Implementing login validation
4. Implementing signup validation
5. Testing both validations

For each validation implementation, we'll follow our feature-branch Git workflow to keep our code organized and easier to test.

Creating Validation Middleware

Setting Up the Feature Branch

Let's start by creating a new feature branch for the login validation:

git checkout dev                          # Switch to dev branch
git checkout -b validate-login-inputs     # Create new feature branch

Installing Dependencies

First, we need to install the express-validator package:

cd backend
npm install express-validator

Creating a Validation Utility

Now, let's create a utility file to handle validation errors. Create a new file at backend/utils/validation.js:

// backend/utils/validation.js
const { validationResult } = require('express-validator');   // Import from express-validator

// middleware for formatting errors from express-validator middleware
// (to customize, see express-validator's documentation)
const handleValidationErrors = (req, _res, next) => {
  const validationErrors = validationResult(req);            // Get validation errors from request

  if (!validationErrors.isEmpty()) {                         // Check if errors exist
    const errors = {};
    validationErrors
      .array()                                              // Convert errors to array
      .forEach(error => errors[error.path] = error.msg);    // Format errors as key-value pairs

    const err = Error("Bad request.");                       // Create error object
    err.errors = errors;                                     // Attach formatted errors
    err.status = 400;                                        // Set HTTP status code to 400 (Bad Request)
    err.title = "Bad request.";                              // Set error title
    next(err);                                               // Pass error to error-handling middleware
  }
  next();                                                    // Proceed if no errors
};

module.exports = {
  handleValidationErrors                                    // Export the middleware
};

This utility function does the following:

1. Uses validationResult to gather validation errors from previous middleware.
2. Checks if there are any validation errors.
3. If errors exist, it formats them into a user-friendly object where keys are field names and values are error messages.
4. Creates a standardized error object with a 400 status code (Bad Request).
5. Passes the error to the next error-handling middleware.
6. If no errors exist, it simply calls next() to proceed to the next middleware or route handler.

This pattern of separating the error-handling logic into a dedicated function follows the principle of separation of concerns, making our code more modular and easier to maintain.

[
  { 
    path: "email", 
    msg: "Please provide a valid email.", 
    location: "body" 
  },
  { 
    path: "password", 
    msg: "Password must be 6 characters or more.", 
    location: "body" 
  }
]

{
  "email": "Please provide a valid email.",
  "password": "Password must be 6 characters or more."
}

Implementing Login Validation

Creating Login Validation Middleware

Next, let's modify the backend/routes/api/session.js file to add validation for the login route:

// backend/routes/api/session.js
// ... existing imports
const { check } = require('express-validator');                    // Import check function
const { handleValidationErrors } = require('../../utils/validation');  // Import validation handler

// ... existing code

const validateLogin = [                                           // Create array of middleware
  check('credential')                                             // Validate credential field
    .exists({ checkFalsy: true })                                // Must exist and not be falsy
    .notEmpty()                                                  // Must not be empty
    .withMessage('Please provide a valid email or username.'),   // Error message
  check('password')                                              // Validate password field
    .exists({ checkFalsy: true })                                // Must exist and not be falsy
    .withMessage('Please provide a password.'),                  // Error message
  handleValidationErrors                                         // Process validation results
];

// Log in
router.post(
  '/',
  validateLogin,                                                // Apply validation middleware
  async (req, res, next) => {
    // ... existing login route handler
  }
);

// ... rest of the file

Let's break down the validation middleware we've created:

• The validateLogin array contains multiple middleware functions that will be executed in sequence.
• The check('credential') middleware validates the credential field:
  • exists({ checkFalsy: true }) ensures the field exists and is not falsy (empty string, null, etc.)
  • notEmpty() ensures the field is not an empty string
  • withMessage() specifies the error message to show if validation fails
• The check('password') middleware similarly validates the password field.
• Finally, handleValidationErrors collects any validation errors and formats them into a response.

This validation approach is similar to how form validation works in the real world. When you fill out a paper form, there might be requirements for each field (e.g., "must be filled in," "must be a valid email format"). If you submit the form without meeting these requirements, it gets returned to you with error messages. Our validation middleware functions in the same way, checking each field against requirements and returning errors if needed.

Testing Login Validation

Let's test our login validation to ensure it's working correctly. Start your server if it's not already running:

npm start

First, test with an empty credential:

fetch('/api/session', {
  method: 'POST',
  headers: {
    "Content-Type": "application/json",               // Specify JSON content type
    "XSRF-TOKEN": `<value of XSRF-TOKEN cookie>`      // Include CSRF token
  },
  body: JSON.stringify({ credential: '', password: 'password' })  // Empty credential
}).then(res => res.json()).then(data => console.log(data));

You should receive a "Bad request" error with a message about providing a valid email or username.

Next, test with an empty password:

fetch('/api/session', {
  method: 'POST',
  headers: {
    "Content-Type": "application/json",
    "XSRF-TOKEN": `<value of XSRF-TOKEN cookie>`
  },
  body: JSON.stringify({ credential: 'Demo-lition', password: '' })  // Empty password
}).then(res => res.json()).then(data => console.log(data));

You should receive a "Bad request" error with a message about providing a password.

{
  "title": "Bad request.",
  "message": "Bad request.",
  "errors": {
    "credential": "Please provide a valid email or username."
  },
  "stack": "..." // only in development mode
}

{
  "title": "Bad request.",
  "message": "Bad request.",
  "errors": {
    "password": "Please provide a password."
  },
  "stack": "..." // only in development mode
}

Committing and Merging the Login Validation Branch

Once you've confirmed that the login validation is working, commit your changes and merge them into the dev branch:

git add .                                                # Stage all changes
git commit -m "Add User input validation on user login backend endpoint"  # Commit with message
git checkout dev                                          # Switch to dev branch
git pull origin dev                                       # Pull latest changes (if collaborating)
git merge validate-login-inputs                           # Merge feature branch
git push origin dev                                       # Push to remote repository

Implementing Signup Validation

Setting Up the Feature Branch

Let's create a new feature branch for the signup validation:

git checkout dev
git checkout -b validate-signup-inputs

Creating Signup Validation Middleware

Now, let's modify the backend/routes/api/users.js file to add validation for the signup route:

// backend/routes/api/users.js
// ... existing imports
const { check } = require('express-validator');
const { handleValidationErrors } = require('../../utils/validation');

// ... existing code

const validateSignup = [
  check('email')
    .exists({ checkFalsy: true })                      // Email must exist and not be falsy
    .isEmail()                                         // Must be valid email format
    .withMessage('Please provide a valid email.'),
  check('username')
    .exists({ checkFalsy: true })                      // Username must exist and not be falsy
    .isLength({ min: 4 })                              // Must be at least 4 characters
    .withMessage('Please provide a username with at least 4 characters.'),
  check('username')
    .not()                                             // Username must NOT...
    .isEmail()                                         // ...be an email
    .withMessage('Username cannot be an email.'),
  check('password')
    .exists({ checkFalsy: true })                      // Password must exist and not be falsy
    .isLength({ min: 6 })                              // Must be at least 6 characters
    .withMessage('Password must be 6 characters or more.'),
  handleValidationErrors                               // Process validation results
];

// Sign up
router.post(
  '/',
  validateSignup,                                      // Apply validation middleware
  async (req, res) => {
    // ... existing signup route handler
  }
);

// ... rest of the file

Let's break down the validation middleware we've created for signup:

• The check('email') middleware:
  • Ensures the email exists and is not falsy
  • Validates that it's a properly formatted email address
• The first check('username') middleware:
  • Ensures the username exists and is not falsy
  • Validates that it's at least 4 characters long
• The second check('username') middleware:
  • Ensures the username is not an email address
  • This is a business rule specific to our application: we want usernames and emails to be distinct
• The check('password') middleware:
  • Ensures the password exists and is not falsy
  • Validates that it's at least 6 characters long for security

These validation rules represent best practices for user registration. For example, requiring a minimum password length helps ensure security, validating email formats helps ensure communications can be delivered, and preventing usernames from being emails helps maintain a clear distinction between these identifiers.

Testing Signup Validation

Let's test our signup validation to ensure it's working correctly:

Test with an empty password:

fetch('/api/users', {
  method: 'POST',
  headers: {
    "Content-Type": "application/json",
    "XSRF-TOKEN": `<value of XSRF-TOKEN cookie>`
  },
  body: JSON.stringify({
    email: 'firestar@spider.man',
    username: 'Firestar',
    password: ''                        // Empty password
  })
}).then(res => res.json()).then(data => console.log(data));

You should receive a "Bad request" error with a message about the password being too short.

Test with an invalid email format:

fetch('/api/users', {
  method: 'POST',
  headers: {
    "Content-Type": "application/json",
    "XSRF-TOKEN": `<value of XSRF-TOKEN cookie>`
  },
  body: JSON.stringify({
    email: 'not-an-email',              // Invalid email format
    username: 'Firestar',
    password: 'password'
  })
}).then(res => res.json()).then(data => console.log(data));

You should receive a "Bad request" error with a message about providing a valid email.

Test with a short username:

fetch('/api/users', {
  method: 'POST',
  headers: {
    "Content-Type": "application/json",
    "XSRF-TOKEN": `<value of XSRF-TOKEN cookie>`
  },
  body: JSON.stringify({
    email: 'firestar@spider.man',
    username: 'Fir',                    // Too short (less than 4 characters)
    password: 'password'
  })
}).then(res => res.json()).then(data => console.log(data));

You should receive a "Bad request" error with a message about providing a username with at least 4 characters.

Test with a username that's an email:

fetch('/api/users', {
  method: 'POST',
  headers: {
    "Content-Type": "application/json",
    "XSRF-TOKEN": `<value of XSRF-TOKEN cookie>`
  },
  body: JSON.stringify({
    email: 'firestar@spider.man',
    username: 'user@example.com',       // Username is an email format
    password: 'password'
  })
}).then(res => res.json()).then(data => console.log(data));

You should receive a "Bad request" error with a message about the username not being an email.

Committing and Merging the Signup Validation Branch

Once you've confirmed that the signup validation is working, commit your changes and merge them into the dev branch:

git add .
git commit -m "Add User input validation on user signup backend endpoint"
git checkout dev
git pull origin dev
git merge validate-signup-inputs
git push origin dev

Understanding Request Validation

The Importance of Validation

Request validation is a critical aspect of web application security and user experience. Here's why it matters:

1. Security: Validation helps prevent injection attacks and other security vulnerabilities by ensuring that inputs conform to expected formats.
2. Data Integrity: It ensures that the data stored in your database is consistent and valid, preventing corruption or inconsistencies.
3. User Experience: By validating inputs early and providing clear error messages, you help users understand and correct their mistakes quickly.
4. Server Efficiency: It's more efficient to validate inputs before performing database operations or complex processing.

Validation Layers

In a robust application, validation typically occurs at multiple layers:

1. Client-side validation: Provides immediate feedback to users and improves the user experience.
2. API validation: Ensures that all incoming requests meet your requirements, regardless of the client (which we've implemented in this phase).
3. Database constraints: Provides a final layer of protection for your data.

By implementing validation at each layer, you create a defense-in-depth approach that ensures data quality and security.

User submits form with password "123"
  ↓
1. Client-side validation: "Password must be at least 6 characters"
  ↓
User bypasses client validation and sends request directly to API
  ↓
2. API validation: Returns 400 Bad Request with error message
  ↓
Hacker attempts to modify database directly
  ↓
3. Database constraint: Column definition requires min length