{"componentChunkName":"component---src-pages-author-author-yaml-id-js","path":"/author/uma-victor/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"54fa3292-314e-57bf-966a-253d1ff09e66","html":"

Introduction

\n

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.

\n

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.

\n

Goal

\n

This tutorial helps you:

\n\n

Prerequisites

\n

You have installed the following:

\n\n

You already understand JavaScript E56 Syntax.

\n

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

\n

Set Up a Mongo Database

\n

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

\n

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

\n
npm init\nnpm install mongoose
\n

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

\n

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

\n
const Mongoose = require("mongoose")
\n

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

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

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

\n

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.

\n

Set Up the Server

\n

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

\n
  npm i express nodemon
\n

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

\n

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

\n

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:

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

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

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

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

\n

Connect to the Database

\n

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

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

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

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

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.

\n

Create User Schema

\n

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

\n

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

\n

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:

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

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

\n

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.

\n

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

\n
const User = Mongoose.model("user", UserSchema)\nmodule.exports = User
\n

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.

\n

Perform CRUD Operations

\n

You'll create functions that handle:

\n\n

Register Function

\n

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

\n

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

\n

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

\n

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

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

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

\n

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:

\n
const app = express()\napp.use(express.json())
\n

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

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

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.

\n

Set Up Register Route

\n

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:

\n
const express = require("express")\nconst router = express.Router()\nconst { register } = require("./auth")\nrouter.route("/register").post(register)\nmodule.exports = router
\n

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

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

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

\n

Test the Register Route

\n

You'll use Postman to test all the routes.

\n

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

\n

\n \n

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

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

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:

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

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.

\n

Set Up Login Route

\n

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

\n
const express = require("express");\nconst router = express.Router();\nconst { register, login } = require("./auth");\n...\nrouter.route("/login").post(login);\nmodule.exports = router;
\n

Test the Login Route

\n

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

\n

\n \n \n

\n

Update Function

\n

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:

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

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

\n

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

\n

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

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

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.

\n
\n

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

\n
\n

Set Up Update Route

\n

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

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

Testing the Update Route

\n

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

\n

\n auth.js file:

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

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

\n

Set up the deleteUser Route

\n

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

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

Test the deleteUser Route

\n

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

\n

\n \n \n

\n

Hash User Passwords

\n

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

\n

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.

\n

Let's use bcryptjs to hash your user passwords.

\n

Lets install bcryptjs:

\n
npm i bcryptjs
\n

After installing bcryptjs, import it into your auth.js

\n
const bcrypt = require("bcryptjs")
\n

Refactor Register Function

\n

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

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

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.

\n

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

\n

Test the Register Function

\n

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

\n

\n \n \n

\n

Authenticate Users with JSON Web Token (JWT)

\n

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.

\n

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.

\n

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

\n
npm i jsonwebtoken
\n

Refactor the Register Function

\n

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:

\n
node\nrequire("crypto").randomBytes(35).toString("hex")
\n

Output:

\n

\n \n \n

\n

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.

\n

Store your secret string in a variable:

\n
const jwtSecret =\n  "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"
\n

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

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

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

\n\n

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

\n

Refactor the Login Function

\n

Also, generate a token for logged in users:

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

Protect the Routes

\n

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

\n

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

\n
npm i cookie-parser
\n

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

\n
const cookieParser = require("cookie-parser");\n...\napp.use(cookieParser());
\n

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

\n

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

\n

Admin Authentication

\n

Open the auth.js file and create the middleware:

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

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

\n

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.

\n

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.

\n

Basic User Authentication

\n

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:

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

Protect the Routes

\n

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:

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

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.

\n

route.js:

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

Populate the Database with Admin User

\n

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

\n
mongo
\n

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

\n
use role_auth
\n

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:

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

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

\n

\n \n \n

\n

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

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

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

\n

Create the Login Form Using EJS

\n

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

\n

Install the ejs package:

\n
    npm i ejs
\n

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

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

Render Embedded JavaScript

\n

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

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

Create EJS Files

\n

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

\n

Create a Home Page

\n

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

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Home page</title>\n  </head>\n  <body>\n    <h1>Home Page</h1>\n    <a href="/register"> Register</a> <br />\n    <a href="/login">Login</a>\n  </body>\n</html>
\n

Create a Registration Form

\n

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

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

Add POST Request Functionality

\n

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

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

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

\n

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

\n

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

\n

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

\n

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.

\n

Create a Login Form

\n

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

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

Add POST Request Functionality

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

Add Registered Users to the Route

\n

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.

\n

Open auth.js file in Auth folder:

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

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.

\n

Display Registered User in user Route

\n

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

\n

user.ejs:

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

Add Update and Delete Function to the Admin Route

\n

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

\n

admin.ejs:

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

Edit a User's Role

\n

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:

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

Delete Users

\n

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

\n

admin.ejs:

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

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.

\n
\n

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

\n
\n

Logout Functionality

\n

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

\n

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

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

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

\n

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

\n
...\n<ul></ul>\n<button class="logout"><a href="/logout">Log Out</a></button>\n...
\n

Node.js Authentication with LoginRadius

\n

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.

\n

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.

\n

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

\n\n

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.

\n

How to Authenticate Your Node.js App with LoginRadius

\n

This section briefly covers how authentication works with LoginRadius.

\n

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

\n
\n

\n \n \n

\n
\n

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.

\n

\n \n \n

\n

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:

\n
https://<LoginRadius-APP-Name>.hub.loginradius.com/auth.aspx?action=login&return_url=<Return-URL>
\n

An instance of the link is given below:

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

Conclusion

\n

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.

\n

Resources

\n\n","frontmatter":{"title":"Node.js User Authentication Guide","author":{"id":"Uma Victor","github":"uma-victor1","avatar":null},"date":"January 18, 2022","updated_date":null,"tags":["JWT","Authentication","Node.js"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.9047619047619047,"src":"/static/2bf56fe9f3665d6ea50e762f073b6531/14b42/coverimage.jpg","srcSet":"/static/2bf56fe9f3665d6ea50e762f073b6531/f836f/coverimage.jpg 200w,\n/static/2bf56fe9f3665d6ea50e762f073b6531/2244e/coverimage.jpg 400w,\n/static/2bf56fe9f3665d6ea50e762f073b6531/14b42/coverimage.jpg 800w,\n/static/2bf56fe9f3665d6ea50e762f073b6531/235b6/coverimage.jpg 1034w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Uma Victor","slug":"/engineering/guest-post/nodejs-authentication-guide/"}}},{"node":{"id":"afc6b8cb-00d1-5436-b114-bf244e2077bf","html":"

In web applications, you try to decide when to use either JSON Web Tokens (JWTs) or sessions (cookies) for authentication. When you browse the web you use HTTP, which is a stateless protocol. So, the only way to remember the states of your application is using either sessions or tokens.

\n

Goals

\n

This article deep dives into:

\n\n

JWT vs. Session: What to Use?

\n

Deciding to choose between JWT or session is not just choosing one over the other. You need to look at some factors to determine which one to use in an application. In order to figure this out, you need to compare both approaches -- JWT and session -- to authenticate users.

\n

Comparison: JWT and Session

\n

This article starts with how server-side sessions with a session store work, then looks at how client-side sessions with JWT work.

\n

\"authentication

\n

How Server-side Sessions Work With a Session Store

\n

Suppose, you have a website with a login form. You enter your email ID and password, and your browser sends a request to the server. Your server compares the password hashes, and if those hashes match, a session is created with a specific session ID. Then, the server returns a cookie with the session ID and the cookie is HTTP only, so it can not be read by any javascript that is not yours. It is also secured so that the cookie is never transferred over an insecure connection; that is, something that is not encrypted. Otherwise, someone can intercept the communication, like a man in the middle attack.

\n

\"server-side

\n

If you make a follow-up request, your browser automatically sends this cookie along. Take a look at the session ID and fish it out.

\n

How Client-side Sessions Work with JWT

\n

\"client-side

\n

Instead of creating a session in your session store, you check whether the password hashes match. And if they do match, you can just create a JSON signature token and the token is signed with the secret. If someone tries to modify the payload, you will know and the signature validation will fail.

\n

You can return the web signature token that can be put in a cookie, which is way better. Because, if you don't do that, there is a possibility that a third-party javascript can access it.

\n

Problems with JWT and Statelessness

\n

Imagine a scenario in which a bank customer's info has been breached and the customer calls the bank to lock the account. This will be an issue if the bank uses JWT for authentication as JWT is stateless. Although you can find a workaround to do this by introducing state, it just defeats the purpose of having a JWT token in the first place, standing a chance of logging everyone out including the customer.

\n

With Sessions, logging out that one particular customer won’t be a problem at all as the customer's state is stored.

\n

Data Visibility and Control

\n

When using server-side sessions, you don't know who is currently logged into your application as this can be useful to inflict the history of what a person is currently doing. It’s a better idea to use sessions in industries like health care, banking, insurance, or companies that deal with money. It's also good to note that JWT is signed and anyone can read it or get an idea of how data or ID is structured, or how many rows data has, which is not the case for sessions as the data is not visible to users.

\n

Bandwidth Consumption

\n

Session cookies take up very little bandwidth, whereas the bandwidth consumption will be higher in the JWT-based approach because the tokens tend to get bigger and you have the signature you have to send along for each follow up request; whereas if you have the session cookie, it's really small because its just the session ID that is being sent over.

\n

Revoking Roles and Privileges in JWT and Session-based Systems

\n

A lot of breaches that happen in companies is a result of an internal breach from an employee or insider that is stealing data or doing weird things. It is really important to be able to revoke privileges immediately. Imagine a scenario where one person is locked in and has admin rights. Say, the token is valid for ten minutes or so. If for whatever reason you don't want that person to have admin privileges anymore, you can easily revoke the person's access if you use sessions, but might find it difficult if you use JSON web tokens.

\n

JWT: Advantages

\n

This section discusses the advantages of using JWT over sessions and scenarios where sessions do not cut it.

\n

Scalability

\n

One of the “issues” with sessions is scalability. The argument is that sessions are stored in memory and servers are duplicated to handle the application load, therefore, limiting the scalability of the application. JWT, on the other hand, has higher scalability due to its statelessness. If you use a load balancer, you can easily pass along your users to several servers without worrying, as there is no state or session data stored anywhere, making it easy for gigantic scale workloads like that of Google and Facebook.

\n

Maintainability

\n

A downside of the sessions is their maintainability, as the sessions need to be maintained. Somewhere on someone's server, a record will need to be created every time a user is authenticated. This is done in memory. The more the users are authenticated, the greater the overhead on your server. There is no need for maintainability in JWT as no state is stored, making it a better choice in this scenario.

\n

Multiple Platforms and Domain

\n

When using sessions in an applications, there will come a time when you need to scale or expand the data for it to be used on multiple devices. Then, you'll need to worry about things like cross-origin resource sharing or even forbidden requests.

\n

But with JWT, you don't have to bother about CORS as you can provide data to all sorts of devices and applications. Setting up a quick header configuration gets rid of any CORS problem you would have encountered.

\n
Access-Control-Allow-Origin: *
\n

As long as a valid user has a valid token, data and resources are made available from any domain.

\n

Platform Independent

\n

You can easily allow selective permissions for third-party applications with the help of JWT. Say, you build an application that you like to share permissions with other applications; for instance, sharing a video you watched on Facebook to friends on Instagram. You can also get creative building APIs that hand the special tokens to other applications so that user data can be accessed.

\n

Attacking JWTs vs. Session-based Authentication

\n

Auth tokens are usually sent over the network and as such are vulnerable to attack. These kinds of attacks are:

\n\n

Although it may seem that these types of attacks are not likely to happen, it's important to take security seriously and implement appropriate measures. The vulnerability of the system is based on the cumulative probabilities of all the types of attacks. In some ways, you can mitigate the above attacks:

\n
    \n
  1. Man in the middle attack: You can easily protect yourself from this type of attack by using secure HTTP and secure cookies throughout the app. However, this doesn't prevent attacks that use a proxy.
    2. \n
  2. OAuth token theft: The solution to this is to have appropriate measures in place to detect stolen refresh tokens and use only short-lived access tokens.
    3. \n
  3. XSS attack: One way to prevent this attack is to make sure that all of the dependencies are secure. This method is time-consuming and costly.
    4. \n
  4. Cross-site request forgery (CSRF): Prevention of CSRF attacks typically requires the use of an anti-CSRF token or SameSite cookies. However, there are other methods that you can user to solve this in a way that is seamless with the whole authentication process.
    5. \n
  5. \n

    Database and filesystem access: To control damage caused by unauthorized access to your database or filesystem, you could do the following:

    \n\n
    6. \n
  6. Session fixation: Each time a user logs in, generate a new set of tokens for that account. This method will invalidate the old ones if needed.
    7. \n
\n

Cookies vs. Local Storage

\n

Some people who use JSON web tokens return the token and store it in local storage. This can be very dangerous as third party javascript, browser extensions, and malicious CDN scripts can have access to the token. But if you put it in a cookie, no javascript access, or even you has access to it.

\n

Another thing to note is that when using cookies, you need to mitigate CSRF. Preventing it most of the time will have to do with installing a library and writing a few lines of code.

\n

Conclusion

\n

In the article, you've learned the differences in using sessions and JSON web tokens for authentication, how serverside session store works, the advantages of sessions over JWT, and other things concerning the structure of JWT.

\n","frontmatter":{"title":"How to Authenticate Users: JWT vs. Session","author":{"id":"Uma Victor","github":"uma-victor1","avatar":null},"date":"August 26, 2021","updated_date":null,"tags":["Authentication","JWT","Sessions"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b7fe0cb57f0d4924df0a0f47634eb844/14b42/ArticleHead.jpg","srcSet":"/static/b7fe0cb57f0d4924df0a0f47634eb844/f836f/ArticleHead.jpg 200w,\n/static/b7fe0cb57f0d4924df0a0f47634eb844/2244e/ArticleHead.jpg 400w,\n/static/b7fe0cb57f0d4924df0a0f47634eb844/14b42/ArticleHead.jpg 800w,\n/static/b7fe0cb57f0d4924df0a0f47634eb844/47498/ArticleHead.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Uma Victor","slug":"/engineering/guest-post/jwt-vs-sessions/"}}},{"node":{"id":"b72aa513-e0cd-58c1-a581-c7ad8014a212","html":"

In this tutorial, we will be covering some authentication concepts and learn about authentication and how to use JSON JWTweb tokens to authorize a Vue app. To continue in this tutorial, you should be comfortable using vue, vuex, and express.

\n

Overview

\n

In our app, we have a login form. The user enters a username and password that is then posted to an endpoint. The flow of the app is the user opens the app, then the login page appears, the user submits the login form, which makes a post request to a login endpoint, then we check if the username and password check out, then we return a JWT and store the token in vuex and depending on the token we display a different page.

\n

\"App

\n

Setting up our Vue app

\n

You can start a new project using the vue cli, but you have to install the CLI first by running-

\n
npm install -g @vue/cli\n OR\nyarn global add @vue/cli
\n

after the cli is installed, you can create a new project by running-

\n
vue create jwt-auth-app
\n

You will then be prompted to select some basic setup. In your setup, select Babel, Linter, Vue Router, and Vuex!. That’s all we need.

\n

Setup Express Server

\n

To set up our server, we need to install cors, dotenv, express, and nodemon

\n
npm install cors dotenv express
\n

Our server.js file is simplistic in a way that we just import express, tell it what port to listen to, and return “hello world” when we hit the base URL, and then we listen on that port.

\n
require("dotenv").config();\nconst express = require("express");\nconst cors = require("cors");\nconst app = express();\nconst port = 3000;\napp.use(cors());\napp.use(express.json());\n\napp.get('/', (req, res) => {\n  res.send('Hello World!')\n})\napp.listen(port, () => {\n  console.log(`Example app listening at http://localhost:${port}`)\n})
\n

Building a login form

\n

In our views folder, we add login.vue and welcome.vue files, and in the login.vue file, we build out the login form. But before that, we want to add a route to our vue router so that we can navigate to the login and welcome page.\nSo for the index.js file of our router folder, we import the login and welcome view, and we add login and welcome routes for the components to point to.

\n
import Vue from "vue";\nimport VueRouter from "vue-router";\nimport Login from "../views/Login.vue";\nimport Welcome from "../views/Welcome.vue";\nVue.use(VueRouter);\nconst routes = [\n  {\n    path: "/",\n    name: "Welcom",\n    component: Welcome,\n  },\n  {\n    path: "/login",\n    name: "Login",\n    component: Login,\n  },\n];\nconst router = new VueRouter({\n  mode: "history",\n  base: process.env.BASE_URL,\n  routes,\n});\nexport default router;
\n

We can now navigate to both pages. On our welcome page, we want to check if the user is not logged in, then present the link they can click to navigate to the login page. We use a router link to achieve this.

\n
<template>\n  <div>\n    <h1>Welcome</h1>\n    <router-link  to="/login"><button>Login</button></router-link> \n  </div>\n</template>
\n

In our login view, we scaffold our form. In the form, we are going to have two input boxes, one is the username input, and the other is a password. We then add a button with the type submit to submit the form. When we submit, we perform a login function in our script then set preventDefault on our form to stop the page from refreshing each time we click the login button.\nIn the script of our application, we model our input data by doing a two-way binding to the data state.

\n
<template>\n  <div>\n    <h1>LOGIN</h1>\n    <form @submit.prevent="login">\n      <input v-model="username" placeholder="username" />\n      <br />\n      <br />\n      <input v-model="password" placeholder="password" type="password" />\n      <br />\n      <br />\n      <button type="submit">Login</button>\n    </form>\n  </div>\n</template>\n<script>\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n};\n</script>
\n

\"login

\n

For the login method that runs when you click the button, we would like to perform an HTTP request to our express backend. We want to make a post request to our /login route we will create in our server.\nIn the fetch method, the first parameter is the URL you are sending a request to. Then the second is the object you are posting containing the headers, which contain information about the request, and the body containing the form data.

\n
<script>\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n  methods: {\n    login() {\n      fetch("http://localhost:3000/login", {\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        body: JSON.stringify({\n          username: this.username,\n          password: this.password,\n        }),\n      });\n    },\n  },\n};\n</script>
\n

