Forem: Dhruvang Gajjar

A routing system in JavaScript for Single Page Application

Dhruvang Gajjar — Thu, 12 Dec 2024 09:52:59 +0000

🌐 Building a Simple Routing System in Vanilla JavaScript for SPAs

In the world of Single Page Applications (SPAs), managing routes without a framework can seem daunting. But with Vanilla JavaScript, you can create a simple yet powerful routing system! 🚀

Here’s a quick guide to get you started:

1️⃣ Understand the Basics of Routing

Routing in an SPA involves mapping a URL to a specific view or content. Instead of reloading the page, the app dynamically updates the content based on the URL.

2️⃣ Core Concepts

Hash-based Routing: Uses window.location.hash (e.g., /#/home). It's simple and doesn't require server configuration.
History API: Leverages pushState and popstate for cleaner URLs (e.g., /home).

3️⃣ Steps to Build

Step 1: Set Up Your HTML Structure

<div id="app">
  <nav>
    <a href="#/">Home</a>
    <a href="#/about">About</a>
    <a href="#/contact">Contact</a>
  </nav>
  <div id="view"></div>
</div>

Step 2: Create the Router

class Router {
  constructor(routes) {
    this.routes = routes;
    this.init();
  }

  init() {
    window.addEventListener("hashchange", () => this.handleRouteChange());
    this.handleRouteChange();
  }

  handleRouteChange() {
    const currentPath = window.location.hash.slice(1);
    const route = this.routes[currentPath];
    if (route) {
      route();
    } else {
      this.routes["/404"]();
    }
  }
}

// Usage
const router = new Router({
  "/": () => (document.getElementById("root").innerHTML = "Home Page"),
  "/about": () => (document.getElementById("root").innerHTML = "About Page"),
  "/404": () => (document.getElementById("root").innerHTML = "404 Page"),
});

4️⃣ Enhancements

Use the History API for cleaner URLs.
Lazy-load content or templates for better performance.
Add 404 and fallback routes for improved user experience.

Why Build This Yourself?

Deep Understanding: Learn the mechanics behind routing.
Flexibility: Customize it to your needs without the constraints of a library.
Performance: Avoid the overhead of external dependencies.

💡 Pro Tip: If you're building a larger app, consider modularizing your code and handling edge cases like query parameters or nested routes.

Have you ever built your own routing system? Share your experience in comments! 👇

Automatic batching for better performance

Dhruvang Gajjar — Tue, 02 May 2023 13:20:08 +0000

What is batching?

Batching is when React groups multiple state updates into a single re-render for better performance.

React has always combined two state updates that occur inside the same click event into a single re-render. You can notice that React only renders once for each click even though the state was set twice if you execute the following code:

export default function App() {
  const [count, setCount] = useState(1);
  const [flag, setFlag] = useState(true);

  function handleClick() {
    setCount((count) => count + 1);
    setFlag((flag) => !flag);
  }

  return (
    <div className="App">
      <h1>
        {count} is {flag ? "odd" : "even"}
      </h1>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

What is automatic batching?

Starting in React 18 with createRoot, No matter where they come from, all changes will be automatically batched.

This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events

Also If you need to re-render the component, you can disable automatic batching by using flushSync.

That's all about React batching.

If you want to discuss things related to Web Technology or want to explore more, You can always reach me out at dhruvangg@gmail.com OR Twitter
LinkedIN

Boost User Satisfaction with a Dynamic Progress Bar for Your JavaScript Fetch Calls

Dhruvang Gajjar — Thu, 09 Feb 2023 10:14:25 +0000

Creating a dynamic progress bar for your JavaScript fetch calls can greatly improve the user experience and boost satisfaction. Here are a few steps to get you started:

Create an HTML structure: First, create an HTML structure for your progress bar. You can use a div element with a width of 0% and a background color. This div will represent the progress bar.
Use JavaScript fetch method: Next, use the JavaScript fetch method to make the network request. The fetch method returns a Promise that resolves to the Response object representing the response to your request.
Track the progress of the fetch call: You can use the Response.body property to access a ReadableStream object, which represents the body of the response. You can then use the ReadableStream.getReader() method to get a reader and track the progress of the fetch call by reading chunks of data.
Update the progress bar: As you receive chunks of data, you can use JavaScript to update the width of the progress bar. For example, you can divide the total number of bytes received by the total number of bytes to be received, and multiply the result by 100 to get the percentage. You can then use this percentage to update the width of the progress bar.
Show the completion of the fetch call: Finally, you can use JavaScript to show the completion of the fetch call. For example, you can change the background color of the progress bar to green when the fetch call is complete, or display a message to indicate that the data has been loaded.

By following these steps, you can create a dynamic progress bar for your JavaScript fetch calls that provides a better user experience and improves satisfaction.

Setup React App with esbuild

Dhruvang Gajjar — Mon, 31 Oct 2022 08:28:32 +0000

Usally we create our react application using "create-react-app" which takes too much time to setup and installing packages. Also It takes more time start the server.

ESBuild is the solution of that frustrating issue.

When we setup react application with "create-react-app", it will install many packages which takes more time. Also webpack is slow compared to esbuild.

Let's start with initiating project by npm init. Thereafter install react and react-dom using following command.

npm i react react-dom

Once react dependencies have been added, install dev dependencies esbuild and live-server. Here live-server will be used to run the server.

npm i esbuild live-server --save-dev

Once all the dependencies have been installed, create public and src folder. All the react files should be placed inside src folder and index.html file should be placed inside public folder.

Folder Structure should be look like this.

Now create a server.js file in which we will define build related code.

Code of server.js should be as follows:

const { build } = require("esbuild"),
    liveServer = require("live-server");

build({
    entryPoints: ['./src/index.js'],
    outfile: './public/bundle.js',
    bundle: true,
    loader: {
        '.js': 'jsx'
    },
    watch: {
        onRebuild(error, result) {
            if (error) console.error('watch build failed:', error)
            else console.log('watch build succeeded:', result)
        },
    },
}).then(result => {
    liveServer.start({
        port: 8000,
        host: 'localhost',
        root: "public",
        open: true,
        watch: "everything",
        ignore: 'scss,my/templates',
        file: "index.html",
        wait: 1000,
        mount: [['/components', './node_modules']],
        logLevel: 2,
        middleware: [function (req, res, next) { next(); }]
    });
    console.log('watching...', result)
})

And That's all. Now just add your react code inside src folder and us the bundle.js in public folder.

Sharing Github link for reference.

Handle common login for API and static page in node js

Dhruvang Gajjar — Fri, 16 Jul 2021 02:12:02 +0000

Jul 13 '21 Comments: 1 Answers: 1

I'm working on MERN stack application. There are two types of endpoints in my applications. One for API and another for static routes (using handlebars in NodeJS). I have used the basic JWT token to secure the API endpoints which would be accessible by React App. But JWT is not…

Open Full Question

Ways to get user's geo location

Dhruvang Gajjar — Mon, 19 Apr 2021 02:54:14 +0000

There are a lot of functionalities where you have to get the user's location.

Let's consider a simple scenario that you have to show the popup based on user's location. so you have to get the user's location to achieve the requirement.

There are 2 ways to get the user's location.

Using Geo IP API

With this approach, You will have to use IP database. Get User's IP address and match that IP address in the IP database, and get related address details. Here If you don't have a backend or database you can use 3rd party API. There are many APIs available.
Here is a list of Few IP API Providers:

All have their own limitation and different pricing so check documentation, terms and conditions before use.

Usage

axios.get(`http://ip-api.com/json/`).then(res => {
    console.log(res.data)
}).catch(err => {
    console.error(err)
})

Pros

User don't need user permission to get their location.
Instant and simple user's geo location place.
Free for limited requests

Cons

Less Accuracy of user's location
Some 3rd party APIs are paid for commercial use.

Using Geo Location API

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. It returns only geographical coordinates of user's location once they allow.

Usage

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        console.log(position.coords)
    });
} else {
    x.innerHTML = "Geolocation is not supported by this browser.";
}

