DEV Community: Emmanuel Onyeyaforo

How to identify and fix memory leaks in react

Emmanuel Onyeyaforo — Tue, 11 Feb 2025 10:15:32 +0000

Introduction

Memory management is an important aspect of building performant applications, and in the context of React, it can be easy to overlook. A common issue that developers face is memory leaks, which can lead to sluggish performance, crashes, or even full application breakdowns.

What’s a Memory Leak?

Memory leaks occur when a program retains memory that is no longer necessary for its operation, causing an accumulation of unused memory. Over time, this results in increased memory consumption, which can severely degrade performance. In JavaScript applications, this problem often manifests when references to objects or variables are retained unnecessarily, preventing them from being garbage collected.

In React, memory leaks typically happen when components are unmounted, but some of their resources like event listeners, timers, or subscriptions remain active. As a result, these resources continue to hold onto memory, even though they are no longer needed.

Modern JavaScript engines use automatic garbage collection to reclaim memory from objects that are no longer in use. However, the garbage collector can only free memory that is unreachable. If objects are still referenced, such as when event listeners or timers remain active, the garbage collector will not release their memory, leading to a memory leak.

How to Identify Memory Leaks

Identifying memory leaks can be a bit of an uphill task. However, there are several signs we can always look out for:

Increasing Memory Consumption: If you observe that your application's memory usage continues to rise over time without being reclaimed, it's a clear indicator of a memory leak.
Performance Degradation: A growing memory footprint can lead to slower rendering, increased load times, and lagging interactions, particularly when rendering large lists or complex components.
Crashes or Freezes: Severe memory leaks can cause the browser to freeze or crash. If your application frequently becomes unresponsive, it’s a good idea to investigate for potential leaks.

In the sample code snippet below, the React component subscribes to a WebSocket to receive real-time data updates. When we forget to clean up the WebSocket connection when the component unmounts, causing a memory leak.

// Example: WebSocket leak
import { useEffect, useState } from 'react';

function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const socket = new WebSocket('ws://clothes-api.com/data/all');

    socket.onmessage = (event) => {
      setData(JSON.parse(event.data));
    };

    // Here we were supposed to add a cleanup function for the WebSocket connection but we didn't
  }, []);

  return <div>Data: {data}</div>;
}

This memory leak can be detected by tracking the heap size in DevTools or using the React Developer Tools to see if the component is unmounted but still holding onto memory. On inspection of the error we get on the devTool, we see this error:

Tools for Detecting Memory Leaks

Chrome DevTools: Chrome's built-in DevTools offer a variety of features to detect memory leaks, including heap snapshots, memory graphs, and garbage collection tracking.
React Developer Tools: This extension allows you to inspect the React component tree and monitor state changes. It helps you identify components that may not be properly cleaned up.

Techniques for Identifying Memory Leaks

There are several techniques and third-party packages we can identify memory leaks. The most common techniques include:

Heap Snapshots

Heap snapshots allow you to capture the state of memory usage at a particular point in time, compare different snapshots, and track which objects are holding onto memory unnecessarily.

To capture a heap snapshot in Chrome DevTools:

Open Chrome DevTools.
Navigate to the "Memory" tab.
Select "Heap snapshot" and click "Take snapshot."
Analyze the snapshot to detect objects that remain in memory between renders or after components are unmounted.

In the test conducted on a sample project, we observed significant memory spikes when the useEffect cleanup function was omitted. The discrepancy between the shallow and retained sizes provides a clear indication of how unused memory persists in the heap.

As components unmount without proper cleanup, the retained size continues to grow, highlighting memory that remains tied to the component, even though it should have been released.

Performance Monitoring

We can also use the Performance panel in Chrome DevTools to monitor your app’s performance over time. If you notice consistent increases in memory usage without a corresponding drop, your application is likely leaking memory.

Common Causes of Memory Leaks and Prevention

Several factors could cause memory leaks. Here are some of the most common ones:

Unmounted Components and Stale References

If we add event listeners in a component and fail to remove them when the component is unmounted, those listeners will continue to exist and consume memory.

Let's look at this snippet from our sample project, a component with an event listener that causes a memory leak when not cleaned up:

import { useEffect } from 'react';

const UnmountedComponentExample = () => {
  useEffect(() => {
    const handleClick = () => {
      console.log('Window clicked!');
    };

    // First, we we attach an event listener to the window
    window.addEventListener('click', handleClick);

    // No cleanup function (Memory leak occurs here)
  }, []);

  return <div>Click anywhere in the window</div>;
};

export default UnmountedComponentExample;

Fix: We can fix this by making sure the event listener is removed when the component unmounts:

import { useEffect } from 'react';

const CleanedUpComponentExample = () => {
  useEffect(() => {
    const handleClick = () => {
      console.log('Window clicked!');
    };

    window.addEventListener('click', handleClick);

    // Cleanup function to remove the listener on unmount
    return () => {
      window.removeEventListener('click', handleClick);
    };
  }, []);

  return <div>Click anywhere in the window</div>;
};

