Category: 기타

/ Author: Uma Victor / Link: https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/

Node.js User Authentication Guide

Node.js User Authentication Guide

Want to authenticate and manage users with specific roles in your Node.js app? This in-depth tutorial explains everything step-by-step to help you implement authentication in your Node.js apps.

Introduction

Creating a user registration form employs the management of the registered user. This is where user role authentication comes into play. Role authentication ensures that non-admin users cannot make changes or access exclusive information. It grants administrative privileges to admin users and basic privileges to basic users.

You can build your own authentication functionality with web tokens like JSON Web Token (JWT) or use a trusted third-party customer identity and access management (CIAM) software like LoginRadius.

Goal

This tutorial helps you:

understand the differences between the Admin role and the Basic user role;
use JWT to authenticate users; and
learn role-based authentication using JWT in a simple Node.js app.

Prerequisites

You have installed the following:

You already understand JavaScript E56 Syntax.

Now that everything is in place, let's set up your database.

Set Up a Mongo Database

You'll store all your user data — which includes username, password, and role — in MongoDB.

Install a node package called Mongoose that will connect to MongoDB. Then create a user schema for your application.

npm init
npm install mongoose

npm init sets up your new project and creates a package.json file with the credentials.

After installing mongoose, create a new file db.js in the project's directory and require mongoose.

const Mongoose = require("mongoose")

With the help of mongoose, you can connect your application to MongoDB:

// db.js
const Mongoose = require("mongoose")
const localDB = `mongodb://localhost:27017/role_auth`
const connectDB = async () => {
  await Mongoose.connect(localDB, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  console.log("MongoDB Connected")
}
module.exports = connectDB

The code snippet here connects to mongodb://localhost:27017 and then specifies the name of the database /role_auth.

The function connectDB awaits for the connection, which contains the URI and options as a second parameter. If it connects without errors, it will log out MongoDB Connected. Error issues will be fixed while connecting to the database. After this, it exported the function for use in the server.

Set Up the Server

You need to install some dependencies that you'll use in this tutorial.

  npm i express nodemon

Express.js is a Node.js framework for building web applications quickly and easily.

Nodemon is a tool that watches the file system and automatically restarts the server when there is a change.

You require express in your application to listen for a connection on port 5000. Create a new file server.js in the root directory and create the listening event:

const express = require("express")
const app = express()
const PORT = 5000
app.listen(PORT, () => console.log(`Server Connected to port ${PORT}`))

The next step is to test your application. Open up your package.json file and add the following to scripts:

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

Open your terminal and run npm run dev to start the server.

Connect to the Database

Earlier, you've created a function that connects to MongoDB and exported that function. Now import that function into your server.js:

const connectDB = require("./db");
...
//Connecting the Database
connectDB();

You also need to create an error handler that catches every unhandledRejection error.

const server = app.listen(PORT, () =>
  console.log(`Server Connected to port ${PORT}`)
)
// Handling Error
process.on("unhandledRejection", err => {
  console.log(`An error occurred: ${err.message}`)
  server.close(() => process.exit(1))
})

The listening event is assigned to a constant server. If an unhandledRejection error occurs, it logs out the error and closes the server with an exit code of 1.

Create User Schema

Schema is like a blueprint that shows how the database will be constructed.

You'll structure a user schema that contains username, password, and role.

Create a new folder model in the project's directory, and create a file called User.js. Now open User.js and create the user schema:

// user.js
const Mongoose = require("mongoose")
const UserSchema = new Mongoose.Schema({
  username: {
    type: String,
    unique: true,
    required: true,
  },
  password: {
    type: String,
    minlength: 6,
    required: true,
  },
  role: {
    type: String,
    default: "Basic",
    required: true,
  },
})

In the schema, the username will be unique, required, and will accept strings.

You've specified the minimum characters(6) the password field will accept. The role field grants a default value (basic) that you can change if needed.

Now, you need to create a user model and export it:

const User = Mongoose.model("user", UserSchema)
module.exports = User

You've created the user model by passing the UserSchema as the second argument while the first argument is the name of the model user.

Perform CRUD Operations

You'll create functions that handle:

adding users;
getting all users;
updating the role of users; and,
deleting users.

Register Function

As the name implies, this function will handle the registrations of users.

Let's create a new folder named Auth. It will contain the Authentication file and the Route set-up file.

After creating the Auth folder, add two files — Auth.js and Route.js.

Now open up our Auth.js file and import that User model:

const User = require("../model/User")

The next step is to create an async express function that will take the user's data and register it in the database.

You need to use an Express middleware function that will grant access to the user's data from the body. You'll use this function in the server.js file:

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

Let's go back to your Auth.js file and create the register function:

// auth.js
exports.register = async (req, res, next) => {
  const { username, password } = req.body
  if (password.length < 6) {
    return res.status(400).json({ message: "Password less than 6 characters" })
  }
  try {
    await User.create({
      username,
      password,
    }).then(user =>
      res.status(200).json({
        message: "User successfully created",
        user,
      })
    )
  } catch (err) {
    res.status(401).json({
      message: "User not successful created",
      error: error.mesage,
    })
  }
}

The exported register function will be used to set up the routes. You got the username and password from the req.body and created a tryCatch block that will create the user if successful; else, it returns status code 401 with the error message.

Set Up Register Route

You'll create a route to /register using express.Router. Import the register function into your route.js file, and use it as the route's function:

const express = require("express")
const router = express.Router()
const { register } = require("./auth")
router.route("/register").post(register)
module.exports = router

The last step is to import your route.js file as middleware in server.js:

app.use("/api/auth", require("./Auth/route"))

The server will use the router middleware function if there is a request to /api/auth.

Test the Register Route

You'll use Postman to test all the routes.

Open up Postman to send a POST request to http://localhost:5000/api/auth/register and pass the username and password to the body:

You've created a function that adds registered users to the database. You have to create another function that will authenticate user credentials and check if the user is registered.

Open the Auth.js file and create the Login function, as follows:

// auth.js
exports.login = async (req, res, next) => {
  const { username, password } = req.body
  // Check if username and password is provided
  if (!username || !password) {
    return res.status(400).json({
      message: "Username or Password not present",
    })
  }
}

The login function returns status code 400 if the username and password were not provided. You need to find a user with the provided username and password:

exports.login = async (req, res, next) => {
  try {
    const user = await User.findOne({ username, password })
    if (!user) {
      res.status(401).json({
        message: "Login not successful",
        error: "User not found",
      })
    } else {
      res.status(200).json({
        message: "Login successful",
        user,
      })
    }
  } catch (error) {
    res.status(400).json({
      message: "An error occurred",
      error: error.message,
    })
  }
}

Here, it returns status code 401 when a user isn't found and 200 when a user is found. The code snippet wrapped all this in a tryCatch block to detect and output errors, if any.

To set up the login route, import the login function into your route.js:

const express = require("express");
const router = express.Router();
const { register, login } = require("./auth");
...
router.route("/login").post(login);
module.exports = router;

Make a POST request at http://localhost:5000/api/auth/login and pass a valid username and password to the body:

Update Function

This function will be responsibile for updating the role of a basic user to an admin user. Open the auth.js file and create the update function, as follows:

//auth.js
exports.update = async (req, res, next) => {
  const { role, id } = req.body
  // Verifying if role and id is presnt
  if (role && id) {
    // Verifying if the value of role is admin
    if (role === "admin") {
      await User.findById(id)
    } else {
      res.status(400).json({
        message: "Role is not admin",
      })
    }
  } else {
    res.status(400).json({ message: "Role or Id not present" })
  }
}

The first if statement verifies if role and id are present in the request body.

The second if statement checks if the value of role is admin. You should do this to avoid having over two roles.

After finding a user with that ID, you'll create a third if block that will check for the role of the user:

exports.update = async (req, res, next) => {
  const { role, id } = req.body;
  // First - Verifying if role and id is presnt
  if (role && id) {
    // Second - Verifying if the value of role is admin
    if (role === "admin") {
      // Finds the user with the id
      await User.findById(id)
        .then((user) => {
          // Third - Verifies the user is not an admin
          if (user.role !== "admin") {
            user.role = role;
            user.save((err) => {
              //Monogodb error checker
              if (err) {
                res
                  .status("400")
                  .json({ message: "An error occurred", error: err.message });
                process.exit(1);
              }
              res.status("201").json({ message: "Update successful", user });
            });
          } else {
            res.status(400).json({ message: "User is already an Admin" });
          }
        })
        .catch((error) => {
          res
            .status(400)
            .json({ message: "An error occurred", error: error.message });
        });

       ...

The third if block prevents assigning an admin role to an admin user, while the last if block checks if an error occurred when saving the role in the database.

The numerous if statements might be a little bit tricky but understandable. Please read the comments in the above code block for better understanding.

Set Up Update Route

Import the update function in your route.js, as follows:

const { register, login, update } = require("./auth");
...
router.route("/update").put(update);

Testing the Update Route

Send a put request to http://localhost:5000/api/auth/update:

Delete Function

The deleteUser function will remove a specific user from the database. Let's create this function in our auth.js file:

exports.deleteUser = async (req, res, next) => {
  const { id } = req.body
  await User.findById(id)
    .then(user => user.remove())
    .then(user =>
      res.status(201).json({ message: "User successfully deleted", user })
    )
    .catch(error =>
      res
        .status(400)
        .json({ message: "An error occurred", error: error.message })
    )
}

You remove the user based on the id you get from req.body.

Set up the `deleteUser` Route

Open your route.js file to create a delete request to /deleteUser, using the deleteUser as its function:

const { register, login, update, deleteUser } = require("./auth");
...
router.route("/deleteUser").delete(deleteUser);

Test the `deleteUser` Route

Send a delete request to http://localhost:5000/api/auth/deleteUser by passing a valid id to the body:

Hash User Passwords

Saving user passwords in the database in plain text format is reckless. It is preferable to hash your password before storing it.

For instance, it will be tough to decipher the passwords in your database if they are leaked. Hashing passwords is a cautious and reliable practice.

Let's use bcryptjs to hash your user passwords.

Lets install bcryptjs:

npm i bcryptjs

After installing bcryptjs, import it into your auth.js

const bcrypt = require("bcryptjs")

Refactor Register Function

Instead of sending a plain text format to your database, lets hash the password using bcrypt:

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

  ...

  bcrypt.hash(password, 10).then(async (hash) => {
    await User.create({
      username,
      password: hash,
    })
      .then((user) =>
        res.status(200).json({
          message: "User successfully created",
           user,
        })
      )
      .catch((error) =>
        res.status(400).json({
          message: "User not successful created",
          error: error.message,
        })
      );
  });
};

bcrypt takes in your password as the first argument and the number of times it will hash the password as the second argument. Passing a large number will take bcrypt a long time to hash the password, so give a moderate number like 10.

bcrypt will return a promise with the hashed password; then, send that hashed password to the database.

Test the Register Function

Send a POST request to http://localhost:5000/api/auth/register and pass the username and password to the body:

exports.login = async (req, res, next) => {
  const { username, password } = req.body
  // Check if username and password is provided
  if (!username || !password) {
    return res.status(400).json({
      message: "Username or Password not present",
    })
  }
  try {
    const user = await User.findOne({ username })
    if (!user) {
      res.status(400).json({
        message: "Login not successful",
        error: "User not found",
      })
    } else {
      // comparing given password with hashed password
      bcrypt.compare(password, user.password).then(function (result) {
        result
          ? res.status(200).json({
              message: "Login successful",
              user,
            })
          : res.status(400).json({ message: "Login not succesful" })
      })
    }
  } catch (error) {
    res.status(400).json({
      message: "An error occurred",
      error: error.message,
    })
  }
}

bcrypt.compare checks if the given password and the hashed password in the database are the same.

Send a POST request to http://localhost:5000/api/auth/login and pass a valid username and password to the body:

Authenticate Users with JSON Web Token (JWT)

JSON Web Token helps shield a route from an unauthenticated user. Using JWT in your application will prevent unauthenticated users from accessing your users' home page and prevent unauthorized users from accessing your admin page.

JWT creates a token, sends it to the client, and then the client uses the token for making requests. It also helps verify that you're a valid user making those requests.

You've to install JWT before using it in your application:

npm i jsonwebtoken

Refactor the Register Function

When a user registers, you'll send a token to the client using JWT as a cookie. To create this token, you need to set a secret string. You'll use the node's in-built package called crypto to create random strings:

node
require("crypto").randomBytes(35).toString("hex")

Output:

Storing this secret string in an environment variable is a safe practice. If this secret string is leaked, unauthenticated users can create fake tokens to access the route.

Store your secret string in a variable:

const jwtSecret =
  "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"

Once you've created your jwtSecret, import jsonwebtoken as the token in the register function:

...
const jwt = require('jsonwebtoken')
const jwtSecret = '4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd'
exports.register = async (req, res, next) => {
  const { username, password } = req.body;

  ...

  bcrypt.hash(password, 10).then(async (hash) => {
    await User.create({
      username,
      password: hash,
    })
      .then((user) => {
        const maxAge = 3 * 60 * 60;
        const token = jwt.sign(
          { id: user._id, username, role: user.role },
          jwtSecret,
          {
            expiresIn: maxAge, // 3hrs in sec
          }
        );
        res.cookie("jwt", token, {
          httpOnly: true,
          maxAge: maxAge * 1000, // 3hrs in ms
        });
        res.status(201).json({
          message: "User successfully created",
          user: user._id,
        });
      })
      .catch((error) =>
        res.status(400).json({
          message: "User not successful created",
          error: error.message,
        })
      );
  });
};

The code snippet created the token using JWT's sign function. This function takes in three parameters:

the payload is the first parament that you'll pass to the function. This payload holds data concerning the user, and this data should not contain sensitive information like passwords;
you passed your jwtSecret as the second parameter; and,
how long the token will last as the third parameter.

After passing all these arguments, JWT will generate a token. After the token is generated, send it as a cookie to the client.

Also, generate a token for logged in users:

exports.login = async (req, res, next) => {

    ...

      bcrypt.compare(password, user.password).then(function (result) {
        if (result) {
          const maxAge = 3 * 60 * 60;
          const token = jwt.sign(
            { id: user._id, username, role: user.role },
            jwtSecret,
            {
              expiresIn: maxAge, // 3hrs in sec
            }
          );
          res.cookie("jwt", token, {
            httpOnly: true,
            maxAge: maxAge * 1000, // 3hrs in ms
          });
          res.status(201).json({
            message: "User successfully Logged in",
            user: user._id,
          });
        } else {
          res.status(400).json({ message: "Login not succesful" });
        }
      });
    }
  } catch (error) {
    res.status(400).json({
      message: "An error occurred",
      error: error.message,
    });
  }
};

Protect the Routes

To prevent unauthenticated users from accessing the private route, take the token from the cookie, verify the token, and redirect users based on role.

You'll get the token from the client using a node package called cookie-parser. Let's install the package before using it:

npm i cookie-parser

After installing it, import it into your server.js file and use it as a middleware:

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

You'll create your middleware that verifies the token and grants access to your private route.

Let's create a new folder in the project's folder named middleware and create a file called auth.js.

Admin Authentication

Open the auth.js file and create the middleware:

const jwt = require("jsonwebtoken")
const jwtSecret =
  "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"
exports.adminAuth = (req, res, next) => {
  const token = req.cookies.jwt
  if (token) {
    jwt.verify(token, jwtSecret, (err, decodedToken) => {
      if (err) {
        return res.status(401).json({ message: "Not authorized" })
      } else {
        if (decodedToken.role !== "admin") {
          return res.status(401).json({ message: "Not authorized" })
        } else {
          next()
        }
      }
    })
  } else {
    return res
      .status(401)
      .json({ message: "Not authorized, token not available" })
  }
}

The code snippet requests a token from the client, checks if a token is available, and verifies that token.

JWT verifies your token with your jwtSecret and returns a callback function. This function returns status code 401 if the token fails the authentication test.

When you've created the token, you passed a payload that contained the user's credentials. You'll get the role from the credentials and check if the user's role is admin. If the user is not an admin, you return status code 401, but you'll call the next function if the user is an admin.

Basic User Authentication

You'll also authenticate basic users before granting them access to the users route. Let's create another middleware in your auth.js file that will authenticate basic users:

exports.userAuth = (req, res, next) => {
  const token = req.cookies.jwt
  if (token) {
    jwt.verify(token, jwtSecret, (err, decodedToken) => {
      if (err) {
        return res.status(401).json({ message: "Not authorized" })
      } else {
        if (decodedToken.role !== "Basic") {
          return res.status(401).json({ message: "Not authorized" })
        } else {
          next()
        }
      }
    })
  } else {
    return res
      .status(401)
      .json({ message: "Not authorized, token not available" })
  }
}

Protect the Routes

You'll have two routes: one for the user and the other for the admin. Let's import this middleware into your server.js file and protect your routes:

const { adminAuth, userAuth } = require("./middleware/auth.js");
...
app.get("/admin", adminAuth, (req, res) => res.send("Admin Route"));
app.get("/basic", userAuth, (req, res) => res.send("User Route"));

Updating user roles and deleting users should be done by an Admin, so you need to import this auth.js middleware into your route.js file to protect the update and delete routes.

route.js:

const { adminAuth } = require("../middleware/auth")
router.route("/update").put(adminAuth, update)
router.route("/deleteUser").delete(adminAuth, deleteUser)

Populate the Database with Admin User

You need to create an admin user in your database. Open up your terminal, and let's run some MongoDB methods:

mongo

After mongo is started, you need to use the role_auth database:

use role_auth

Before adding your admin user to the database, you need to hash the password using bcrypt in the node terminal. Open node terminal in your project's directory:

const password = require("bcryptjs").hash("admin", 10)
password

After you've created the constant password, you need to enter the password in the node terminal to get your hashed password.

You'll use the hashed password to create your admin:

db.users.insert({
  username: "admin",
  password: "$2a$10$mZwU9AbYSyX7E1A6fu/ZO.BDhmCOIK7k6jXvKcuJm93PyYuH2eZ3K",
  role: "admin",
})

To check if it was successfully created, run db.users.find().pretty() — this will output all users in the database.

You'll use Embedded JavaScript (EJS) to create a front-end for your application.

Install the ejs package:

    npm i ejs

After you've installed ejs, you need to set ejs as your default view engine in your server.js file:

app.set("view engine", "ejs")

Render Embedded JavaScript

When making a GET request to specific routes, you'll render an ejs file:

app.get("/", (req, res) => res.render("home"))
app.get("/register", (req, res) => res.render("register"))
app.get("/login", (req, res) => res.render("login"))
app.get("/admin", adminAuth, (req, res) => res.render("admin"))
app.get("/basic", userAuth, (req, res) => res.render("user"))

Create EJS Files

By default, your application will look into the views folder when rendering an ejs file. You need to create the views folder in your project's folder and add your ejs files to it

Create a Home Page

Your home page will contain the links to /login and /register ejs file. Open up home.ejs and add these links:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home pagetitle>
  head>
  <body>
    <h1>Home Pageh1>
    <a href="/register"> Registera> <br />
    <a href="/login">Logina>
  body>
html>

Create a Registration Form

Embedded JavaScript (EJS) supports HTML syntax. You'll create the registration form in register.ejs using HTML syntax:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register Pagetitle>
  head>
  <body>
    <h1>Register Pageh1>
    <form>
      <div class="error" style="background-color: red;">div>
      <br />
      <label for="username">Usernamelabel><br />
      <input type="text" id="username" required /><br />
      <label for="password">Passwordlabel><br />
      <input type="password" id="password" required /><br />
      <input type="submit" value="register" /><br />
    form>
    <a href="/login">Already registered? Logina>
  body>
html>

Add POST Request Functionality

You need to get the username and password that the user entered and pass it to the body when making the POST request:

...
<script>
  const form = document.querySelector('form')
  const username = document.querySelector('#username')
  const password = document.querySelector('#password')
  const display = document.querySelector('.error')
  form.addEventListener('submit', async (e) => {
     e.preventDefault()
     display.textContent = ''
     try {
       const res = await fetch('/api/auth/register', {
       method: 'POST',
        body: JSON.stringify({ username: username.value, password: password.value }),
       headers: { 'Content-Type': 'application/json' }
       })
       const data = await res.json()
       if(res.status === 400 || res.status === 401){
        return display.textContent = `${data.message}. ${data.error ? data.error : ''}`
       }
       data.role === "admin" ? location.assign('/admin') : location.assign('/basic')
        } catch (err) {
          console.log(err.message)
        }
      })
script>
body>
html>

The code snippet uses JavaScript's in-built library called fetch to send a POST request to /api/auth/register.

After the request has been sent, it stores the response to a constant res.

res.json will return the JSON you've passed as a response in the API.

When res.json returns the data, you store that data in a constant data.

If you get an error while making the request, display the error to the user. If an error isn't found, redirect the user based on their role on different routes.

Creating your login form and adding functionality to it will be similar to that of your registration. Open login.ejs and create this form:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Pagetitle>
  head>
  <body>
    <h1>Login Pageh1>
    <form>
      <div class="error" style="background-color: red;">div>
      <br />
      <label for="username">Usernamelabel><br />
      <input type="text" id="username" required /><br />
      <label for="password">Passwordlabel><br />
      <input type="password" id="password" required /><br />
      <input type="submit" value="login" /><br />
    form>
    <a href="/register">Don't have an accout? Registera>
  body>
html>

Add POST Request Functionality

    <script>
      const form = document.querySelector('form')
      const username = document.querySelector('#username')
      const password = document.querySelector('#password')
      const display = document.querySelector('.error')
      form.addEventListener('submit', async (e) => {
        e.preventDefault()
        display.textContent = ''
        try {
          const res = await fetch('/api/auth/login', {
            method: 'POST',
            body: JSON.stringify({ username: username.value, password: password.value }),
            headers: { 'Content-Type': 'application/json' }
            })
          const data = await res.json()
          if (res.status === 400 || res.status === 401) {
            return display.textContent = `${data.message}. ${data.error ? data.error : ''}`
          }
          data.role === "admin" ? location.assign('/admin') : location.assign('/basic')
        } catch (err) {
            console.log(err.message)
          }

        })
      script>
    body>
    html>

Add Registered Users to the Route

Once you've redirected users based on role to different routes, display all registered users on that route. You need to send a GET request to /getUsers.

Open auth.js file in Auth folder:

exports.getUsers = async (req, res, next) => {
  await User.find({})
    .then(users => {
      const userFunction = users.map(user => {
        const container = {}
        container.username = user.username
        container.role = user.role
        return container
      })
      res.status(200).json({ user: userFunction })
    })
    .catch(err =>
      res.status(401).json({ message: "Not successful", error: err.message })
    )
}

The User.find method returns an array of users. After mapping through this array, it stores the username and role in the constant container and returns the container.

Display Registered User in `user` Route

You've rendered user.ejs when accessing the /user route. Now, you'll display all registered users to that route.

user.ejs:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>User pagetitle>
  head>
  <body>
    <h1>Usersh1>
    <ul>ul>
    <script>
      const ul = document.querySelector("ul")
      const getUsers = async () => {
        const res = await fetch("/api/auth/getUsers")
        const data = await res.json()
        data.user.map(mappedUser => {
          if (mappedUser.username !== "admin") {
            let li = ` Username => ${mappedUser.username} 
 Role => ${mappedUser.role} 
`
            ul.innerHTML += li
          } else {
            return null
          }
        })
      }
      getUsers()
    script>
  body>
html>

Add Update and Delete Function to the Admin Route

You'll also display registered users to the admin route but add update and delete functionality to the route:

admin.ejs:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin pagetitle>
  head>
  <body>
    <div class="display" style="background-color: red;">div>
    <h1>Usersh1>
    <ul>ul>
    <script>
      const ul = document.querySelector("ul")
      const display = document.querySelector(".display")
      const getUsers = async () => {
        const res = await fetch("/api/auth/getUsers")
        const data = await res.json()
        data.user.map(mappedUser => {
          if (mappedUser.username !== "admin") {
            let li = ` Username => ${mappedUser.username} 
 Role => ${mappedUser.role} 
  `
            ul.innerHTML += li
          } else {
            return null
          }
          const editRole = document.querySelectorAll(".edit")
          const deleteUser = document.querySelector(".delete")
        })
      }
      getUsers()
    script>
  body>
html>

Edit a User's Role

You'll create an event listener that will listen for a click on the Edit Role button. When the button is clicked, you'll send a PUT request to /api/auth/update:

<script>

    ...

    const editRole = document.querySelectorAll('.edit')
    const deleteUser = document.querySelector('.delete')
  editRole.forEach((button, i) => {
    button.addEventListener('click', async() => {
      display.textContent= ''
      const id = data.user[i+1].id
      const res = await fetch('/api/auth/update', {
      method: 'PUT',
      body: JSON.stringify({ role: 'admin', id}),
      headers: { 'Content-Type': 'application/json' }
      })
      const dataUpdate = await res.json()
      if (res.status === 400 || res.status === 401) {
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
        return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`
      }
      location.assign('/admin')
      })
    });

      ...
script>

Delete Users

Deleting Users from the database should be the duty of an admin.

admin.ejs:

<script>

  ...

  const editRole = document.querySelectorAll('.edit')
  const deleteUser = document.querySelector('.delete')
  deleteUser.forEach((button, i)=> {
   button.addEventListener('click', async ()=> {
   display.textContent =''
   const id = data.user[i+1].id
   const res = await fetch('/api/auth/deleteUser', {
     method: 'DELETE',
     body: JSON.stringify({id}),
     headers: {'Content-Type': 'application/json'}
     })
   const dataDelete = await res.json()
   if (res.status === 401){
     document.body.scrollTop = 0
     document.documentElement.scrollTop = 0
     return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`
   }
   location.assign('/admin')
    })
  })

   ...
script>

You've created an event listener that listens for a click on the Delete User button. When the button is clicked, you'll send a DELETE request to /api/auth/deleteUser.

Please ensure the admin user is first on the list to avoid populating the database with an admin user again.

Logout Functionality

To log out users, you need to remove the token from the client and redirect the client to the home page.

You'll create a GET request to /logout in the server.js file:

app.get("/logout", (req, res) => {
  res.cookie("jwt", "", { maxAge: "1" })
  res.redirect("/")
})

The code snippet replaced the JWT token with an empty string and gave it a lifespan of 1 second.

After creating the GET request, add a logout button to the admin's route and user's route:

...
<ul>ul>
<button class="logout"><a href="/logout">Log Outa>button>
...

Node.js Authentication with LoginRadius

You can simply replace the many steps discussed above using LoginRadius. In turn, it helps you focus more on developing core application features while letting you quickly implement user signup and login and manager users.

In other words, LoginRadius is a SaaS-based customer identity and access management (CIAM) system with features to manage customer identity, privacy, and access. It is a simple, implementable solution for adding user authentication and authorization to your website.

Basically, LoginRadius handles user registration, login, and authentication. Other features of LoginRadius include:

Forms: LoginRadius can automatically pre-create registration and login forms for you.
Authentication and Authorization: It generates and sends a token to the user when login or signup is successful. Instead of using JWT, you can use this token to authenticate users
Security: When using LoginRadius, you automatically have access to an admin console where you can control authentication factors, such as email, phone, and multi-factor auth for your Node.js app.

To get started with LoginRadius, you need to create an account with either the free plan or the Developer plan, customize your registration and login forms, and start managing your users.

How to Authenticate Your Node.js App with LoginRadius

This section briefly covers how authentication works with LoginRadius.

After signing up for LoginRadius, choose a name for your Node.js app.

After completing your LoginRadius signup process, you can get your App Name, API Key, and API Secret from the configuration link on the sidebar. With these configurations, you can easily link the server-side of our application to LoginRadius.

LoginRadius automatically generates a link that will be used to authenticate users. This link contains the name of your LoginRadius application and a URL that authenticated users will be redirected to:

https://.hub.loginradius.com/auth.aspx?action=login&return_url=

An instance of the link is given below:

https://noderoleauth.hub.loginradius.com/auth.aspx?action=login&return_url=http://localhost:5000

Conclusion

You've successfully learned how to perform CRUD operations using MongoDB as a database, hash passwords, authenticate using JWT, and render Embedded JavaScript (EJS). You can put all these together to build more complex applications.

Resources

A full, working version of the code used in this tutorial is available on GitHub
Node.js Authentication with LoginRadius

Written by Uma Victor

I am a software developer based in Nigeria, familiar with a variety of different web technologies/frameworks and keen on always finding ways to explain things as simply as possible.

Category:

Author * / Link

Title

<section class="cardlist-module--pinnedwrap--tMeSN cardlist-module--post-detail--uAY5I py-96" style="padding: 96px 0px; color: rgb(65, 72, 78); font-family: Barlow, Helvetica, Arial, sans-serif; font-size: 16px;"><div class="cardlist-module--blog-content-pinned--1__C9" style="overflow: hidden; margin: -15px auto; padding: 0px 24px; max-width: 1248px; display: flex;"><div style="width: 600px; display: flex; flex-direction: column; padding: 15px 0px; filter: brightness(0.95);"><div><h1 style="font-size: 40px; margin-top: 0px; margin-bottom: 12px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 48px;">Node.js User Authentication Guide</h1><div class="cardlist-module--text--3QLKM" style="margin-bottom: 36px; font-weight: 600;">By <a href="https://www.loginradius.com/blog/author/uma-victor/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s;">Uma Victor</a></div>Want to authenticate and manage users with specific roles in your Node.js app? This in-depth tutorial explains everything step-by-step to help you implement authentication in your Node.js apps.</div><div class="cardlist-module--tag--3NwSf cardlist-module--pinned--2ZuSK"><a href="https://www.loginradius.com/blog/tags/jwt/" style="background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; border-radius: 100px; padding: 6px 12px; border: 2px solid rgb(0, 142, 207); margin-right: 18px; margin-bottom: 18px; display: inline-flex; height: auto; text-transform: capitalize; font-size: 1rem; line-height: 1;">JWT</a><a href="https://www.loginradius.com/blog/tags/authentication/" style="background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; border-radius: 100px; padding: 6px 12px; border: 2px solid rgb(0, 142, 207); margin-right: 18px; margin-bottom: 18px; display: inline-flex; height: auto; text-transform: capitalize; font-size: 1rem; line-height: 1;">Authentication</a><a href="https://www.loginradius.com/blog/tags/node-js/" style="background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; border-radius: 100px; padding: 6px 12px; border: 2px solid rgb(0, 142, 207); margin-right: 18px; margin-bottom: 18px; display: inline-flex; height: auto; text-transform: capitalize; font-size: 1rem; line-height: 1;">Node.Js</a></div></div><div class="cardlist-module--avatar-pinned--1F7Lg" style="width: 600px; display: flex; flex-direction: column; padding: 15px 0px 15px 48px; filter: brightness(0.95);"><div class="bs-md gatsby-image-wrapper" style="border-radius: 8px; height: 402px; position: relative; overflow: hidden;"><div aria-hidden="true" style="width: 552.003px; padding-bottom: 289.801px;"></div><picture><source srcset="/blog/static/2bf56fe9f3665d6ea50e762f073b6531/3dcee/coverimage.jpg 200w,
/blog/static/2bf56fe9f3665d6ea50e762f073b6531/ae6ae/coverimage.jpg 400w,
/blog/static/2bf56fe9f3665d6ea50e762f073b6531/701ee/coverimage.jpg 800w,
/blog/static/2bf56fe9f3665d6ea50e762f073b6531/68a4a/coverimage.jpg 1034w" sizes="(max-width: 800px) 100vw, 800px"><img sizes="(max-width: 800px) 100vw, 800px" srcset="/blog/static/2bf56fe9f3665d6ea50e762f073b6531/3dcee/coverimage.jpg 200w,
/blog/static/2bf56fe9f3665d6ea50e762f073b6531/ae6ae/coverimage.jpg 400w,
/blog/static/2bf56fe9f3665d6ea50e762f073b6531/701ee/coverimage.jpg 800w,
/blog/static/2bf56fe9f3665d6ea50e762f073b6531/68a4a/coverimage.jpg 1034w" src="https://www.loginradius.com/blog/static/2bf56fe9f3665d6ea50e762f073b6531/701ee/coverimage.jpg" alt="Node.js User Authentication Guide" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; border-radius: 8px; transition: opacity 500ms ease 0s; position: absolute; top: 0px; left: 0px; width: 552.003px; height: 401.989px; object-fit: cover; object-position: center center; opacity: 1;"></picture></div></div></div></section><section class="post-module--post-detail--RJ_OW" style="color: rgb(65, 72, 78); font-family: Barlow, Helvetica, Arial, sans-serif; font-size: 16px;"><div style="overflow: hidden; margin: 0px auto; padding: 0px 24px; max-width: 1248px;"><div class="post-module--post-detail-inner--3vqmo pt-96 grid-67-33" style="padding-top: 96px; display: flex; flex-wrap: wrap; border-top: 1px solid rgb(209, 211, 212);"><div style="display: inline-block; vertical-align: top; margin-right: 72px; width: calc(67% - 36px);"><div class="post-module--post-content--1CCJw"><h2 id="introduction" style="margin: 0px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#introduction" aria-label="introduction permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h2>Creating a user registration form employs the management of the registered user. This is where user role authentication comes into play. Role authentication ensures that non-admin users cannot make changes or access exclusive information. It grants administrative privileges to admin users and basic privileges to basic users.You can build your own authentication functionality with web tokens like JSON Web Token (JWT) or use a trusted third-party customer identity and access management (CIAM) software like <a href="https://accounts.loginradius.com/auth.aspx?action=register" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">LoginRadius</a>.<h2 id="goal" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#goal" aria-label="goal permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Goal</h2>This tutorial helps you:<ul style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px 0px 0px 24px; list-style-position: outside; list-style-image: none; font-size: 1.125rem; line-height: 32px;"><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">understand the differences between the Admin role and the Basic user role;</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">use JWT to authenticate users; and</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">learn role-based authentication using JWT in a simple Node.js app.</li></ul><h2 id="prerequisites" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#prerequisites" aria-label="prerequisites permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequisites</h2>You have installed the following:<ul style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px 0px 0px 24px; list-style-position: outside; list-style-image: none; font-size: 1.125rem; line-height: 32px;"><li style="margin-bottom: calc(0.725rem); padding-left: 0px;"><a href="https://nodejs.org/en/download/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">Node</a></li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;"><a href="https://www.mongodb.com/try/download/community" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">MongoDB</a></li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">a <a href="https://code.visualstudio.com/download" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">Text Editor</a></li></ul>You already understand JavaScript <a href="https://www.w3schools.com/js/js_es6.asp" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">E56 Syntax</a>.Now that everything is in place, let's set up your database.<h2 id="set-up-a-mongo-database" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#set-up-a-mongo-database" aria-label="set up a mongo database permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Set Up a Mongo Database</h2>You'll store all your user data — which includes username, password, and role — in MongoDB.Install a node package called Mongoose that will connect to MongoDB. Then create a user <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">schema</code> for your application.<pre class="grvsc-container dark-default-dark" data-language="js" data-index="0" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">npm init
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">npm install mongoose</code></pre><code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">npm init</code> sets up your new project and creates a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">package.json</code> file with the credentials.After installing mongoose, create a new file <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">db.js</code> in the project's directory and require <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">mongoose</code>.<pre class="grvsc-container dark-default-dark" data-language="js" data-index="1" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const Mongoose = require("mongoose")</code></pre>With the help of mongoose, you can connect your application to MongoDB:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="2" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">// db.js
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const Mongoose = require("mongoose")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const localDB = `mongodb://localhost:27017/role_auth`
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const connectDB = async () => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await Mongoose.connect(localDB, {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> useNewUrlParser: true,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> useUnifiedTopology: true,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> console.log("MongoDB Connected")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">module.exports = connectDB</code></pre>The code snippet here connects to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">mongodb://localhost:27017</code> and then specifies the name of the database <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">/role_auth</code>.The function <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">connectDB</code> awaits for the connection, which contains the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">URI</code> and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">options</code> as a second parameter. If it connects without errors, it will log out <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">MongoDB Connected</code>. Error issues will be fixed while connecting to the database. After this, it exported the function for use in the server.<h2 id="set-up-the-server" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#set-up-the-server" aria-label="set up the server permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Set Up the Server</h2>You need to install some dependencies that you'll use in this tutorial.<pre class="grvsc-container dark-default-dark" data-language="js" data-index="3" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> npm i express nodemon</code></pre><a href="https://expressjs.com/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">Express.js</a> is a Node.js framework for building web applications quickly and easily.<a href="https://www.npmjs.com/package/nodemon" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">Nodemon</a> is a tool that watches the file system and automatically restarts the server when there is a change.You require <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">express</code> in your application to listen for a connection on port <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">5000</code>. Create a new file <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server.js</code> in the root directory and create the listening event:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="4" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const express = require("express")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const app = express()
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const PORT = 5000
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.listen(PORT, () => console.log(`Server Connected to port ${PORT}`))</code></pre>The next step is to test your application. Open up your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">package.json</code> file and add the following to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">scripts</code>:<pre class="grvsc-container dark-default-dark" data-language="json" data-index="5" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">"scripts": {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> "start": "node server.js",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> "dev": "nodemon server.js"
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>Open your terminal and run <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">npm run dev</code> to start the server.<h2 id="connect-to-the-database" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#connect-to-the-database" aria-label="connect to the database permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Connect to the Database</h2>Earlier, you've created a function that connects to MongoDB and exported that function. Now import that function into your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server.js</code>:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="6" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const connectDB = require("./db");
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">//Connecting the Database
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">connectDB();</code></pre>You also need to create an error handler that catches every <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">unhandledRejection</code> error.<pre class="grvsc-container dark-default-dark" data-language="js" data-index="7" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const server = app.listen(PORT, () =>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> console.log(`Server Connected to port ${PORT}`)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">// Handling Error
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">process.on("unhandledRejection", err => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> console.log(`An error occurred: ${err.message}`)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> server.close(() => process.exit(1))
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">})</code></pre>The listening event is assigned to a constant <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">server</code>. If an <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">unhandledRejection</code> error occurs, it logs out the error and closes the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server</code> with an exit code of 1.<h2 id="create-user-schema" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#create-user-schema" aria-label="create user schema permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create User Schema</h2><a href="https://en.wikipedia.org/wiki/Database_schema" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">Schema</a> is like a blueprint that shows how the database will be constructed.You'll structure a user schema that contains username, password, and role.Create a new folder <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">model</code> in the project's directory, and create a file called <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">User.js</code>. Now open <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">User.js</code> and create the user schema:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="8" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">// user.js
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const Mongoose = require("mongoose")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const UserSchema = new Mongoose.Schema({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> username: {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> type: String,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> unique: true,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> required: true,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> },
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> password: {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> type: String,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> minlength: 6,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> required: true,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> },
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> role: {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> type: String,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> default: "Basic",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> required: true,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> },
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">})</code></pre>In the schema, the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">username</code> will be unique, required, and will accept <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">strings</code>.You've specified the minimum characters(6) the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">password</code> field will accept. The <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">role</code> field grants a default value (basic) that you can change if needed.Now, you need to create a user model and export it:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="9" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const User = Mongoose.model("user", UserSchema)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">module.exports = User</code></pre>You've created the user model by passing the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">UserSchema</code> as the second argument while the first argument is the name of the model <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">user</code>.<h2 id="perform-crud-operations" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#perform-crud-operations" aria-label="perform crud operations permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Perform CRUD Operations</h2>You'll create functions that handle:<ul style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px 0px 0px 24px; list-style-position: outside; list-style-image: none; font-size: 1.125rem; line-height: 32px;"><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">adding users;</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">getting all users;</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">updating the role of users; and,</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">deleting users.</li></ul><h3 id="register-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#register-function" aria-label="register function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Register Function</h3>As the name implies, this function will handle the registrations of users.Let's create a new folder named <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">Auth</code>. It will contain the Authentication file and the Route set-up file.After creating the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">Auth</code> folder, add two files — <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">Auth.js</code> and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">Route.js</code>.Now open up our <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">Auth.js</code> file and import that <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">User</code> model:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="10" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const User = require("../model/User")</code></pre>The next step is to create an <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">async</code> <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">express</code> function that will take the user's data and register it in the database.You need to use an <a href="https://expressjs.com/en/guide/writing-middleware.html" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s;">Express middleware</a> function that will grant access to the user's data from the body. You'll use this function in the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server.js</code> file:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="11" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const app = express()
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.use(express.json())</code></pre>Let's go back to your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">Auth.js</code> file and create the register function:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="12" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">// auth.js
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.register = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { username, password } = req.body
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (password.length < 6) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res.status(400).json({ message: "Password less than 6 characters" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> try {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await User.create({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> username,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> password,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }).then(user =>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(200).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "User successfully created",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> )
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } catch (err) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(401).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "User not successful created",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: error.mesage,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>The exported <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">register</code> function will be used to set up the routes. You got the username and password from the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">req.body</code> and created a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">tryCatch</code> block that will create the user if successful; else, it returns status code <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">401</code> with the error message.<h3 id="set-up-register-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#set-up-register-route" aria-label="set up register route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Set Up Register Route</h3>You'll create a route to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">/register</code> using <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">express.Router</code>. Import the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">register</code> function into your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">route.js</code> file, and use it as the route's function:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="13" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const express = require("express")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const router = express.Router()
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const { register } = require("./auth")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">router.route("/register").post(register)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">module.exports = router</code></pre>The last step is to import your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">route.js</code> file as middleware in <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server.js</code>:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="14" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.use("/api/auth", require("./Auth/route"))</code></pre>The server will use the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">router</code> middleware function if there is a request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">/api/auth</code>.<h3 id="test-the-register-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#test-the-register-route" aria-label="test the register route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test the Register Route</h3>You'll use <a href="https://www.postman.com/downloads/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">Postman</a> to test all the routes.Open up Postman to send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">POST</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">http://localhost:5000/api/auth/register</code> and pass the username and password to the body:<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/3bb206a88072e393dc27b5b37720506c/97cd8/registerRoute.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 392.259px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd1jJKD/xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAEFAl//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAYEAEAAwEAAAAAAAAAAAAAAAABABEhEP/aAAgBAQABPyEqZKDAqHf/2gAMAwEAAgADAAAAENPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARECFBUf/aAAgBAQABPxAKusrxA4MHAqA00YZ//9k="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="Register Route" title="Register Route" src="https://www.loginradius.com/blog/static/3bb206a88072e393dc27b5b37720506c/212bf/registerRoute.jpg" srcset="/blog/static/3bb206a88072e393dc27b5b37720506c/6aca1/registerRoute.jpg 650w,
/blog/static/3bb206a88072e393dc27b5b37720506c/212bf/registerRoute.jpg 768w,
/blog/static/3bb206a88072e393dc27b5b37720506c/97cd8/registerRoute.jpg 1060w" sizes="(max-width: 768px) 100vw, 768px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 767.997px; height: 392.259px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a><h3 id="login-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#login-function" aria-label="login function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Login Function</h3>You've created a function that adds registered users to the database. You have to create another function that will authenticate user credentials and check if the user is registered.Open the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">Auth.js</code> file and create the Login function, as follows:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="15" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">// auth.js
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.login = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { username, password } = req.body
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // Check if username and password is provided
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (!username || !password) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "Username or Password not present",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>The <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">login</code> function returns status code <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">400</code> if the username and password were not provided. You need to find a user with the provided <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">username</code> and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">password</code>:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="16" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.login = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> try {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const user = await User.findOne({ username, password })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (!user) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(401).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "Login not successful",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: "User not found",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(200).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "Login successful",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } catch (error) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "An error occurred",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: error.message,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>Here, it returns status code <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">401</code> when a user isn't found and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">200</code> when a user is found. The code snippet wrapped all this in a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">tryCatch</code> block to detect and output errors, if any.<h3 id="set-up-login-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#set-up-login-route" aria-label="set up login route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Set Up Login Route</h3>To set up the login route, import the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">login</code> function into your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">route.js</code>:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="17" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const express = require("express");
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const router = express.Router();
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const { register, login } = require("./auth");
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">router.route("/login").post(login);
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">module.exports = router;</code></pre><h3 id="test-the-login-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#test-the-login-route" aria-label="test the login route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test the Login Route</h3>Make a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">POST</code> request at <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">http://localhost:5000/api/auth/login</code> and pass a valid username and password to the body:<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/0f67758e378cca70ea140a8a70d5e8e7/b1315/loginroute.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 412.344px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd1jJKD/xAAXEAEAAwAAAAAAAAAAAAAAAAABEBEg/9oACAEBAAEFAooMf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABcQAQEBAQAAAAAAAAAAAAAAAAEAERD/2gAIAQEAAT8hMsIBgBB3/9oADAMBAAIAAwAAABDzz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQEBAAMAAAAAAAAAAAAAAAEREAAhUf/aAAgBAQABPxAKNLhII8CcKDO5v//Z"); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="login Route" title="login Route" src="https://www.loginradius.com/blog/static/0f67758e378cca70ea140a8a70d5e8e7/212bf/loginroute.jpg" srcset="/blog/static/0f67758e378cca70ea140a8a70d5e8e7/6aca1/loginroute.jpg 650w,
/blog/static/0f67758e378cca70ea140a8a70d5e8e7/212bf/loginroute.jpg 768w,
/blog/static/0f67758e378cca70ea140a8a70d5e8e7/b1315/loginroute.jpg 1047w" sizes="(max-width: 768px) 100vw, 768px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 767.997px; height: 412.344px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a><h3 id="update-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#update-function" aria-label="update function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Update Function</h3>This function will be responsibile for updating the role of a basic user to an admin user. Open the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">auth.js</code> file and create the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">update</code> function, as follows:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="18" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">//auth.js
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.update = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { role, id } = req.body
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // Verifying if role and id is presnt
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (role && id) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // Verifying if the value of role is admin
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (role === "admin") {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await User.findById(id)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "Role is not admin",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({ message: "Role or Id not present" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>The first <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">if</code> statement verifies if <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">role</code> and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">id</code> are present in the request body.The second <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">if</code> statement checks if the value of <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">role</code> is admin. You should do this to avoid having over two roles.After finding a user with that ID, you'll create a third <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">if</code> block that will check for the role of the user:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="19" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.update = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { role, id } = req.body;
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // First - Verifying if role and id is presnt
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (role && id) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // Second - Verifying if the value of role is admin
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (role === "admin") {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // Finds the user with the id
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await User.findById(id)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .then((user) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // Third - Verifies the user is not an admin
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (user.role !== "admin") {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user.role = role;
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user.save((err) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> //Monogodb error checker
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (err) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .status("400")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .json({ message: "An error occurred", error: err.message });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> process.exit(1);
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status("201").json({ message: "Update successful", user });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({ message: "User is already an Admin" });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .catch((error) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .status(400)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .json({ message: "An error occurred", error: error.message });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...</code></pre>The third <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">if</code> block prevents assigning an admin role to an admin user, while the last <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">if</code> block checks if an error occurred when saving the role in the database.<blockquote style="margin-bottom: 30px; padding: 8px 16px; border-radius: 0px 6px 6px 0px; border-width: 1px 1px 1px 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-color: rgb(239, 239, 239) rgb(239, 239, 239) rgb(239, 239, 239) rgb(0, 142, 207); border-image: initial; font-style: italic;">The numerous <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">if</code> statements might be a little bit tricky but understandable. Please read the comments in the above code block for better understanding.</blockquote><h3 id="set-up-update-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#set-up-update-route" aria-label="set up update route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Set Up Update Route</h3>Import the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">update</code> function in your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">route.js</code>, as follows:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="20" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const { register, login, update } = require("./auth");
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">router.route("/update").put(update);</code></pre><h3 id="testing-the-update-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#testing-the-update-route" aria-label="testing the update route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the Update Route</h3>Send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">put</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">http://localhost:5000/api/auth/update</code>:<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/dd7a2de900844aa47a856f4e6812300b/95a07/updateroute.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 430.071px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd1jJKD/xAAXEAADAQAAAAAAAAAAAAAAAAAAARAh/9oACAEBAAEFApiFf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABcQAQEBAQAAAAAAAAAAAAAAAAEAERD/2gAIAQEAAT8hAsgDACHf/9oADAMBAAIAAwAAABDTz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQEBAAMBAAAAAAAAAAAAAAERABAhUfD/2gAIAQEAAT8QRFS6PjRCPAmCDO5z/9k="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="update Route" title="update Route" src="https://www.loginradius.com/blog/static/dd7a2de900844aa47a856f4e6812300b/212bf/updateroute.jpg" srcset="/blog/static/dd7a2de900844aa47a856f4e6812300b/6aca1/updateroute.jpg 650w,
/blog/static/dd7a2de900844aa47a856f4e6812300b/212bf/updateroute.jpg 768w,
/blog/static/dd7a2de900844aa47a856f4e6812300b/95a07/updateroute.jpg 1042w" sizes="(max-width: 768px) 100vw, 768px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 767.997px; height: 430.071px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a><h3 id="delete-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#delete-function" aria-label="delete function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Delete Function</h3>The <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">deleteUser</code> function will remove a specific user from the database. Let's create this function in our <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">auth.js</code> file:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="21" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.deleteUser = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { id } = req.body
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await User.findById(id)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .then(user => user.remove())
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .then(user =>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(201).json({ message: "User successfully deleted", user })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> )
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .catch(error =>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .status(400)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .json({ message: "An error occurred", error: error.message })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> )
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>You remove the user based on the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">id</code> you get from <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">req.body</code>.<h3 id="set-up-the-deleteuser-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#set-up-the-deleteuser-route" aria-label="set up the deleteuser route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Set up the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">deleteUser</code> Route</h3>Open your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">route.js</code> file to create a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">delete</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">/deleteUser</code>, using the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">deleteUser</code> as its function:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="22" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const { register, login, update, deleteUser } = require("./auth");
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">router.route("/deleteUser").delete(deleteUser);</code></pre><h3 id="test-the-deleteuser-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#test-the-deleteuser-route" aria-label="test the deleteuser route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">deleteUser</code> Route</h3>Send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">delete</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">http://localhost:5000/api/auth/deleteUser</code> by passing a valid <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">id</code> to the body:<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/268e9526fe7fdc3a4de9e847c2b164f6/b1315/deleteroute.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 409.986px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd1sJKD/xAAXEAEAAwAAAAAAAAAAAAAAAAABEBEg/9oACAEBAAEFAooMf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABcQAQEBAQAAAAAAAAAAAAAAAAEAERD/2gAIAQEAAT8hwsgGAEHf/9oADAMBAAIAAwAAABDTz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQADAAMAAAAAAAAAAAAAAAEAESEQMVH/2gAIAQEAAT8QLOyUlQR4FQDQ3n//2Q=="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="Delete Route" title="Delete Route" src="https://www.loginradius.com/blog/static/268e9526fe7fdc3a4de9e847c2b164f6/212bf/deleteroute.jpg" srcset="/blog/static/268e9526fe7fdc3a4de9e847c2b164f6/6aca1/deleteroute.jpg 650w,
/blog/static/268e9526fe7fdc3a4de9e847c2b164f6/212bf/deleteroute.jpg 768w,
/blog/static/268e9526fe7fdc3a4de9e847c2b164f6/b1315/deleteroute.jpg 1047w" sizes="(max-width: 768px) 100vw, 768px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 767.997px; height: 409.986px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a><h2 id="hash-user-passwords" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#hash-user-passwords" aria-label="hash user passwords permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hash User Passwords</h2>Saving user passwords in the database in plain text format is reckless. It is preferable to hash your password before storing it.For instance, it will be tough to decipher the passwords in your database if they are leaked. Hashing passwords is a cautious and reliable practice.Let's use <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">bcryptjs</code> to hash your user passwords.Lets install <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">bcryptjs</code>:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="23" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">npm i bcryptjs</code></pre>After installing <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">bcryptjs</code>, import it into your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">auth.js</code><pre class="grvsc-container dark-default-dark" data-language="js" data-index="24" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const bcrypt = require("bcryptjs")</code></pre><h3 id="refactor-register-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#refactor-register-function" aria-label="refactor register function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Refactor Register Function</h3>Instead of sending a plain text format to your database, lets hash the password using <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">bcrypt</code>:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="25" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.register = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { username, password } = req.body;
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> bcrypt.hash(password, 10).then(async (hash) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await User.create({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> username,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> password: hash,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .then((user) =>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(200).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "User successfully created",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> )
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .catch((error) =>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "User not successful created",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: error.message,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> );
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">};</code></pre><code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">bcrypt</code> takes in your password as the first argument and the number of times it will hash the password as the second argument. Passing a large number will take <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">bcrypt</code> a long time to hash the password, so give a moderate number like 10.<code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">bcrypt</code> will return a promise with the hashed password; then, send that hashed password to the database.<h3 id="test-the-register-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#test-the-register-function" aria-label="test the register function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test the Register Function</h3>Send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">POST</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">http://localhost:5000/api/auth/register</code> and pass the username and password to the body:<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/3bb206a88072e393dc27b5b37720506c/97cd8/Hashedregisterroute.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 392.259px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd1jJKD/xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAEFAl//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAYEAEAAwEAAAAAAAAAAAAAAAABABEhEP/aAAgBAQABPyEqZKDAqHf/2gAMAwEAAgADAAAAENPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARECFBUf/aAAgBAQABPxAKusrxA4MHAqA00YZ//9k="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="Register Route" title="Register Route" src="https://www.loginradius.com/blog/static/3bb206a88072e393dc27b5b37720506c/212bf/Hashedregisterroute.jpg" srcset="/blog/static/3bb206a88072e393dc27b5b37720506c/6aca1/Hashedregisterroute.jpg 650w,
/blog/static/3bb206a88072e393dc27b5b37720506c/212bf/Hashedregisterroute.jpg 768w,
/blog/static/3bb206a88072e393dc27b5b37720506c/97cd8/Hashedregisterroute.jpg 1060w" sizes="(max-width: 768px) 100vw, 768px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 767.997px; height: 392.259px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a><h3 id="refactor-the-login-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#refactor-the-login-function" aria-label="refactor the login function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Refactor the Login Function</h3><pre class="grvsc-container dark-default-dark" data-language="js" data-index="26" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.login = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { username, password } = req.body
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // Check if username and password is provided
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (!username || !password) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "Username or Password not present",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> try {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const user = await User.findOne({ username })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (!user) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "Login not successful",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: "User not found",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> // comparing given password with hashed password
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> bcrypt.compare(password, user.password).then(function (result) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> result
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ? res.status(200).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "Login successful",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> : res.status(400).json({ message: "Login not succesful" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } catch (error) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "An error occurred",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: error.message,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre><code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">bcrypt.compare</code> checks if the given password and the hashed password in the database are the same.<h3 id="test-the-login-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#test-the-login-function" aria-label="test the login function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test the Login Function</h3>Send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">POST</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">http://localhost:5000/api/auth/login</code> and pass a valid username and password to the body:<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/3a5e61b1165a58a1f43da0efe52aeb37/9ecec/hashedloginroute.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 411.165px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe8aSof/xAAXEAEAAwAAAAAAAAAAAAAAAAABEBEg/9oACAEBAAEFAooMf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABcQAQEBAQAAAAAAAAAAAAAAAAERABD/2gAIAQEAAT8hhoYBAhp3/9oADAMBAAIAAwAAABBzz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQEAAwEBAAAAAAAAAAAAAAEAESExUaH/2gAIAQEAAT8QMnraOfIgcOAYCCbxBN//2Q=="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="Hashed Login Route" title="Hashed Login Route" src="https://www.loginradius.com/blog/static/3a5e61b1165a58a1f43da0efe52aeb37/212bf/hashedloginroute.jpg" srcset="/blog/static/3a5e61b1165a58a1f43da0efe52aeb37/6aca1/hashedloginroute.jpg 650w,
/blog/static/3a5e61b1165a58a1f43da0efe52aeb37/212bf/hashedloginroute.jpg 768w,
/blog/static/3a5e61b1165a58a1f43da0efe52aeb37/9ecec/hashedloginroute.jpg 1050w" sizes="(max-width: 768px) 100vw, 768px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 767.997px; height: 411.165px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a><h2 id="authenticate-users-with-json-web-token-jwt" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#authenticate-users-with-json-web-token-jwt" aria-label="authenticate users with json web token jwt permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Authenticate Users with JSON Web Token (JWT)</h2>JSON Web Token helps shield a route from an unauthenticated user. Using JWT in your application will prevent unauthenticated users from accessing your users' home page and prevent unauthorized users from accessing your admin page.JWT creates a token, sends it to the client, and then the client uses the token for making requests. It also helps verify that you're a valid user making those requests.You've to install JWT before using it in your application:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="27" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">npm i jsonwebtoken</code></pre><h3 id="refactor-the-register-function" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#refactor-the-register-function" aria-label="refactor the register function permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Refactor the Register Function</h3>When a user registers, you'll send a token to the client using JWT as a cookie. To create this token, you need to set a secret string. You'll use the node's in-built package called <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">crypto</code> to create random strings:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="28" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">node
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">require("crypto").randomBytes(35).toString("hex")</code></pre>Output:<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/eef145060f999eac67fd7387d3ce3de3/5db71/crypto.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 136.065px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcmFgH//xAAVEAEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQABBQKv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAGRAAAQUAAAAAAAAAAAAAAAAAAAEQEWFx/9oACAEBAAE/IcITTf/aAAwDAQACAAMAAAAQ88//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAACAgMAAAAAAAAAAAAAAAAAAREhQVHh/9oACAEBAAE/EJ8C2BK0j//Z"); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="Crypto" title="Crypto" src="https://www.loginradius.com/blog/static/eef145060f999eac67fd7387d3ce3de3/5db71/crypto.jpg" srcset="/blog/static/eef145060f999eac67fd7387d3ce3de3/6aca1/crypto.jpg 650w,
/blog/static/eef145060f999eac67fd7387d3ce3de3/5db71/crypto.jpg 731w" sizes="(max-width: 731px) 100vw, 731px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 730.994px; height: 136.065px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a>Storing this secret string in an environment variable is a safe practice. If this secret string is leaked, unauthenticated users can create fake tokens to access the route.Store your secret string in a variable:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="29" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const jwtSecret =
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"</code></pre>Once you've created your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">jwtSecret</code>, import <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">jsonwebtoken</code> as the token in the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">register</code> function:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="30" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const jwt = require('jsonwebtoken')
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const jwtSecret = '4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd'
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.register = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const { username, password } = req.body;
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> bcrypt.hash(password, 10).then(async (hash) => {
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await User.create({
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> username,
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> password: hash,
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .then((user) => {
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const maxAge = 3 * 60 * 60;
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const token = jwt.sign(
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> { id: user._id, username, role: user.role },
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> jwtSecret,
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> {
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> expiresIn: maxAge, // 3hrs in sec
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> );
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.cookie("jwt", token, {
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> httpOnly: true,
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> maxAge: maxAge * 1000, // 3hrs in ms
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(201).json({
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "User successfully created",
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user: user._id,
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .catch((error) =>
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "User not successful created",
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: error.message,
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> );
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 782.543px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">};</code></pre>The code snippet created the token using JWT's <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">sign</code> function. This function takes in three parameters:<ul style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px 0px 0px 24px; list-style-position: outside; list-style-image: none; font-size: 1.125rem; line-height: 32px;"><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">the payload is the first parament that you'll pass to the function. This payload holds data concerning the user, and this data should not contain sensitive information like passwords;</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">you passed your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">jwtSecret</code> as the second parameter; and,</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">how long the token will last as the third parameter.</li></ul>After passing all these arguments, JWT will generate a token. After the token is generated, send it as a cookie to the client.<h3 id="refactor-the-login-function-1" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#refactor-the-login-function-1" aria-label="refactor the login function 1 permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Refactor the Login Function</h3>Also, generate a token for logged in users:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="31" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.login = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> bcrypt.compare(password, user.password).then(function (result) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (result) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const maxAge = 3 * 60 * 60;
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const token = jwt.sign(
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> { id: user._id, username, role: user.role },
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> jwtSecret,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> expiresIn: maxAge, // 3hrs in sec
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> );
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.cookie("jwt", token, {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> httpOnly: true,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> maxAge: maxAge * 1000, // 3hrs in ms
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(201).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "User successfully Logged in",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> user: user._id,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({ message: "Login not succesful" });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } catch (error) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(400).json({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> message: "An error occurred",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> error: error.message,
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">};</code></pre><h3 id="protect-the-routes" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#protect-the-routes" aria-label="protect the routes permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Protect the Routes</h3>To prevent unauthenticated users from accessing the private route, take the token from the cookie, verify the token, and redirect users based on role.You'll get the token from the client using a node package called <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">cookie-parser</code>. Let's install the package before using it:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="32" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">npm i cookie-parser</code></pre>After installing it, import it into your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">server.js</code> file and use it as a middleware:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="33" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const cookieParser = require("cookie-parser");
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.use(cookieParser());</code></pre>You'll create your middleware that verifies the token and grants access to your private route.Let's create a new folder in the project's folder named <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">middleware</code> and create a file called <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">auth.js</code>.<h3 id="admin-authentication" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#admin-authentication" aria-label="admin authentication permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Admin Authentication</h3>Open the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">auth.js</code> file and create the middleware:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="34" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const jwt = require("jsonwebtoken")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const jwtSecret =
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.adminAuth = (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const token = req.cookies.jwt
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (token) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> jwt.verify(token, jwtSecret, (err, decodedToken) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (err) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res.status(401).json({ message: "Not authorized" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (decodedToken.role !== "admin") {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res.status(401).json({ message: "Not authorized" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> next()
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .status(401)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .json({ message: "Not authorized, token not available" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>The code snippet requests a token from the client, checks if a token is available, and verifies that token.JWT verifies your token with your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">jwtSecret</code> and returns a callback function. This function returns status code <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">401</code> if the token fails the authentication test.When you've created the token, you passed a payload that contained the user's credentials. You'll get the role from the credentials and check if the user's role is admin. If the user is not an admin, you return status code <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">401</code>, but you'll call the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">next</code> function if the user is an admin.<h3 id="basic-user-authentication" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#basic-user-authentication" aria-label="basic user authentication permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic User Authentication</h3>You'll also authenticate basic users before granting them access to the users route. Let's create another middleware in your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">auth.js</code> file that will authenticate basic users:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="35" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.userAuth = (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const token = req.cookies.jwt
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (token) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> jwt.verify(token, jwtSecret, (err, decodedToken) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (err) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res.status(401).json({ message: "Not authorized" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (decodedToken.role !== "Basic") {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res.status(401).json({ message: "Not authorized" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> next()
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return res
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .status(401)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .json({ message: "Not authorized, token not available" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre><h3 id="protect-the-routes-1" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#protect-the-routes-1" aria-label="protect the routes 1 permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Protect the Routes</h3>You'll have two routes: one for the user and the other for the admin. Let's import this middleware into your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server.js</code> file and protect your routes:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="36" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const { adminAuth, userAuth } = require("./middleware/auth.js");
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/admin", adminAuth, (req, res) => res.send("Admin Route"));
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/basic", userAuth, (req, res) => res.send("User Route"));</code></pre>Updating user roles and deleting users should be done by an Admin, so you need to import this <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">auth.js</code> middleware into your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">route.js</code> file to protect the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">update</code> and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">delete</code> routes.<code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">route.js</code>:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="37" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const { adminAuth } = require("../middleware/auth")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">router.route("/update").put(adminAuth, update)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">router.route("/deleteUser").delete(adminAuth, deleteUser)</code></pre><h2 id="populate-the-database-with-admin-user" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#populate-the-database-with-admin-user" aria-label="populate the database with admin user permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Populate the Database with Admin User</h2>You need to create an admin user in your database. Open up your terminal, and let's run some <a href="https://docs.mongodb.com/manual/reference/method/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">MongoDB methods</a>:<pre class="grvsc-container dark-default-dark" data-language="" data-index="38" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">mongo</code></pre>After mongo is started, you need to use the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">role_auth</code> database:<pre class="grvsc-container dark-default-dark" data-language="" data-index="39" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">use role_auth</code></pre>Before adding your admin user to the database, you need to hash the password using <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">bcrypt</code> in the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">node</code> terminal. Open node terminal in your project's directory:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="40" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">const password = require("bcryptjs").hash("admin", 10)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">password</code></pre>After you've created the constant <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">password</code>, you need to enter <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">the</code> <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">password</code> in the node terminal to get your hashed password.<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/a33fa24c5b901ff46d96bd719c1a1ba6/22d3c/nodebycrypt.jpg" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 130.795px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcqFgH//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAEFAn//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAE/IX//2gAMAwEAAgADAAAAEHAv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRAAAgMBAAAAAAAAAAAAAAAAAAERYZFx/9oACAEBAAE/EG5rhujSk//Z"); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="Node bcrypt" title="Node bcrypt" src="https://www.loginradius.com/blog/static/a33fa24c5b901ff46d96bd719c1a1ba6/22d3c/nodebycrypt.jpg" srcset="/blog/static/a33fa24c5b901ff46d96bd719c1a1ba6/6aca1/nodebycrypt.jpg 650w,
/blog/static/a33fa24c5b901ff46d96bd719c1a1ba6/22d3c/nodebycrypt.jpg 654w" sizes="(max-width: 654px) 100vw, 654px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 653.991px; height: 130.795px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a>You'll use the hashed password to create your admin:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="41" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">db.users.insert({
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> username: "admin",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> password: "$2a$10$mZwU9AbYSyX7E1A6fu/ZO.BDhmCOIK7k6jXvKcuJm93PyYuH2eZ3K",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> role: "admin",
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">})</code></pre>To check if it was successfully created, run <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">db.users.find().pretty()</code> — this will output all users in the database.<h2 id="create-the-login-form-using-ejs" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#create-the-login-form-using-ejs" aria-label="create the login form using ejs permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create the Login Form Using EJS</h2>You'll use Embedded JavaScript (EJS) to create a front-end for your application.Install the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">ejs</code> package:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="42" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> npm i ejs</code></pre>After you've installed <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">ejs</code>, you need to set <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">ejs</code> as your default view engine in your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server.js</code> file:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="43" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.set("view engine", "ejs")</code></pre><h3 id="render-embedded-javascript" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#render-embedded-javascript" aria-label="render embedded javascript permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Render Embedded JavaScript</h3>When making a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">GET</code> request to specific routes, you'll render an <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">ejs</code> file:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="44" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/", (req, res) => res.render("home"))
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/register", (req, res) => res.render("register"))
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/login", (req, res) => res.render("login"))
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/admin", adminAuth, (req, res) => res.render("admin"))
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/basic", userAuth, (req, res) => res.render("user"))</code></pre><h3 id="create-ejs-files" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#create-ejs-files" aria-label="create ejs files permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create EJS Files</h3>By default, your application will look into the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">views</code> folder when rendering an <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">ejs</code> file. You need to create the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">views</code> folder in your project's folder and add your <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">ejs</code> files to it<h3 id="create-a-home-page" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#create-a-home-page" aria-label="create a home page permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create a Home Page</h3>Your home page will contain the links to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">/login</code> and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">/register</code> ejs file. Open up <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">home.ejs</code> and add these links:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="45" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><!DOCTYPE html>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><html lang="en">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <head>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta charset="UTF-8" />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <title>Home page</title>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </head>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <body>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <h1>Home Page</h1>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <a href="/register"> Register</a> <br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <a href="/login">Login</a>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </body>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></html></code></pre><h3 id="create-a-registration-form" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#create-a-registration-form" aria-label="create a registration form permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create a Registration Form</h3>Embedded JavaScript (EJS) supports HTML syntax. You'll create the registration form in <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">register.ejs</code> using HTML syntax:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="46" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><!DOCTYPE html>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><html lang="en">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <head>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta charset="UTF-8" />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <title>Register Page</title>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </head>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <body>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <h1>Register Page</h1>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <form>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <div class="error" style="background-color: red;"></div>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <label for="username">Username</label><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <input type="text" id="username" required /><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <label for="password">Password</label><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <input type="password" id="password" required /><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <input type="submit" value="register" /><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </form>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <a href="/login">Already registered? Login</a>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </body>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></html></code></pre><h3 id="add-post-request-functionality" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#add-post-request-functionality" aria-label="add post request functionality permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Add POST Request Functionality</h3>You need to get the username and password that the user entered and pass it to the body when making the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">POST</code> request:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="47" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><script>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const form = document.querySelector('form')
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const username = document.querySelector('#username')
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const password = document.querySelector('#password')
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const display = document.querySelector('.error')
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> form.addEventListener('submit', async (e) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> e.preventDefault()
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> display.textContent = ''
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> try {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const res = await fetch('/api/auth/register', {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> method: 'POST',
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> body: JSON.stringify({ username: username.value, password: password.value }),
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> headers: { 'Content-Type': 'application/json' }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const data = await res.json()
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if(res.status === 400 || res.status === 401){
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return display.textContent = `${data.message}. ${data.error ? data.error : ''}`
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> data.role === "admin" ? location.assign('/admin') : location.assign('/basic')
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } catch (err) {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> console.log(err.message)
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></script>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></body>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></html></code></pre>The code snippet uses JavaScript's in-built library called <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">fetch</code> to send a POST request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">/api/auth/register</code>.After the request has been sent, it stores the response to a constant <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">res</code>.<code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">res.json</code> will return the JSON you've passed as a response in the API.When <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">res.json</code> returns the data, you store that data in a constant <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">data</code>.If you get an error while making the request, display the error to the user. If an error isn't found, redirect the user based on their role on different routes.<h3 id="create-a-login-form" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#create-a-login-form" aria-label="create a login form permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create a Login Form</h3>Creating your login form and adding functionality to it will be similar to that of your registration. Open <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">login.ejs</code> and create this form:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="48" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><!DOCTYPE html>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><html lang="en">
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <head>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta charset="UTF-8" />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <title>Login Page</title>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </head>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <body>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <h1>Login Page</h1>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <form>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <div class="error" style="background-color: red;"></div>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <label for="username">Username</label><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <input type="text" id="username" required /><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <label for="password">Password</label><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <input type="password" id="password" required /><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <input type="submit" value="login" /><br />
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </form>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <a href="/register">Don't have an accout? Register</a>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </body>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></html></code></pre><h3 id="add-post-request-functionality-1" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#add-post-request-functionality-1" aria-label="add post request functionality 1 permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Add POST Request Functionality</h3><pre class="grvsc-container dark-default-dark" data-language="html" data-index="49" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <script>
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const form = document.querySelector('form')
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const username = document.querySelector('#username')
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const password = document.querySelector('#password')
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const display = document.querySelector('.error')
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> form.addEventListener('submit', async (e) => {
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> e.preventDefault()
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> display.textContent = ''
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> try {
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const res = await fetch('/api/auth/login', {
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> method: 'POST',
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> body: JSON.stringify({ username: username.value, password: password.value }),
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> headers: { 'Content-Type': 'application/json' }
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const data = await res.json()
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (res.status === 400 || res.status === 401) {
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return display.textContent = `${data.message}. ${data.error ? data.error : ''}`
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> data.role === "admin" ? location.assign('/admin') : location.assign('/basic')
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } catch (err) {
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> console.log(err.message)
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </script>
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </body>
<span class="grvsc-line" style="display: inline-block; width: 790.852px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </html></code></pre><h2 id="add-registered-users-to-the-route" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#add-registered-users-to-the-route" aria-label="add registered users to the route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Add Registered Users to the Route</h2>Once you've redirected users based on role to different routes, display all registered users on that route. You need to send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">GET</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">/getUsers</code>.Open <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">auth.js</code> file in <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">Auth</code> folder:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="50" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">exports.getUsers = async (req, res, next) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> await User.find({})
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .then(users => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const userFunction = users.map(user => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const container = {}
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> container.username = user.username
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> container.role = user.role
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return container
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(200).json({ user: userFunction })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> .catch(err =>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.status(401).json({ message: "Not successful", error: err.message })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> )
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">}</code></pre>The <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">User.find</code> method returns an array of users. After mapping through this array, it stores the username and role in the constant <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">container</code> and returns the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">container</code>.<h3 id="display-registered-user-in-user-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#display-registered-user-in-user-route" aria-label="display registered user in user route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Display Registered User in <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">user</code> Route</h3>You've rendered <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">user.ejs</code> when accessing the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">/user</code> route. Now, you'll display all registered users to that route.<code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">user.ejs</code>:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="51" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><!DOCTYPE html>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><html lang="en">
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <head>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta charset="UTF-8" />
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <title>User page</title>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </head>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <body>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <h1>Users</h1>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <ul></ul>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <script>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const ul = document.querySelector("ul")
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const getUsers = async () => {
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const res = await fetch("/api/auth/getUsers")
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const data = await res.json()
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> data.user.map(mappedUser => {
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (mappedUser.username !== "admin") {
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> let li = `<li> Username => ${mappedUser.username} Role => ${mappedUser.role} </li>`
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ul.innerHTML += li
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return null
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> getUsers()
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </script>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </body>
<span class="grvsc-line" style="display: inline-block; width: 978.494px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></html></code></pre><h3 id="add-update-and-delete-function-to-the-admin-route" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#add-update-and-delete-function-to-the-admin-route" aria-label="add update and delete function to the admin route permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Add Update and Delete Function to the Admin Route</h3>You'll also display registered users to the admin route but add <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">update</code> and <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">delete</code> functionality to the route:<code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">admin.ejs</code>:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="52" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><!DOCTYPE html>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><html lang="en">
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <head>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta charset="UTF-8" />
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <title>Admin page</title>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </head>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <body>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <div class="display" style="background-color: red;"></div>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <h1>Users</h1>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <ul></ul>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> <script>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const ul = document.querySelector("ul")
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const display = document.querySelector(".display")
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const getUsers = async () => {
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const res = await fetch("/api/auth/getUsers")
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const data = await res.json()
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> data.user.map(mappedUser => {
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (mappedUser.username !== "admin") {
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> let li = `<li> Username => ${mappedUser.username} Role => ${mappedUser.role} </li> <button class="edit">Edit Role</button> <button class="delete">Delete User</button>`
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ul.innerHTML += li
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> } else {
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return null
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const editRole = document.querySelectorAll(".edit")
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const deleteUser = document.querySelector(".delete")
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> getUsers()
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </script>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> </body>
<span class="grvsc-line" style="display: inline-block; width: 1664.05px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></html></code></pre><h3 id="edit-a-users-role" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#edit-a-users-role" aria-label="edit a users role permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Edit a User's Role</h3>You'll create an event listener that will listen for a click on the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">Edit Role</code> button. When the button is clicked, you'll send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">PUT</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">/api/auth/update</code>:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="53" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><script>
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const editRole = document.querySelectorAll('.edit')
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const deleteUser = document.querySelector('.delete')
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> editRole.forEach((button, i) => {
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> button.addEventListener('click', async() => {
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> display.textContent= ''
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const id = data.user[i+1].id
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const res = await fetch('/api/auth/update', {
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> method: 'PUT',
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> body: JSON.stringify({ role: 'admin', id}),
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> headers: { 'Content-Type': 'application/json' }
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const dataUpdate = await res.json()
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (res.status === 400 || res.status === 401) {
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> document.body.scrollTop = 0
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> document.documentElement.scrollTop = 0
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> location.assign('/admin')
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> });
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...
<span class="grvsc-line" style="display: inline-block; width: 905.099px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></script></code></pre><h3 id="delete-users" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#delete-users" aria-label="delete users permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Delete Users</h3>Deleting Users from the database should be the duty of an admin.<code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">admin.ejs</code>:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="54" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><script>
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const editRole = document.querySelectorAll('.edit')
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const deleteUser = document.querySelector('.delete')
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> deleteUser.forEach((button, i)=> {
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> button.addEventListener('click', async ()=> {
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> display.textContent =''
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const id = data.user[i+1].id
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const res = await fetch('/api/auth/deleteUser', {
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> method: 'DELETE',
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> body: JSON.stringify({id}),
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> headers: {'Content-Type': 'application/json'}
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> const dataDelete = await res.json()
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> if (res.status === 401){
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> document.body.scrollTop = 0
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> document.documentElement.scrollTop = 0
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> }
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> location.assign('/admin')
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> })
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> ...
<span class="grvsc-line" style="display: inline-block; width: 880.611px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"></script></code></pre>You've created an event listener that listens for a click on the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">Delete User</code> button. When the button is clicked, you'll send a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">DELETE</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">/api/auth/deleteUser</code>.<blockquote style="margin-bottom: 30px; padding: 8px 16px; border-radius: 0px 6px 6px 0px; border-width: 1px 1px 1px 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-color: rgb(239, 239, 239) rgb(239, 239, 239) rgb(239, 239, 239) rgb(0, 142, 207); border-image: initial; font-style: italic;">Please ensure the admin user is first on the list to avoid populating the database with an admin user again.</blockquote><h2 id="logout-functionality" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#logout-functionality" aria-label="logout functionality permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Logout Functionality</h2>To log out users, you need to remove the token from the client and redirect the client to the home page.You'll create a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">GET</code> request to <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem;">/logout</code> in the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">server.js</code> file:<pre class="grvsc-container dark-default-dark" data-language="js" data-index="55" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">app.get("/logout", (req, res) => {
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.cookie("jwt", "", { maxAge: "1" })
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"> res.redirect("/")
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">})</code></pre>The code snippet replaced the JWT token with an empty string and gave it a lifespan of 1 second.After creating the <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">GET</code> request, add a logout button to the admin's route and user's route:<pre class="grvsc-container dark-default-dark" data-language="html" data-index="56" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><ul></ul>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));"><button class="logout"><a href="/logout">Log Out</a></button>
<span class="grvsc-line" style="display: inline-block; width: 767.997px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">...</code></pre><h2 id="nodejs-authentication-with-loginradius" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#nodejs-authentication-with-loginradius" aria-label="nodejs authentication with loginradius permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Node.js Authentication with LoginRadius</h2>You can simply replace the many steps discussed above using <a href="https://www.loginradius.com/docs/api/v2/getting-started/introduction/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">LoginRadius</a>. In turn, it helps you focus more on developing core application features while letting you quickly implement user signup and login and manager users.In other words, LoginRadius is a SaaS-based customer identity and access management (CIAM) system with features to manage customer identity, privacy, and access. It is a simple, implementable solution for adding user authentication and authorization to your website.Basically, LoginRadius handles user registration, login, and authentication. Other features of LoginRadius include:<ul style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px 0px 0px 24px; list-style-position: outside; list-style-image: none; font-size: 1.125rem; line-height: 32px;"><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">Forms: LoginRadius can automatically pre-create registration and login forms for you.</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;"><a href="https://www.loginradius.com/docs/developer/tutorial/node-js/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s;">Authentication and Authorization</a>: It generates and sends a token to the user when login or signup is successful. Instead of using <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">JWT</code>, you can use this token to authenticate users</li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">Security: When using LoginRadius, you automatically have access to an admin console where you can control authentication factors, such as email, phone, and multi-factor auth for your Node.js app.</li></ul>To get started with LoginRadius, you need to <a href="https://accounts.loginradius.com/auth.aspx?action=register" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">create an account</a> with either the free plan or the Developer plan, customize your registration and login forms, and start managing your users.<h3 id="how-to-authenticate-your-nodejs-app-with-loginradius" style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#how-to-authenticate-your-nodejs-app-with-loginradius" aria-label="how to authenticate your nodejs app with loginradius permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How to Authenticate Your Node.js App with LoginRadius</h3>This section briefly covers how authentication works with LoginRadius.After signing up for <a href="https://accounts.loginradius.com/auth.aspx?return_url=https://dashboard.loginradius.com/login&action=register" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">LoginRadius</a>, choose a name for your Node.js app.<blockquote style="margin-bottom: 30px; padding: 8px 16px; border-radius: 0px 6px 6px 0px; border-width: 1px 1px 1px 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-color: rgb(239, 239, 239) rgb(239, 239, 239) rgb(239, 239, 239) rgb(0, 142, 207); border-image: initial; font-style: italic;"><a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/a89764d477f8e3c676fd91f5cd3eff08/cad6c/loginradius.png" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 338.977px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABYklEQVQoz43SPUvDQBwG8NtMsdBFpY4WtbYibXGsxlLfFkEQRfwsTi4ugt/BwVWKUNBRQYQ6OWslUC0qSJpL0mvz9nhXk1Dj68FDDkJ+PPe/EGlyDjEeyU9sooh4RgZJ5nBcOYNYtuPgt+V5XrgnAvgLdF0XGtVhGCYcjtu2HUa881m4HCZSWoYkUB8W+Q6kuo43VYNlWSEm9gEYtCSj8jZSC5sYKKxBSs/38CgoWlHeTtUodA4z1gHrdEMkeF40dJBUcR1jPOPyBjLlLSRnVzHIYZLM94EujDaDSilMxsC6Vg8UcXhD1wd3qgpIYrqE+JR/7B+OLD4yeTunbYgBROIhuBNF6/IZciiaKCg+Orp9we5lAwe1Jg5vmti/fsLe1SPqKvuYczDDoFV/voC8Ye3ZxMldC9UHDecKxWldQ+W+hVfTDufYu+Wh3BKG88sYKawgMbOIWLaMeLb0CbTs//+H70m7F/ZJwLTCAAAAAElFTkSuQmCC"); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="LoginRadius - Enter your app name" title="LoginRadius - Enter your app name" src="https://www.loginradius.com/blog/static/a89764d477f8e3c676fd91f5cd3eff08/e5715/loginradius.png" srcset="/blog/static/a89764d477f8e3c676fd91f5cd3eff08/a6d36/loginradius.png 650w,
/blog/static/a89764d477f8e3c676fd91f5cd3eff08/e5715/loginradius.png 768w,
/blog/static/a89764d477f8e3c676fd91f5cd3eff08/cad6c/loginradius.png 1339w" sizes="(max-width: 768px) 100vw, 768px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 732.017px; height: 338.977px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a></blockquote>After completing your LoginRadius signup process, you can get your App Name, API Key, and API Secret from the <a href="https://dashboard.loginradius.com/configuration" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;"><code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">configuration</code></a> link on the sidebar. With these configurations, you can easily link the server-side of our application to LoginRadius.<a class="gatsby-resp-image-link" href="https://www.loginradius.com/blog/static/064c243d54fafb448b579eff0beff764/f058b/loginradius1.png" target="_blank" rel="noopener" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px; display: block;"><span class="gatsby-resp-image-background-image" style="padding-bottom: 295.994px; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABs0lEQVQoz2WSy04bMRiFTdlQFRAI1AUoFJCgUFoUKEhVINxEpC66huYRWsS+qdQn6TvwCCxYs2XXqFK5JGQmmUvG9lxz+tszodHU0tHvsexvzvlt9uJtBS+3PoHNl1A9/4FAuGjc/Ua7dQ+Pc0jf/18yrX72zYXU80bzEWy2uIuF7UMMF4o4+fINCCw45q1W4EuEYYggIPVrEGiFUYz8uH9ogL3aLGP5wxGezW3g9GuNgG245h9I10Acx6mSRCvJqdfrPUmNZqMJNrp6gMn1Y7L6Hp/PvgNJBNN4hG210fU8HSkidzHJz9ypGkWRhihYlKTAn9e3YONvCPjuCGxmA1UCqg0d24WQAbjqlZQwuxKGyAADEfvu4szhxU0zBU4XK2CFLXJYU7vQsWw4bleLcwHDFWhnwCQXs1/VumPbFHllD2Or+9qhityj3pgdm+JyOF1Px245HDeG0D/L9y1dS6fcdcBGlnYwsXb4zyGFUs48cqZ6FYYRPD9E3fKfDuYja1iY4PJXC+z56zKmNj9iaLGUXgoBLYps2w6EELqHSjE9IU7vktOaep/qcgYjewS8qrfwF+cda9cXdcRMAAAAAElFTkSuQmCC"); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"><img class="gatsby-resp-image-image" alt="LoginRadius API Credentials" title="LoginRadius API Credentials" src="https://www.loginradius.com/blog/static/064c243d54fafb448b579eff0beff764/f058b/loginradius1.png" srcset="/blog/static/064c243d54fafb448b579eff0beff764/f058b/loginradius1.png 630w" sizes="(max-width: 630px) 100vw, 630px" loading="lazy" style="max-width: 100%; margin: 0px; padding: 0px; display: block; width: 630px; height: 295.994px; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;"></a>LoginRadius automatically generates a link that will be used to authenticate users. This link contains the name of your LoginRadius application and a <code style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; margin-bottom: 0px;">URL</code> that authenticated users will be redirected to:<pre class="grvsc-container dark-default-dark" data-language="" data-index="57" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 839.631px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">https://<LoginRadius-APP-Name>.hub.loginradius.com/auth.aspx?action=login&return_url=<Return-URL></code></pre>An instance of the link is given below:<pre class="grvsc-container dark-default-dark" data-language="" data-index="58" style="font-family: monospace, monospace; font-size: 0.85rem; margin-bottom: 1.45rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); padding-left: 0px; padding-right: 0px; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); line-height: 1.45rem; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; background-color: rgb(30, 30, 30); color: rgb(212, 212, 212);"><code class="grvsc-code" style="font-family: monospace, monospace; font-size: 0.85rem; line-height: 1.45rem; display: inline-block; min-width: 100%;"><span class="grvsc-line" style="display: inline-block; width: 831.477px; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));">https://noderoleauth.hub.loginradius.com/auth.aspx?action=login&return_url=http://localhost:5000</code></pre><h2 id="conclusion" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#conclusion" aria-label="conclusion permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Conclusion</h2>You've successfully learned how to perform CRUD operations using MongoDB as a database, hash passwords, authenticate using JWT, and render Embedded JavaScript (EJS). You can put all these together to build more complex applications.<h2 id="resources" style="margin: 48px 0px 24px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; font-size: 32px; line-height: 40px; position: relative;"><a href="https://www.loginradius.com/blog/engineering/guest-post/nodejs-authentication-guide/#resources" aria-label="resources permalink" class="anchor before" style="color: rgb(65, 72, 78); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; position: absolute; top: 0px; left: 0px; transform: translateX(-100%); padding-right: 4px;"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Resources</h2><ul style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px 0px 0px 24px; list-style-position: outside; list-style-image: none; font-size: 1.125rem; line-height: 32px;"><li style="margin-bottom: calc(0.725rem); padding-left: 0px;">A full, working version of <a href="https://github.com/LoginRadius/engineering-blog-samples/tree/master/NodeJs/NodejsAuthenticationGuide" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">the code used in this tutorial is available on GitHub</a></li><li style="margin-bottom: calc(0.725rem); padding-left: 0px;"><a href="https://www.loginradius.com/docs/developer/tutorial/node-js/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s; margin-bottom: 0px;">Node.js Authentication with LoginRadius</a></li></ul></div><div class="post-module--author--1Rimj d-flex py-96" style="padding: 96px 0px; display: flex;"><div class="post-module--author-image--3UC1F" style="width: 100px; margin-right: 30px;"><a href="https://www.loginradius.com/blog/author/uma-victor/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s;"><img class="circle extra-large" src="https://github.com/uma-victor1.png?size=100" alt="Uma Victor" style="max-width: 100%; margin: 0px; padding: 0px; display: block; border-radius: 100%; width: 100px; height: 100px; transition: all 0.3s ease 0s;"></a></div><div class="post-module--about-author--2_4Bs" style="display: flex; flex-direction: column; flex: 1 1 0%;"><div class="post-module--about-author-inner--22_5i"><h3 style="margin: 0px 0px 15px; padding: 0px; font-family: Barlow, Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizelegibility; line-height: 32px;">Written by <a href="https://www.loginradius.com/blog/author/uma-victor/" style="color: rgb(0, 142, 207); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: all 0.3s ease 0s;">Uma Victor</a></h3>I am a software developer based in Nigeria, familiar with a variety of different web technologies/frameworks and keen on always finding ways to explain things as simply as possible.</div></div></div></div></div></div></section>

Node.js User Authentication Guide

Introduction

Goal

Prerequisites

Set Up a Mongo Database

Set Up the Server

Connect to the Database

Create User Schema

Perform CRUD Operations

Register Function

Set Up Register Route

Test the Register Route

Login Function

Set Up Login Route

Test the Login Route

Update Function

Set Up Update Route

Testing the Update Route

Delete Function

Set up the deleteUser Route

Test the deleteUser Route

Hash User Passwords

Refactor Register Function

Test the Register Function

Refactor the Login Function

Test the Login Function

Authenticate Users with JSON Web Token (JWT)

Refactor the Register Function

Refactor the Login Function

Protect the Routes

Admin Authentication

Basic User Authentication

Protect the Routes

Populate the Database with Admin User

Create the Login Form Using EJS

Render Embedded JavaScript

Create EJS Files

Create a Home Page

Create a Registration Form

Add POST Request Functionality

Create a Login Form

Add POST Request Functionality

Add Registered Users to the Route

Display Registered User in user Route

Add Update and Delete Function to the Admin Route

Edit a User's Role

Delete Users

Logout Functionality

Node.js Authentication with LoginRadius

How to Authenticate Your Node.js App with LoginRadius

Conclusion

Resources

Written by Uma Victor

Category:

Set up the `deleteUser` Route

Test the `deleteUser` Route

Display Registered User in `user` Route