By above code, User would get the popup as per below screenshot.

It will return geolocation data only if user allow the popup.

Pros

100% Accurate Geo location
Instant
Available for free as It is native browser API.

Cons

Only return coordinates
Require 3rd party tool to convert coordinates to geo location
Available only in secure contexts (https)

You can use openstreetmap as tool to convert coordinates to geo location. It's an open source platform.

So that's all about user's Geo location. Let me know your views by commenting on this post.

I hope you found the article helpful. Feedbacks are greatly appreciated! 🙌

Have an amazing day!

🌎 Lets connect

Relative Time Format

Dhruvang Gajjar — Wed, 31 Mar 2021 11:45:35 +0000

The relative Time format is often used in social media, blogs, and chat applications. Earlier we have to make some functions to get relative time. Now It can be achievable by Vanilla JavaScript.

Intl.RelativeTimeFormat() enables localized formatting of relative times without sacrificing performance.

A Quick Example

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(10, 'second');
// 'in 10 seconds'

rtf.format(-10, 'minute');
// '10 minutes ago'

The Intl.RelativeTimeFormat() constructor creates Intl.RelativeTimeFormat objects.

Syntax

new Intl.RelativeTimeFormat([locales[, options]])

Parameters

locales [Optional]

A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see the Intl page.

options [Optional]