export default CleanedUpComponentExample;

Inefficient Use of State and Props

Holding large amounts of data in state or props without careful management can cause memory leaks, especially when the component no longer needs that data but fails to release it.

Here’s an example of inefficient state management where a growing array of images can cause memory to accumulate over time:

import { useState, useEffect } from 'react';

const InefficientStateExample = () => {
  const [images, setImages] = useState([]);

  const addImage = (newImage) => {
    setImages([...images, newImage]);
  };

  useEffect(() => {
    // Simulating an image being added on every render
    addImage('new-image.jpg');
  }, [images]);

  return (
    <div>
      <h2>Image Carousel</h2>
      {images.map((image, index) => (
        <img key={index} src={image} alt={`Image ${index}`} />
      ))}
    </div>
  );
};

export default InefficientStateExample;

Fix: Avoid unnecessary state updates and manage large states efficiently. For example, using a more appropriate data structure or limiting updates:

import { useState, useEffect } from 'react';

const EfficientStateExample = () => {
  const [images, setImages] = useState([]);

  const addImage = (newImage) => {
    // Only update state if the image is new
    setImages((prevImages) => [...prevImages, newImage]);
  };

  useEffect(() => {
    // Simulate image addition only once, avoiding infinite growth
    if (images.length === 0) {
      addImage('new-image.jpg');
    }
  }, [images]);

  return (
    <div>
      <h2>Image Carousel</h2>
      {images.map((image, index) => (
        <img key={index} src={image} alt={`Image ${index}`} />
      ))}
    </div>
  );
};

export default EfficientStateExample;

3. Improper Handling of Side Effects in `useEffect`

The useEffect hook is used to manage side effects like event listeners, data fetching, or subscriptions. If you don't clean up these side effects when the component unmounts, you can create memory leaks.

Here’s an example of improper handling of side effects, such as establishing a WebSocket connection without closing it when the component unmounts:

import { useEffect } from 'react';

const ImproperEffectHandlingExample = () => {
  useEffect(() => {
    const socket = new WebSocket('ws://example.com/socket');

    socket.onopen = () => {
      console.log('WebSocket connection opened');
    };

    socket.onmessage = (event) => {
      console.log('Message received:', event.data);
    };

    // No cleanup function (Memory leak occurs here)
  }, []);

  return <div>WebSocket Example</div>;
};

export default ImproperEffectHandlingExample;

Fix: Make sure to close the WebSocket connection when the component unmounts to avoid keeping it active unnecessarily:

import { useEffect } from 'react';

const ProperEffectHandlingExample = () => {
  useEffect(() => {
    const socket = new WebSocket('ws://example.com/socket');

    socket.onopen = () => {
      console.log('WebSocket connection opened');
    };

    socket.onmessage = (event) => {
      console.log('Message received:', event.data);
    };

    // Cleanup function to close WebSocket when the component unmounts
      //This fixes the code snippet featured in #How to Identify Memory Leaks.
    return () => {
      socket.close();
      console.log('WebSocket connection closed');
    };
  }, []);

  return <div>WebSocket Example</div>;
};

export default ProperEffectHandlingExample;

Other Methods to Prevent Memory Leaks

Away from the common ones, here are other ways to manage and prevent memory leaks:

Managing State and Lifecycle Properly

Components that store large amounts of data should clean up their state when they are no longer needed. You can use the useEffect hook’s cleanup function to reset the state when the component is unmounted.

In this case below, when the component unmounts, the state is reset to an empty array, preventing the data from unnecessarily occupying memory.

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('https://mocky.io/data/all');
      const json = await result.json();
      setData(json);
    };

    fetchData();

    return () => {
      setData([]); // Clean up state when component unmounts
    };
  }, []);

  return <div>{data.length > 0 ? "Data loaded" : "Loading..."}</div>;
};

Proper Cleanup of Event Listeners and Timers

Always remember to remove event listeners and clear timers when they are no longer needed. In the code snippet below, we attach a scroll event listener and manage a timer. Without putting in this measure, we run into an infinite loop which in turn causes a memory leak.

useEffect(() => {
  const handleScroll = () => {
    console.log('User is scrolling');
  };

  window.addEventListener('scroll', handleScroll);

  const timerId = setTimeout(() => {
    console.log('Timer finished');
  }, 1000);

  // Cleanup both the event listener and the timer
  return () => {
    window.removeEventListener('scroll', handleScroll);
    clearTimeout(timerId);
  };
}, []);

const memoizedCallback = useCallback(() => {
  performClearOperation();
}, []);

Advanced Techniques for Memory Management

In addition to basic practices like cleaning up event listeners and timers, advanced techniques can significantly improve memory management and performance in React applications. Here are some strategies we can apply:

Using `useRef` and `useCallback` Hooks to Prevent Unnecessary Re-renders

useRef for Persistent References Without Re-renders

useRef is a hook that allows you to store mutable values that persist across renders without triggering a re-render.

In the example below, the timerRef reference persists across renders, and the clearInterval method is called when the component unmounts, preventing a memory leak by cleaning up the timer.

Example with useRef:

import { useRef, useEffect } from 'react';

function TimerComponent() {
  const timerRef = useRef(null);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      console.log('Timer running');
    }, 1000);

    // We perform a cleanup function to avoid memory leaks
    return () => {
      clearInterval(timerRef.current);
    };
  }, []);

  return <div>Check the console for timer logs.</div>;
}

useCallback to Prevent Function Re-creations

useCallback helps memoize functions, so they are only re-created when one of their dependencies changes. This reduces the chance of memory leaks by preventing functions from being unnecessarily re-created.

In the example below, without useCallback, every render of GetCount would result in a new increment function being passed to CountComponent, causing unnecessary re-renders.

Example with useCallback:

import { useState, useCallback } from 'react';

function GetCount() {
  const [count, setCount] = useState(0);

  // Memoize the increment function so it's not recreated on each render
  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return <CountComponent onClick={increment} />;
}

function CountComponent({ onClick }) {
  return <button onClick={onClick}>Increment</button>;
}

`useMemo` to Optimize Performance and Memory Usage

useMemo memoizes the result of a calculation and only recalculates it when one of its dependencies changes. This prevents React from recalculating the value on every render, which can lead to performance degradation and memory issues.

In the example below, useMemo ensures that getTotalSumCalculation is only recalculated when num changes. This optimization improves performance and prevents memory issues by avoiding unnecessary recalculations.

import { useMemo } from 'react';

function GetTotalSum({ num }) {
  const getTotalSumCalculation = (n) => {
    console.log('Calculating...');
    return n * 1000;
  };

  // Memoize the result of the expensive calculation
  const result = useMemo(() => getTotalSumCalculation(num), [num]);

  return <div>Result: {result}</div>;
}

export default GetTotalSum

Creating Custom Hooks to Handle Repetitive Cleanup Tasks

Custom hooks are particularly helpful when working with resources that need consistent cleanup, such as event listeners, timers, or WebSockets. If several components in our app use setTimeout or setInterval, creating a custom hook to handle these timers ensures consistent cleanup and reduces the risk of memory leaks:

import { useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id); // Cleanup on unmount
    }
  }, [delay]);
}

// Usage in a component
function TimerComponent() {
  useInterval(() => {
    console.log('Interval tick');
  }, 1000);

  return <div>Check the console for interval ticks.</div>;
}

Conclusion

Memory leak detection and prevention are important in our day-to-day app development. By understanding these practices and leveraging modern tools, we can effectively identify and prevent memory leaks in your React applications, ensuring a smoother, more efficient user experience.

For more information, refer to the React documentation and review other additional resources on Stackoverflow with similar problems and opinions.

Handling React OTP Input Auth Web | React Native using react-otp-kit package

Emmanuel Onyeyaforo — Tue, 21 May 2024 09:14:29 +0000

A lightweight and fully customizable component designed to simplify the implementation of OTP (One-Time Password) input fields in React applications for desktop and mobile.

To install the latest stable version, run:

npm install --save react-otp-kit

Live Demo & Docs
Npm

Guide to Setting Up Prettier, Airbnb ESLint, and Husky for Your Next Project

Emmanuel Onyeyaforo — Thu, 25 Jan 2024 12:41:00 +0000

Introduction

Starting a new project? Readable code with good architecture is essential for ensuring a consistent and clean codebase. In this quick guide, we'll set up three tools – Airbnb ESLint, Prettier, and Husky – a powerful trio that enhances your development workflow and helps maintain code quality.

Configuring Prettier

Prettier is a code formatter that takes the hassle out of maintaining a consistent code style. Its opinionated approach ensures that code looks clean by automatically formatting it according to a predefined set of rules.
Here are steps to setting up ESLint for your project and Airbnb configuration for your next project.

Installation

Download the Prettier extension for VSCode.
Install prettier with the command below.

npm install --save-dev prettier

Next, we install the following:
- eslint-config-prettier - This is to disable formatting for ESLint
- eslint-plugin-prettier - This allows ESLint to show formatting errors

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Now, create a Prettier configuration file - .prettierrc.json or prettier.config.js to specify formatting rules. Prettier Config File contains all the necessary information for selecting various configuration keys and values.