In our server.js, we create a post request to the /login route and send back some json to test it out. Now, if we click login now, we get back a 200 ok message.

\n

Note: Make sure you set up *cors* so that you don't encounter an error message when hitting the */login* route

\n
app.post("/login?", (req, res) => {\n  res.json({\n    message: "hello ma guy"\n  })\n})
\n

Check if the username and password exist

\n

The next step is to check if the username or password exists in a database or somewhere else. To not waste time dealing with a database, we can use a hardcoded username and password. In the post route, if somebody tries to log in with the exact login information we just hardcoded, we want to give the person a green light and log the person into the application; otherwise, we throw an error.

\n

Using the login payload we got from submitting the form, we can now check if the username and password are the same; else, we throw an error and respond with a status of 403 and a wrong login information message.

\n
app.post("/login", (req, res) => {\n  const USERNAME = "uma victor";\n  const PASSWORD = "8888";\n  const { username, password } = req.body;\n  if (username === USERNAME && password === PASSWORD) {\n    const user = {\n      id: 1,\n      name: "uma victor",\n      username: "uma victor",\n    };\n  } else {\n    res.status(403);\n    res.json({\n      message: "wrong login information",\n    });\n  }\n});
\n

JWT Authentication in our app

\n

This is the interesting part of the tutorial. Now, if you provide the correct login information and it checks out, the next step is to sign a JWT web token. Let’s first install the JWT plugin.