An object with some or all of the following properties:

localeMatcher The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". For information about this option, see the Intl page.
numeric The format of output message. Possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). The "auto" value allows to not always have to use numeric values in the output.
style The length of the internationalized message. Possible values are: "long" (default, e.g., in 1 month) "short" (e.g., in 1 mo.), or "narrow" (e.g., in 1 mo.). The narrow style could be similar to the short style for some locales.

Here is an example with some option properties:

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

rtf.format(-1, 'day');
// 'yesterday'

rtf.format(0, 'day');
// 'today'

rtf.format(1, 'day');
// 'tomorrow'

rtf.format(-1, 'week');
// 'last week'

rtf.format(0, 'week');
// 'this week'

rtf.format(1, 'week');
// 'next week'

Also, This is supported by all modern browsers. You can check compatibility here

References:

How to detect Caps lock in JavaScript

Dhruvang Gajjar — Sat, 27 Mar 2021 10:57:30 +0000

To check the caps lock status, you use the getModifierState() method of the KeyboardEvent object:

The getModifierState() method returns boolean. If modifier is active it returns true otherwise false

Here is a sample example of getModifierState() for password inputs where you can check the status of caps lock and return appropriate alert.

const password = document.querySelector("input[name=password]")

password.addEventListener('keyup', (event) => {
    if (event.getModifierState('CapsLock')) {
        alert('CapsLock is on')
    }
})

Sticky Sidebar in Vanilla JavaScript

Dhruvang Gajjar — Thu, 11 Mar 2021 07:44:18 +0000

This code is built with Pure JavaScript without any dependencies. It just count top and bottom edges of the element in which the element needs to be sticky.

You can also check the Demo

function offset(elt) {
  var rect = elt.getBoundingClientRect(), bodyElt = document.body;
  return {
    top: rect.top + bodyElt .scrollTop,
    left: rect.left + bodyElt .scrollLeft
  }
}

window.addEventListener("load", function(){
  if(document.querySelector("#sidebar")){
    const sidebar = document.querySelector("#sidebar");
    const footer = document.querySelector("section");
    const top = offset(sidebar).top;
    const footTop = offset(footer).top;
    const maxY = footTop - sidebar.offsetHeight

    window.addEventListener("scroll", function(){
      let y = document.scrollingElement.scrollTop;
      if (y > top) {
        if (y < maxY) {
          sidebar.classList.add("fixed")
          sidebar.removeAttribute('style');
        } else {
          sidebar.classList.remove("fixed")
          sidebar.setAttribute('style', 'position: absolute; top: '+(maxY - top)+'px');
        }
      } else {
        sidebar.classList.remove("fixed")
      }
    })
  }
});

Equal Height in Vanilla JavaScript

Dhruvang Gajjar — Mon, 08 Mar 2021 09:54:35 +0000

If you want to add equal height for the elements, you don't need any jQuery or JavaScript Plugins. Just add following script and use it for any elements.

You can also check the Demo

function setHeight(el, val) {
  if (typeof val === "function") val = val();
  if (typeof val === "string") el.style.height = val;
  else el.style.height = val + "px";
}

var equalheight = function(container){
  var currentTallest = 0,
      currentRowStart = 0,
      rowDivs = new Array(),
      $el,
      topPosition = 0;

  Array.from(document.querySelectorAll(container)).forEach((el,i) => {
    el.style.height = "auto";
    topPostion = el.offsetTop;
    if(currentRowStart != topPostion){
      for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
        setHeight(rowDivs[currentDiv], currentTallest)
      }
      rowDivs.length = 0;
      currentRowStart = topPostion;
      currentTallest = parseFloat(getComputedStyle(el, null).height.replace("px", ""))
      rowDivs.push(el);
    } else {
      rowDivs.push(el);
      currentTallest = (currentTallest < parseFloat(getComputedStyle(el, null).height.replace("px", ""))) ? (parseFloat(getComputedStyle(el, null).height.replace("px", ""))) : (currentTallest);
    }
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
      setHeight(rowDivs[currentDiv], currentTallest)
    }
  })
}