//.prettierrc.json
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto",
  "printWidth": 80,
  "arrowParens": "avoid",
  "proseWrap": "always",
  "htmlWhitespaceSensitivity": "strict",
  "jsxBracketSameLine": false,
  "bracketSpacing": true,
  "insertPragma": false,
  "requirePragma": false,
  "quoteProps": "as-needed",
  "trailingComma": "none",
  "eslintIntegration": true,
  "parser": "babel",
  "jsxSingleQuote": false,
  "vueIndentScriptAndStyle": false,
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true
}

The final step here is to ensure Prettier formats on save. Insert editor.formatOnSave: true into the user settings in VSCode, so Prettier formats the file before saving.

Setting Up ESLint

ESLint stands out as a guardian of code quality, offering a set of rules to keep the codebase in top shape. It is a pluggable linting utility that aids developers in identifying and rectifying potential errors, enforcing a consistent coding style, and promoting maintainability across projects.

Here are steps to setting up ESLint for your project and Airbnb configuration for your next project.

Installation
- Download the ESLint extension for VSCode.
- Install eslint with the command below - It's worth noting that in frameworks like React and VueJS, eslint comes as default.
```
npm install eslint --save-dev
```
- Next, install Airbnb Config and its dependencies
```
npx install-peerdeps --dev eslint-config-airbnb
```
- Now, create an ESLint configuration file - .eslintrc.json or .eslintrc.js if one wasn't autogenerated. Extend the Airbnb configuration and Prettier we installed. Adjust the rules to match your team's coding standards and preferences.

   {
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],
  "parserOptions": {
      "project": "./tsconfig.json"
  },
  "rules": {
      //We can specify more rules that we need here
    "prettier/prettier": ["error"],
    "import/extensions": ["error", "ignorePackages", { "js": "never", "jsx": "never", "ts": "never", "tsx": "never" }]
  }
    }

Implementing Husky for Git Hooks

Husky is a Git hook manager that simplifies the integration of hooks into your project. It ensures that defined tasks, such as code linting and formatting, are executed before certain Git events, like commits.

Having know what Husky is -- Git hooks are scripts triggered at specific points in Git's workflow. They allow developers to automate tasks and enforce consistent processes.

Here are steps to setting up Husky for your project and Airbnb configuration for your next project.

Installation
- Install Husky with the command below.
```
npm install --save-dev husky
```
- Next we update the package.json file to include Husky configuration, specifying tasks to be executed before commits. We can also add other forms of task for Husky to perform before we commit like npm test if we have test file in the project.

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

With Husky in place, your project gains an automated guardrail, preventing code inconsistencies from slipping into your version control history.

Troubleshooting and Customization

Some common issues that may arise during the setup of Airbnb ESLint, Prettier, and Husky includes:

Dependency Conflicts:

Issue: Conflicts between versions of ESLint, Prettier, or other dependencies.
Solution: Carefully manage versions in your package.json file, ensuring compatibility among packages.

Configuration Errors:

Issue: Incorrect ESLint or Prettier configuration leading to unexpected behavior.
Solution: Double-check configuration files for syntax errors and ensure alignment with project requirements.

All Configs Not Working

Issue: Even after following all the steps above nothing seems to work?
Solution: Restart your server and ultimate close and re-open your project folder on your editor

Conclusion

With these tools in place, you've established a foundation for clean code and an efficient workflow architecture. Remember to use them, regularly check your code, and keep iterating to enhance its quality.

Hosting a React/Vue Application on cPanel with GitHub Actions CI/CD

Emmanuel Onyeyaforo — Tue, 03 Oct 2023 19:38:34 +0000

Introduction

In this short article, we’ll explore the seamless integration of hosting React or Vue.js applications on cPanel using GitHub Actions for efficient Continuous Integration and Continuous Deployment (CI/CD) in five (5) major steps.

Learn how to automate the deployment process, ensuring your web applications are always up-to-date and readily accessible to users.

Step 1 - Domain and Hosting Plan Purchase

Be sure to have purchased your hosting plan and domain name from hosting platforms like Whogohost, Namecheap etc. and login to cPanel.

Step 2 - GitHub workflows setup

In your ready-to-be-deployed React or Vue app, create a .github/workflows folder and add master.yaml or main.yaml depending on the default branch you have on your project repository.

Step 3 - YAML file Config

In the master.yaml file created above, paste the following configuration:



name: Deploy to cPanel

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x]

    steps:
      - name: Checkout Code 🚚
        uses: actions/checkout@v3

      - name: Install Dependencies 📦
        run: npm install

      - name: Build React App / Vue App (depending on user app) 🏗️
        run: npm run build

      - name: Upload to cPanel 📂
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: /public_html/
          exclude: |
            **/.git**
            **/.git*/**
            **/node_modules/**
            **/.**

Here is a Breakdown of the config above:

File Header:
- name: Deploy to cPanel: This is just a title for the workflow. It's a description of what this automated process does.
Event Trigger:
- on:: This section defines when this workflow should run.
- push:: It runs when there is a push event (a code change) in the repository.
- branches:: Specifies which branch should trigger this workflow. In this case, it's set to only run when changes are pushed to the master branch.
Job Configuration:
- jobs:: This section defines the jobs to be executed as part of the workflow.
- deploy:: It's the name of the job, you can think of it as a task within the workflow.
- runs-on: ubuntu-latest: This job will run on a virtual machine running the latest version of Ubuntu.
Matrix Strategy:
- strategy:: Here, you configure a strategy for running the job in different environments.
- matrix:: This allows you to run the job with different versions of Node.js. In this case, it's configured to run with Node.js versions 14.x, 16.x, and 18.x.
Step in the Job:
- steps:: This section lists the individual steps that should be executed within the job.
Checkout Code 🚚:
- name: Checkout Code 🚚: This is just a label for the step, describing what it does.
- uses: actions/checkout@v3: This step uses a pre-built GitHub Action called actions/checkout@v3 to fetch the latest code from the repository.
Install Dependencies 📦:
- name: Install Dependencies 📦: Another labeled step.
- run: npm install: It runs the command to install Node.js dependencies.
Build React App 🏗️:
- name: Build React App 🏗️: Another labeled step.
- run: npm run build: This step builds a React web application.
Upload to cPanel 📂:
- name: Upload to cPanel 📂: Labeled step.

uses: SamKirkland/FTP-Deploy-Action@v4.3.4: This step uses a GitHub Action called SamKirkland/FTP-Deploy-Action to deploy the code.
- with:: Here, it specifies configuration options for the deployment, including the FTP server details, server directory, and files to exclude during the upload.
- server: secrets.FTP_SERVER: This is using a secret named FTP_SERVER. It's likely storing the FTP server address or hostname (eg:https://emmanuel.com). This way, you're not exposing the actual server address in your workflow file, which is a security best practice.
- username: secrets.FTP_USERNAME: This uses another secret named FTP_USERNAME to store the FTP username or login (your cPanel username in this case).
- password: secrets.FTP_PASSWORD: Similarly, this uses a secret named FTP_PASSWORD to store the FTP password (your cPanel password in this case). By using secrets, you ensure that sensitive information is not exposed in the workflow file, keeping your credentials secure.

Head over to your project repository and set up the FTP server name, username, and password by clicking on setting. Under the security list click on Secrets and variables >> New repository secrets to add.

In summary, this YAML file sets up an automated workflow that triggers when changes are pushed to the master branch of a GitHub repository. It checks out the code, installs dependencies, builds a React app, and then deploys it to a cPanel server via FTP using a specific GitHub Action. This workflow is designed to automate the process of deploying a web application to a cPanel hosting environment.

Step 4 - Deploymemt and cPanel file manager setup

After the yaml file is set, Next is to build your project locally and then push to Github. Header over to Actions option on GitHub and observe your the build stages to ensure all jobs were completed successfully.

Next, head over to your logged-in cPanel, click on file manager to expose the folder, and observe if your work folders are complete and in order.
Next, copy the index.html in your distfolder to the public_html folder and refresh your domain name on the web browser
Congratulation! Your website is live at this stage.

Step 5 - Debugging and .htaccess file config

If your website is only a single page without external links or routes then you are good to go, if not you might observe that when you click on a route and try to refresh the page, a 404 screen pops up like below:

This is where the .htcaccess file comes in.

What is an .htaccess file?

An .htaccess file, short for "hypertext access," is a configuration file used on web servers, particularly Apache servers. It allows you to configure various server settings and behaviors for specific directories or the entire website. .htaccess files are commonly used for tasks like URL rewriting, access control, and setting custom error pages.

Now that we know what an .htaccess file is, there in the file manager, we click on show hidden files and on the top left add a new file. This time we create an .htaccess file and paste in the following:



/* <IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
 </IfModule> */

Here is a breakdown of the file:

: This is the start of an block. It's used to conditionally execute the contained directives only if the mod_rewrite module is available and enabled on the server. mod_rewrite is a powerful Apache module used for URL rewriting and redirection.

RewriteEngine On: This directive enables the mod_rewrite engine, allowing the server to process URL rewriting rules.

RewriteBase /: This sets the base URL path for relative substitution in the subsequent RewriteRule directives. In this case, it's set to the root directory of the website.

RewriteRule ^index.html$ - [L]: This RewriteRule is used to rewrite URLs. It's configured to match requests for index.html exactly and doesn't perform any actual rewriting. The - (dash) means no substitution, and [L] specifies that this is the last rule to be processed if matched.

RewriteCond %{REQUEST_FILENAME} !-f: This RewriteCond directive is a condition that checks if the requested filename does not exist as a regular file (!-f condition).

RewriteCond %{REQUEST_FILENAME} !-d: This RewriteCond directive is another condition that checks if the requested filename does not exist as a directory (!-d condition).

