![\"Register](\"/1ac77cdb1d6c5ebf46cf5171d74cf4a0/registerRoute.webp\")
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.
\nYou 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.
\nThis tutorial helps you:
\nYou have installed the following:
\nYou already understand JavaScript E56 Syntax.
\nNow that everything is in place, let's set up your database.
\nYou'll store all your user data — which includes username, password, and role — in MongoDB.
\nInstall a node package called Mongoose that will connect to MongoDB. Then create a user schema for your application.
npm init\nnpm install mongoosenpm 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:
\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 = connectDBThe 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.
You need to install some dependencies that you'll use in this tutorial.
\n npm i express nodemonExpress.js is a Node.js framework for building web applications quickly and easily.
\nNodemon is a tool that watches the file system and automatically restarts the server when there is a change.
\nYou 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")\nconst app = express()\nconst PORT = 5000\napp.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": {\n "start": "node server.js",\n "dev": "nodemon server.js"\n}Open your terminal and run npm run dev to start the server.
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");\n...\n//Connecting the Database\nconnectDB();You also need to create an error handler that catches every unhandledRejection error.
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})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.
Schema is like a blueprint that shows how the database will be constructed.
\nYou'll structure a user schema that contains username, password, and role.
\nCreate 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\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})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:
\nconst User = Mongoose.model("user", UserSchema)\nmodule.exports = UserYou've created the user model by passing the UserSchema as the second argument while the first argument is the name of the model user.
You'll create functions that handle:
\nAs the name implies, this function will handle the registrations of users.
\nLet'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()\napp.use(express.json())Let's go back to your Auth.js file and create the register function:
// 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}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.
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")\nconst router = express.Router()\nconst { register } = require("./auth")\nrouter.route("/register").post(register)\nmodule.exports = routerThe 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.
You'll use Postman to test all the routes.
\nOpen 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.
\nOpen the Auth.js file and create the Login function, as follows:
// 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}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) => {\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}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");\nconst router = express.Router();\nconst { register, login } = require("./auth");\n...\nrouter.route("/login").post(login);\nmodule.exports = router;Make a POST request at http://localhost:5000/api/auth/login and pass a valid username and password to the body:
![\"login](\"/bdcb632806567d22933fc46296bc322c/loginroute.webp\")
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\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}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) => {\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 ...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\nThe numerous
\nifstatements might be a little bit tricky but understandable. Please read the comments in the above code block for better understanding.
Import the update function in your route.js, as follows:
const { register, login, update } = require("./auth");\n...\nrouter.route("/update").put(update);Send a put request to http://localhost:5000/api/auth/update:
![\"update](\"/0a64d4ef9c1c8955d9aed82aaf869472/updateroute.webp\")
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) => {\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}You remove the user based on the id you get from req.body.
deleteUser RouteOpen your route.js file to create a delete request to /deleteUser, using the deleteUser as its function:
const { register, login, update, deleteUser } = require("./auth");\n...\nrouter.route("/deleteUser").delete(deleteUser);deleteUser RouteSend a delete request to http://localhost:5000/api/auth/deleteUser by passing a valid id to the body:
![\"Delete](\"/5f7478fb8c45b5a5def8d442ab1d259c/deleteroute.webp\")
Saving user passwords in the database in plain text format is reckless. It is preferable to hash your password before storing it.
\nFor instance, it will be tough to decipher the passwords in your database if they are leaked. Hashing passwords is a cautious and reliable practice.
\nLet's use bcryptjs to hash your user passwords.
Lets install bcryptjs:
npm i bcryptjsAfter installing bcryptjs, import it into your auth.js
const bcrypt = require("bcryptjs")Instead of sending a plain text format to your database, lets hash the password using bcrypt:
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};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.
Send a POST request to http://localhost:5000/api/auth/register and pass the username and password to the body:
![\"Register](\"/1ac77cdb1d6c5ebf46cf5171d74cf4a0/Hashedregisterroute.webp\")
exports.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 try {\n const user = await User.findOne({ username })\n if (!user) {\n res.status(400).json({\n message: "Login not successful",\n error: "User not found",\n })\n } else {\n // comparing given password with hashed password\n bcrypt.compare(password, user.password).then(function (result) {\n result\n ? res.status(200).json({\n message: "Login successful",\n user,\n })\n : res.status(400).json({ message: "Login not succesful" })\n })\n }\n } catch (error) {\n res.status(400).json({\n message: "An error occurred",\n error: error.message,\n })\n }\n}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:
![\"Hashed](\"/632b08fece37d70e9641393af6d9dbcd/hashedloginroute.webp\")
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.
\nJWT 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.
\nYou've to install JWT before using it in your application:
\nnpm i jsonwebtokenWhen 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\nrequire("crypto").randomBytes(35).toString("hex")Output:
\n![\"Crypto\"](\"/ffc516c1cf1c578ae020aab9ea7bef3d/crypto.webp\")
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.
\nStore your secret string in a variable:
\nconst jwtSecret =\n "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"Once you've created your jwtSecret, import jsonwebtoken as the token in the register function:
...\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};The code snippet created the token using JWT's sign function. This function takes in three parameters:
jwtSecret as the second parameter; and,After passing all these arguments, JWT will generate a token. After the token is generated, send it as a cookie to the client.
\nAlso, generate a token for logged in users:
\nexports.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};To prevent unauthenticated users from accessing the private route, take the token from the cookie, verify the token, and redirect users based on role.
\nYou'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-parserAfter installing it, import it into your server.js file and use it as a middleware:
const cookieParser = require("cookie-parser");\n...\napp.use(cookieParser());You'll create your middleware that verifies the token and grants access to your private route.
\nLet's create a new folder in the project's folder named middleware and create a file called auth.js.
Open the auth.js file and create the middleware:
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}The code snippet requests a token from the client, checks if a token is available, and verifies that token.
\nJWT 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.
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) => {\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}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");\n...\napp.get("/admin", adminAuth, (req, res) => res.send("Admin Route"));\napp.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")\nrouter.route("/update").put(adminAuth, update)\nrouter.route("/deleteUser").delete(adminAuth, deleteUser)You need to create an admin user in your database. Open up your terminal, and let's run some MongoDB methods:
\nmongoAfter mongo is started, you need to use the role_auth database:
use role_authBefore 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)\npasswordAfter you've created the constant password, you need to enter the password in the node terminal to get your hashed password.
![\"Node](\"/d3c1b2d70849b827aac61c69995a2f8f/nodebycrypt.webp\")
You'll use the hashed password to create your admin:
\ndb.users.insert({\n username: "admin",\n password: "$2a$10$mZwU9AbYSyX7E1A6fu/ZO.BDhmCOIK7k6jXvKcuJm93PyYuH2eZ3K",\n role: "admin",\n})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.
\nInstall the ejs package:
npm i ejsAfter you've installed ejs, you need to set ejs as your default view engine in your server.js file:
app.set("view engine", "ejs")When making a GET request to specific routes, you'll render an ejs file:
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"))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
Your home page will contain the links to /login and /register ejs file. Open up home.ejs and add these links:
<!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>Embedded JavaScript (EJS) supports HTML syntax. You'll create the registration form in register.ejs using HTML syntax:
<!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>You need to get the username and password that the user entered and pass it to the body when making the POST request:
...\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>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.
\nCreating 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>\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> <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>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) => {\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}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.
user RouteYou've rendered user.ejs when accessing the /user route. Now, you'll display all registered users to that route.
user.ejs:
<!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>You'll also display registered users to the admin route but add update and delete functionality to the route:
admin.ejs:
<!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>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>\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>Deleting Users from the database should be the duty of an admin.
\nadmin.ejs:
<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>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\nPlease ensure the admin user is first on the list to avoid populating the database with an admin user again.
\n
To log out users, you need to remove the token from the client and redirect the client to the home page.
\nYou'll create a GET request to /logout in the server.js file:
app.get("/logout", (req, res) => {\n res.cookie("jwt", "", { maxAge: "1" })\n res.redirect("/")\n})The code snippet replaced the JWT token with an empty string and gave it a lifespan of 1 second.
\nAfter creating the GET request, add a logout button to the admin's route and user's route:
...\n<ul></ul>\n<button class="logout"><a href="/logout">Log Out</a></button>\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.
\nIn 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.
\nBasically, LoginRadius handles user registration, login, and authentication. Other features of LoginRadius include:
\nJWT, you can use this token to authenticate usersTo 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.
\nThis section briefly covers how authentication works with LoginRadius.
\nAfter signing up for LoginRadius, choose a name for your Node.js app.
\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.
![\"LoginRadius](\"/3c5de91ef87963f5ea96eb10556ba358/loginradius1.webp\")
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:
![\"LoginRadius](\"/faed37adab3b93cbf078cb49970ff8a6/loginradius.webp\")
https://<LoginRadius-APP-Name>.hub.loginradius.com/auth.aspx?action=login&return_url=<Return-URL>An instance of the link is given below:
\nhttps://noderoleauth.hub.loginradius.com/auth.aspx?action=login&return_url=http://localhost:5000You'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