\n
npm install jsonwebtoken
\n

also, make sure to import it at the top of your server.js file

\n
const jwt = require("jsonwebtoken");
\n

Then when the user login is successful, we want to send a JWT that is signed. So we import the JWTpackage. Then you sign in with a unique password. In a real application, we will want to have a .env file where we store the secret key. Then use process.env to grab and use it when signing our user model. Imagine we have a user object which we got back from our database with a unique ID, name, and username.

\n
app.post("/login", (req, res) => {\n  const USERNAME = "uma victor";\n  const PASSWORD = "8888";\n  const { username, password } = req.body;\n  if (username === USERNAME && password === PASSWORD) {\n    const user = {\n      id: 1,\n      name: "uma victor",\n      username: "uma victor",\n    };\n    const token = jwt.sign(user, process.env.JWT_KEY);\n    res.json({\n      token,\n      user,\n    });\n  } else {\n    res.status(403);\n    res.json({\n      message: "wrong login information",\n    });\n  }
\n

It is the user object we want to sign, so when you send it to the client. We can uniquely identify them. The unique ID is also very important because when a server gets a request with a token, we want to know what uniquely identifies the request.\nNow when we enter the username and password in our form, we can see in the console that our JWT token is generated but is not encrypted.

\n

You can visit this site jwt.io and paste in the token that was generated, and your token will be decoded and return information about your payload

\n

Note: The token is not encrypted, and anyone who gets access to the token can hit your server with it. Tokens normally have an expiry period of between 30 - 60 minutes

\n

Store Token in vuex

\n

In our fetch method in the login view, we want to get back the token and the user and store it somewhere. Now we make our login method async, then we set our response to equal to the fetch method that returns the user and token, and we get back the user and token from the response.

\n
<script>\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n  methods: {\nasync login(e) {\n      e.preventDefault();\n      const response = await fetch("http://localhost:3000/login", {\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        body: JSON.stringify({\n          username: this.username,\n          password: this.password,\n        }),\n      });\n    },\n  },\n};\n</script>
\n

In our store, we add the user and token data in our state and set them to null initially. You can use the token to see if the user is logged in or not. If the token is null, then we are not logged in, but if it’s set to something, then we are probably logged in.\nWe create a setUser mutation in our mutation object that sets the state to the user object. We also create a setToken mutation to assign our token.

\n
import Vue from "vue";\nimport Vuex from "vuex";\nVue.use(Vuex);\nexport default new Vuex.Store({\n  state: {\n    user: null,\n    token: null,\n  },\n  mutations: {\n    setUser(state, user) {\n      state.user = user;\n    },\n    setToken(state, token) {\n      state.token = token;\n    },\n  },\n  actions: {},\n  getters: {},\n});
\n

Note: It is best practice to always call mutations from our actions, but since our mutations can easily be traced, we are calling the mutations directly

\n

In the login view, we can import mapMutations from vuex and map the setUser and setToken mutation. We can now call the mutations from the login method.

\n
<script>\nimport { mapMutations } from "vuex";\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n  methods: {\n    ...mapMutations(["setUser", "setToken"]),\n    async login(e) {\n      e.preventDefault();\n      const response = await fetch("http://localhost:3000/login", {\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        body: JSON.stringify({\n          username: this.username,\n          password: this.password,\n        }),\n      });\n      const { user, token } = await response.json();\n      this.setUser(user);\n      this.setToken(token);\n    },\n  },\n};\n</script>
\n