RewriteRule . /index.html [L]: If the conditions in the previous two lines are met (the requested file doesn't exist as a regular file or directory), this RewriteRule is applied. It rewrites the request to index.html, effectively directing all requests to the index.html file. [L] specifies that this is the last rule to be processed if matched.

: This is the closing tag for the block, indicating the end of the conditional section.

In summary, this .htaccess file is often used in the context of single-page applications (SPAs) or front-end frameworks where the server is configured to route all requests to a single HTML file (in this case, index.html). If a requested file doesn't exist or is not a directory, it redirects the request to the index.html file, effectively allowing client-side routing to handle the request. However, please note that the use of /* as comment delimiters is unconventional in .htaccess files, and it's generally recommended to use # for comments.

So there we have it, the deployed website is configured and functioning properly while the GitHub Action CI/CD is ready to take on subsequent deployments automatically.

How to setup Two Factor Authentication(2FA) in Node.js without third-party applications

Emmanuel Onyeyaforo — Thu, 25 May 2023 11:25:25 +0000

Introduction

In today's interconnected world, the internet plays a vital role in our daily lives. While it offers convenience, vast wealth, and access to information, it also poses significant security risks which if not taken care of can double down on the cons rather than the pros.

This article will delve into how to set up 2FA for your Node.js applications without third-party applications, equipping devs with knowledge and strategies to protect applications with the aid of 2FA in the digital realm.

What is Two Factor Authentication(2FA)?

Two-Factor Authentication (2FA), also known as 2-step verification, is a security method used to enhance the protection of online accounts and systems of applications. It adds an extra layer of security by prompting users to provide two different types of credentials to verify their identity.

This means that in addition to a password, users must provide another form of authentication. By demanding both factors during the authentication process, even if an attacker obtains a user's password, they would still need access to the second factor in order to gain unauthorized entry to the account.

The second factor can be in the form of shortcodes called One-Time Passwords (OTPs) delivered via email or phone number. This implementation significantly increases security and poses a more significant challenge for malicious individuals attempting to compromise accounts through methods such as phishing, password theft, or brute-force attacks.

Prerequisites

Before we proceed, you should have a code editor and a basic understanding of Node.js and its package manager, npm.
If you don't have Node.js installed, you can follow the official installation guide for your operating system:

~ Node.js Installation Guide

Basic knowledge of express.js, mongoose, and any database management system is also required. For the sake of this article, we will be using MongoDB.

Setting Up the Project

Step 1 - Create a Node.js Application

To get started with our app in Node.js, you'll first need to create a Node.js application. Begin by creating a fresh directory for your application, which you can name "node-with-2FA" or any preferred name. Next, open your terminal and type in the following command to create the directory:

mkdir node-with-2FA

Next, navigate to the newly created directory using the following command:

cd node-with-2FA

Once you're in the node-with-2FA directory, run the following command to create a new Node.js project using the Node Package Manager (NPM):

npm init

When you run this command, you will be prompted with several questions regarding your project, including its name, version, and description. You have the option to either stick with the default values or modify them according to your preferences.

Once your Node.js project is created, proceed to create a new file named server.js within the main directory of your project and install the needed dependencies which include dotenv, express, mongoose, bcrypt and cors. This is what this file would look like:

require('dotenv').config({ path: "./config.env" });
const express = require('express');
const connectDB = require('./config/db');
const errorHandler = require('./middlewares/error')
const cors = require('cors')

// Connect DB
connectDB();
const app = express();
app.use(express.json());

// authentication routes
app.use('/auth', require('./routes/auth'));

// user routes
app.use('/user, require('./routes/user));

app.get("/", (req, res) =>
  res.json({ success: true, message: "node-with-2FA running!" })
);


app.use(errorHandler);

const PORT = process.env.PORT || 4000
const server = app.listen(PORT, () => console.log(`Server is listening on port ${PORT}`));

process.on("unhandledRejections", (err, promise) => {
  console.log(`Logged Error: ${err}`);
  server.close(() => process.exit(1));
});

Step 2 - Creation and adding other required folders and files

In the node-with-2FA base folder, open your terminal and type in the following command to create other needed directories:

mkdir models middlewares controllers

In our mode directory or folder, we create a file named userModel.js. Here is what the file would look like:

const crypto = require("crypto")
const mongoose = require('mongoose');
const bcrypt = require("bcryptjs")
const jwt = require("jsonwebtoken")


const UserSchema = new mongoose.Schema({
    username: { type: String, required: 
              [true, "Please provide a username"], trim: true 
              },
    email: {
        type: String, required: [true, "Please provide an email"],
        unique: true,
        Match: [ //regex for email here,
            "Please provide a valid email"
        ]
    },
    two_fa_status: { type: String, default: 'off' },
    OTP_code: { type: String, default: null },
    password: {
        type: String,
        required: [true, "Please add a password"],
        minlength: 6, select: false
    },
},
    { timestamps: true }
);