You don't need to change above code. Just put following code below main code and repeat it as many time as you want.

window.addEventListener("load", function(){
  equalheight('.blog-title')
})
window.addEventListener("resize", function(){
  setTimeout(function(){
    equalheight('.blog-title')
  })
})

This code does not have any dependency. It is built in pure JavaScript.

Authentication in REST APIs

Dhruvang Gajjar — Tue, 19 Jan 2021 11:00:17 +0000

Built Authentication REST APIs using expressJS, MySQL, Sequelize and JWT. We will use following dependencies to built authentication APIs

Required Tool

Let’s take a moment to review the tools we’re going to be using:

NodeJS : We’re going to use this to run JavaScript code on the server. I’ve decided to use the latest version of Node, v6.3.0 at the time of writing, so that we’ll have access to most of the new features introduced in ES6.
Express : As per their website, Express is a “Fast, unopinionated, minimalist web framework for Node.js”, that we’re going to be building our Todo list application on.
NPM : for the package management (both server, frontend, and development packages). It’ll be easier to maintain one package management system, than using NPM and Bower together.
MySQL : This is a powerful open-source database that we’re going to use to store our Todos.
Sequelize : In addition, we’re going to use Sequelize, which is a database ORM that will interface with the Mysql database for us.
Postman : A Chrome app that we’ll use to practically test our API.

Create Project

Let’s begin by setting up our workspace.
You all are familiar with NPM. Before setup the project, open the terminal and check node and npm version. If version is displaying its means node and npm installed. If not then you must have to install the node and npm.

Open CLI and go to the project directory
Now type npm init to initialize the node project.

This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit RETURN to accept the defaults for most of them, with the following exception:

entry point: (index.js)

Enter app.js, or whatever you want the name of the main file to be. If you want it to be index.js, hit RETURN to accept the suggested default file name.
This command will generate package.json file in the project folder.

Setup Express

Initially I will make routes for the project. Install Express and a few of it’s dependencies.

Open CLI and go to the project directory
Type npm i --save express cors body-parser dotenv

The --save flag will save these packages to the dependencies section of your package.json file.

Create a file in the root folder and call it app.js.
In this file, let’s create our Express application.

const express = require("express"),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    PORT = 8080;
require('dotenv').config()    

const app = express()
app.use(cors())
app.use(bodyParser.json())

app.get("/", (req, res) => {
    res.json({ "message": "Hello ChampDecay" })
})
app.listen(PORT, async () => {
    console.log(`App is running on http://localhost:${PORT}`);
})

The application will be run scuccessfully on http://localhost:8080

We’ll need a way to restart the server every time we change something in our code. For that, we’ll use nodemon npm package.

npm i nodemon

Then, open up your package.json file and create a command to run the server. That command will be created under the scripts section. Edit your package.jsonin the scripts section as follows:

...
"scripts": {
    "dev": "nodemon app.js"
},
...

Now try running the application by executing following command in cli.

npm run dev

and visiting http://localhost:8080. You should see

{
  "message": "Hello ChampDecay"
}

At this point in time, your project structure should look like:

root
├── app.js
├── package.json
└── node_modules

Sequelize Setup

For this part, we are going to install MySQL.
Next, we will require Sequelize. This is an ORM that will interface with the MYSQL database for us.
We will use of the Sequelize CLI package to bootstrap the project for us. It will also help us generate database migrations.

So Let’s install Sequelize CLI package.following command will install sequelize-cli globally

npm install -g sequelize-cli

Now we will install Sequelize package, alongside its dependencies. Sequelize is an easy-to-use multi SQL dialect ORM for Node.js. We gonna use MySQL as our database. So let install Sequelize ORM and mysql2 dialect. > npm i sequelize mysql2

Initialize sequelize

Let's generate generate migrations, seeders, config and models directories and config file using sequelize cli.

sequelize init

Above command will generate boilerplate code in your project, Now the project structure should look like:

root
├── app.js
├── package.json
├── config
│   └── config.json
├── migrations
├── models
│   └── index.js
└── seeders

In models/index.js file, It establishes database connection by using config/config.json. So let's configure config.json.