Now that we're logged in, our state has been mutated and updated with the information from our form. But after we login, we want to redirect to our welcome page using the $router.push(\"/\") method to redirect to the home page, which is also our welcome page.

\n
this.$router.push("/");
\n

// image of the welcome page here\nSince you are logged in, you don’t want the login button showing anymore on the welcome page. You can use a getter from our store to do this. We check if the token is null or not and return true or false.

\n
getters: {\n  isLoggedIn(state) {\n    return !!state.token;\n  },\n},
\n

then in our welcome component template, we can use now map to our Getter and use the v-if directive to display the login button if isLoggedIn is true or false

\n
<template>\n  <div>\n    Welcome\n    <router-link v-if="!isLoggedIn" to="/login"><button>Login</button></router-link>\n  </div>\n</template>\n<script>\nimport { mapGetters } from "vuex";\nexport default {\n  computed: {\n    ...mapGetters(["isLoggedIn"])\n  }\n};\n</script>
\n

Conclusion

\n

In this tutorial, we looked at how to authenticate a person using the JSON web token. We created a login form and used an express server for the login route in the application using Vue.js as a frontend framework.

\n

Resources

\n\n","frontmatter":{"title":"Implementing Authentication on Vue.js using JWTtoken","author":{"id":"Uma Victor","github":"uma-victor1","avatar":null},"date":"June 02, 2021","updated_date":null,"tags":["Auth","JWT","Vue.js"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8867924528301887,"src":"/static/ececadbcd1e6705ff5e9039485918dad/ee604/coverimage.png","srcSet":"/static/ececadbcd1e6705ff5e9039485918dad/69585/coverimage.png 200w,\n/static/ececadbcd1e6705ff5e9039485918dad/497c6/coverimage.png 400w,\n/static/ececadbcd1e6705ff5e9039485918dad/ee604/coverimage.png 800w,\n/static/ececadbcd1e6705ff5e9039485918dad/f3583/coverimage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Uma Victor","slug":"/engineering/implementing-authentication-on-vuejs-using-jwt/"}}}]},"authorYaml":{"id":"Uma Victor","bio":"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.","github":"uma-victor1","stackoverflow":null,"linkedin":null,"medium":null,"twitter":"umavictor_","avatar":null}},"pageContext":{"id":"Uma Victor","__params":{"id":"uma-victor"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}