UserSchema.pre("save", async function (next) {
 if (!this.isModified("password")) {
        next();
    }
    const salt = await bcrypt.genSalt(10);
    this.password = await bcrypt.hash(this.password, salt);
    next();
});

UserSchema.methods.getSignedToken = function () {
    return jwt.sign({ id: this._id }, process.env.JWT_SECRET, { expiresIn: process.env.JWT_EXPIRESIN })
}

UserSchema.methods.matchPasswords = async function (password) {
    return await bcrypt.compare(password, this.password);
}

const User = mongoose.model("user", UserSchema)

module.exports = User

Note: The JWT_SECRET and JWT_EXPIRESIN should be tucked away in your .env file on the root of your folder.
bcrypt here is used to encrypt the user's password.

Next in our models folder, we create an otp.js file which will look like this:

const mongoose = require("mongoose");
const Schema = mongoose.Schema;


const otpSchema = new Schema({
    userId: {
        type: Schema.Types.ObjectId,
        required: true,
        ref: "user",
        index:true,
unique:true,
sparse:true
    },
    otp: { type: String, required: true },
    createdAt: { type: Date, default: Date.now, expires: 3600 },
});


module.exports = mongoose.model("otp", otpSchema);

Step 4 - Setting up middleware(s):

Next, we set up a middleware to protect user endpoints where authorization is required.

Within the middlewares folder create a file named auth.js which would look like this code block below:

const jwt = require("jsonwebtoken");
const User = require('../models/user');
const ErrorResponse = require('../utils/errorResponse'); //from your already setup error responses.

exports.protect = async (req, res, next) => {
    let token;
    if(
        req.headers.authorization &&
        req.headers.authorization.startsWith("Bearer")
        ) {
        token = req.headers.authorization.split(" ")[1]
    }

    if(!token) {
        return next(new ErrorResponse("Not authorized to access this route", 401));
    }


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


        const user = await User.findById(decoded.id);


        if(!user) {
            return next(new ErrorResponse("No user found with this id", 404));
        }


        req.user = user;


        next();
   } catch (error) {
        return next(new ErrorResponse("Not authorized to access this route", 401));
    }

Step 5 - Setting up app routes

We mkdir routes on the root folder and add two files (auth.routes.js and user.routes.js). This will contain all our app routes for authentication and user access respectively.

//auth.routes.js
router.route("/login").post(login)
router.route("/resend-otp/:id").post(resendOTP)
router.route("/verify2FA/:id").post(verifyOTP)

//user.routes.js
router.route('/user').get(protect, getUser);
router.route("/activate2FA/:id").post(protect, activate2FA)
router.route("/deactivate2FA/:id").post(protect, deactivate2FA)

Step 6 - Setting up Controllers:

Here in the controllers, we can write app logic and functionalities on how we want the application to behave as well as route precursors.

Next, Create a file auth.controllers.js where we can add the SignUp, Login, OTP requests and verification logics as below. Since our logics' core is centered on the login and OTPs, we would omit the SignUp section.

In Login logic, Users would receive a prompt in their email bearing the OTP code which has a limited validity time, this is sent via an email transport (or mobile number depending on the transport one chooses) such as nodemailer to the registered user’s inbox if their 2FA status is switched on, thus providing us with that extra layer of security users need in our applications.

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

    if (!email || !password) {
        return next(new ErrorResponse('Please provide an email and password', 400))
    }

    try {
        const user = await User.findOne({ email }).select("+password")

        if (!user) {
            return next(new ErrorResponse('Invalid Credentials', 401))
        }

        const isMatch = await user.matchPasswords(password);

        if (!isMatch) {
            return next(new ErrorResponse('Invalid Credentials', 401))
        }

        if (user.two_fa_status) {

            const otp = await new OTP({
                userId: user._id,
                otp: generateCode()
            }).save();

            user.OTP_code = otp.otp
            await user.save();

            await sendEmail({
                to: user.email,
                subject: "One-Time Login Access",
                text:otpMessage(otp, user)
            });

            await otp.remove();

            return res.json({ otp: otp.otp, success: false, otpStatus: user.two_fa_status, id: user._id })
        }

        sendToken(user, 200, res);

    } catch (error) {
        next(error)
    }
};


//OTP verification
On OTP verification, when a user provides the received OTP which matches with OTP_code on the database, OTP verification is successful else an error would be thrown.


exports.verifyOTP = async (req, res, next) => {
    const user = await User.findById(req.params.id);
    const { otp } = req.body


    try {
        if (!user) return res.status(400).send({ message: "invalid user" });

        const lastUpdatedTime = new Date(user.updatedAt);
        lastUpdatedTime.setMinutes(lastUpdatedTime.getMinutes() + 5);
        const currentTime = (new Date(Date.now()))

        if (lastUpdatedTime <= currentTime) {
            console.log('yes')
            user.OTP_code = null
            await user.save();
        }

        if (otp !== user.OTP_code) {
            return next(new ErrorResponse('invalid token, please try again', 400))
        }


        user.OTP_code = null
        await user.save();
        return sendToken(user, 200, res);


    } catch (error) {
        return next(new ErrorResponse('Internal Server', 500))

    }
};