{
  "development": {
    "username": "root", // Database Username
    "password": null,   // Database Password
    "database": "blog", // Database Name
    "host": "127.0.0.1",// Database Host
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

Now as we want to create a authentication, we have to create a table for Users. So we would generate migration and model for Users. Let's create model and migration by sequelize cli command as follows:

sequelize model:create --name User --attributes username:string,email:string,password:string

This will generate user.js file in model directory and <timestamp>-create-user.js migration in migration directory.

Generated user.js model file will be look like:

'use strict';
const { Model } = require('sequelize');
module.exports = (sequelize, DataTypes) => {
  class User extends Model {
    /**
     * Helper method for defining associations.
     * This method is not a part of Sequelize lifecycle.
     * The `models/index` file will call this method automatically.
     */
    static associate(models) {
      // define association here
    }
  };
  User.init({
    username: DataTypes.STRING,
    email: DataTypes.STRING,
    password: DataTypes.STRING
  }, {
    sequelize,
    modelName: 'User',
  });
  return User;
};

and generated <timestamp>-create-user.js migration file will be look like:

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('Users', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      username: {
        type: Sequelize.STRING
      },
      email: {
        type: Sequelize.STRING
      },
      password: {
        type: Sequelize.STRING
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

Now we have to add some settings in model and migration files like unique key and allow/disallow null values. So let's modify user.js model file:

...
User.init({
    username: {
      type: DataTypes.STRING,
      unique: true,
      allowNull: false
    },
    email: {
      type: DataTypes.STRING,
      unique: true,
      allowNull: false
    },
    password: {
      type: DataTypes.STRING,
      allowNull: false
    }
  }
...

Here, We have added unique and allowNull in fields and same as model, add these parameters in migration file as well.

Finally, models/user.js will look like:

'use strict';
const { Model } = require('sequelize');
module.exports = (sequelize, DataTypes) => {
  class User extends Model {
    /**
     * Helper method for defining associations.
     * This method is not a part of Sequelize lifecycle.
     * The `models/index` file will call this method automatically.
     */
    static associate(models) {
      // define association here
    }
  };
  User.init({
    username: {
      type: DataTypes.STRING,
      unique: true,
      allowNull: false
    },
    email: {
      type: DataTypes.STRING,
      unique: true,
      allowNull: false
    },
    password: {
      type: DataTypes.STRING,
      allowNull: false
    }
  }, {
    sequelize,
    modelName: 'User',
  });
  return User;
};

and migrations/<timestamp>-create-user.js file will look like:

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('Users', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      username: {
        type: Sequelize.STRING,
        unique: true,
        allowNull: false
      },
      email: {
        type: Sequelize.STRING,
        unique: true,
        allowNull: false
      },
      password: {
        type: Sequelize.STRING,
        allowNull: false
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

After setting up model and migrations, we will setup routes and controllers for user.

Setup Route

Create a file routes/user.js at root directory of the project.
It will be look like:

const express = require('express'),
    router = express.Router();

router.post('/signup', (req, res) => {
    res.json({ "msg": "Signup Route" })
});
router.post('/signin', (req, res) => {
    res.json({ "msg": "Signin Route" })
});

module.exports = router

Here we have create two routes, one for signup and another for signin. now this file should be called in app.js

Add following code in app.js before app.listen command.

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

That's it! We have setup routes for signup and signin. Our next step will be settingup the controller for user.

Setup Controller

Here, we will use jsonwebtokens for api authentications, So let's install bcryptjs and jsonwebtoken packages.

npm i bcryptjs jsonwebtoken

After adding two packages, create a controllers/user.js file and add following code:

const bcrypt = require("bcryptjs"),
    jwt = require('jsonwebtoken'),
    db = require("../models/index"),
    JWT_SECRET = process.env.JWT_SECRET

exports.signUp = async (req, res) => {
    const { username, email, password: plainTextPassword } = req.body;
    const password = await bcrypt.hash(plainTextPassword, 10)
    try {
        const user = await db.User.create({
            username,
            email,
            password
        })
        res.status(201).json({ "status": "ok", "message": "User registered", user })
    } catch (error) {
        res.status(401).json({ "status": "error", "message": error.errors[0].message })
    }
}

exports.signIn = async (req, res) => {
    const { email, password } = req.body;
    const user = await db.User.findOne({ where: { email: email } })
    if (!user) {
        return res.status(401).json({ status: 'error', error: 'Invalid username/password' })
    }
    if (await bcrypt.compare(password, user.password)) {
        const payload = { id: user.id, username: user.username };
        const options = { expiresIn: '2d', issuer: 'http://localhost:8080' };
        const secret = JWT_SECRET;
        const token = jwt.sign(payload, secret, options)
        return res.status(200).json({ status: 'ok', "message": "User signin successful", token })
    }
    return res.status(401).json({ "status": "error", "message": "Invalid Username/Password" })
}
exports.getUsers = async (req, res) => {
    try {
        const users = await db.User.findAll()
        return res.status(200).json({ status: 'ok', users })
    } catch (error) {
        return res.status(401).json({ "status": "error", error })
    }
}

In this file, we have imported bcryptjs, jsonwebtoken and index model. We have define JWT_SECRET variable which should be hidden and ideally fetch from .env file. Thereafter we have exported two functions.

Signup function

Here we get all request parameters and define it by const { username, email, password: plainTextPassword } = req.body; Then we have to hashed the password so no one can see it from database. To hash the password, we have used bcrypt's hash function. we have used 2 paramaters in hash function, first is plaintext password which should be encoded and second is salt.

After it, we have to store the values including new hashed password to the database. so using sequelize's create function we have stored it in databse.

Signin function

Here we get all request parameters same as signup function. Thereafter we fetch row from users table of the database using findOne function.
If it doesn't return any row that means a user enters wrong email so we have responsed invalid message wirh 401 status.
If It returns a row, we have to compare the password from database and user input. So again bcrypt will be used. the compare function of bcrypt will do the comparisation. If comparisation is true, we will generate access token using jwt otherwise returns error message with 401 status.
We have used username and id to create jwt token. Also we have set expire time and issuer of the token.

Get Users Function

This function simply fetch users from database. But to access this route, user should pass valid access token with the request and to validate the access token we have to make a middle ware.
Create a new file middleware/auth.js and that file should have following code:

const jwt = require('jsonwebtoken');

module.exports = {
    validateToken: async (req, res, next) => {
        const authHeader = req.headers.authorization;
        if (authHeader) {
            const token = authHeader.split(' ')[1];
            try {
                const result = await jwt.verify(token, process.env.JWT_SECRET)
                req.decoded = result;
                next()
            } catch (error) {
                return res.status(401).json({ "status": "error", "message": "Invalid Authentication.", error })
            }
        } else {
            return res.status(401).json({ "status": "error", "message": "Authentication error. Token required." })
        }
    }
}

Here we have imported only jsonwebtoken and create a function called validateToken. It will take access token from the authorization headers and verify it using jwt.verify() function. If it is verfied successfully, it will go for the next process by next() function, otherwise it returns a error message of invalide access token with status code 401.

So finally we have created controller and route. Let's connect route with the controller. Open routes/user.js file and replace the following code:

const express = require('express'),
    router = express.Router(),
    User = require("../controllers/user")
router.post('/signup', User.signUp);
router.post('/signin', User.signIn);
router.get('/users', Auth.validateToken, User.getUsers);
module.exports = router

Here in /users route, we have used middleware as second argument and That's all.

Finally, The code is ready..!!

This is my first post. Let me know your views by commenting on it.

Match arrays in JavaScript

Dhruvang Gajjar — Tue, 12 Jan 2021 11:07:46 +0000

Forem: Dhruvang Gajjar

A routing system in JavaScript for Single Page Application

🌐 Building a Simple Routing System in Vanilla JavaScript for SPAs

1️⃣ Understand the Basics of Routing

2️⃣ Core Concepts

3️⃣ Steps to Build

Step 1: Set Up Your HTML Structure

Step 2: Create the Router

4️⃣ Enhancements

Why Build This Yourself?

Automatic batching for better performance

What is batching?

What is automatic batching?

Boost User Satisfaction with a Dynamic Progress Bar for Your JavaScript Fetch Calls

Setup React App with esbuild

Handle common login for API and static page in node js

Ways to get user's geo location

Using Geo IP API

Usage

Pros

Cons

Using Geo Location API

Usage

Pros

Cons

Relative Time Format

A Quick Example

Syntax

Parameters

locales [Optional]

options [Optional]

How to detect Caps lock in JavaScript

Sticky Sidebar in Vanilla JavaScript

Equal Height in Vanilla JavaScript

Authentication in REST APIs

Required Tool

Create Project

Setup Express

Sequelize Setup

Initialize sequelize

Setup Route

Setup Controller

Signup function

Signin function

Get Users Function

Match arrays in JavaScript

Check if array A has all elements of array B

Check if array A has any elements of array B