//Resending OTP
Resending OTP function is prompted, when a user did not receive the code or the code has expired.

exports.resendOTP = async (req, res, next) => {
    const { id } = req.params
    const user = await User.findById(`${id}`);

    try {
        if (user.two_fa_status === 'on') {


            const otp = await new OTP({
                userId: user,
                otp: generateCode()
            }).save();

            user.OTP_code = otp.otp
            await user.save();

            await sendEmail({
                to: user.email,
                subject: "One-Time Login Access",
                text:otpMessage(otp, user)
            });

            await otp.remove();

            return res.json({ message: 'one-time login has been sent your email', otpStatus: user.two_fa_status, })
        }
        return res.json(user)


    } catch (error) {
        next(error)
    }
};

Step 7 - Toggling 2FA Status:

Here lies the toggle trigger to activate or deactivate 2FA mode when a user is logged into the app.

exports.activate2FA = async (req, res, next) => {
    const { password } = req.body;
    const { id } = req.params;

    try {
        const user = await User.findById({ _id: id }).select('+password');

        if (!user) {
            return next(new ErrorResponse("User not found", 400))
        }

        const isMatch = await user.matchPasswords(password);
        if (!isMatch) {
            return next(new ErrorResponse("Incorrect password", 400))
        }
        user.two_fa_status = "on"
        await user.save();


        return res.json({ status: user.two_fa_status, message: '2FA activation was successful' });


    } catch (error) {
        next(error)
    }
};


exports.deactivate2FA = async (req, res, next) => {
    const { password } = req.body;
    const { id } = req.params;


    try {
        const user = await User.findById({ _id: id }).select('+password');

        if (!user) {
            return next(new ErrorResponse("User not found", 400))
        }

        const isMatch = await user.matchPasswords(password);
        if (!isMatch) {
            return next(new ErrorResponse("incorrect password", 400))
        }
        user.two_fa_status = "off"
        await user.save();

        return res.json({ status: user.two_fa_status, message: '2FA de-activation was successful' });

    } catch (error) {
        next(error)
    }
};

Conclusion

In addition to securing our web and mobile apps, 2FA is widely recommended and supported by many online services, including email providers, social media platforms, financial institutions, and more. It is a crucial security measure that helps protect sensitive information and prevents unauthorized access to personal accounts. It is highly recommended to enable 2FA wherever it is available to enhance the security of your online presence. The repo to the snippets can be accessed here. To see these code snippets in action, click here.

DEV Community: Emmanuel Onyeyaforo

How to identify and fix memory leaks in react

Introduction

What’s a Memory Leak?

How to Identify Memory Leaks

Tools for Detecting Memory Leaks

Techniques for Identifying Memory Leaks

Common Causes of Memory Leaks and Prevention

Unmounted Components and Stale References

Inefficient Use of State and Props

3. Improper Handling of Side Effects in useEffect

Other Methods to Prevent Memory Leaks

Advanced Techniques for Memory Management

Using useRef and useCallback Hooks to Prevent Unnecessary Re-renders

useMemo to Optimize Performance and Memory Usage

Creating Custom Hooks to Handle Repetitive Cleanup Tasks

Conclusion

Handling React OTP Input Auth Web | React Native using react-otp-kit package

Guide to Setting Up Prettier, Airbnb ESLint, and Husky for Your Next Project

Introduction

Configuring Prettier

Setting Up ESLint

Implementing Husky for Git Hooks

Troubleshooting and Customization

Dependency Conflicts:

Configuration Errors:

All Configs Not Working

Conclusion

Hosting a React/Vue Application on cPanel with GitHub Actions CI/CD

Introduction

Step 1 - Domain and Hosting Plan Purchase

Step 2 - GitHub workflows setup

Step 3 - YAML file Config

Step 4 - Deploymemt and cPanel file manager setup

Step 5 - Debugging and .htaccess file config

What is an .htaccess file?

How to setup Two Factor Authentication(2FA) in Node.js without third-party applications

Introduction

What is Two Factor Authentication(2FA)?

Prerequisites

Setting Up the Project

Step 1 - Create a Node.js Application

Step 2 - Creation and adding other required folders and files

Step 4 - Setting up middleware(s):

Step 5 - Setting up app routes

Step 6 - Setting up Controllers:

Step 7 - Toggling 2FA Status:

Conclusion

3. Improper Handling of Side Effects in `useEffect`

Using `useRef` and `useCallback` Hooks to Prevent Unnecessary Re-renders

`useMemo` to Optimize Performance and Memory Usage