Tag: jsonwebtoken

npm install express express-formidable mongodb http bcrypt jsonwebtoken ejs

node server.js

npm install -g nodemon

nodemon server.js

// include express module
var express = require("express");

// create instance of express
var app = express();

// use express-formidable middleware
var formidable = require("express-formidable");
app.use(formidable());

// include mongodb module
var mongodb = require("mongodb");

// get mongodb client
var mongoClient = mongodb.MongoClient;

// get ObjectId, it is unique for each document
var ObjectId = mongodb.ObjectId;

// create http server from express instance
var http = require("http").createServer(app);

// include bcrypt module
var bcrypt = require("bcrypt");

// include jsonwebtoken module
var jwt = require("jsonwebtoken");

// random secret string
var accessTokenSecret = "myAccessTokenSecret1234567890";

// use public folder for css and js files
app.use(express.static(__dirname + "public"));

// use ejs engine to render html files
app.set("view engine", "ejs");

var mainURL = "http://localhost:3000";

// start the server at port 3000
http.listen(3000, function () {
	console.log("Server started.");

	// connect with mongodb
	mongoClient.connect("mongodb://localhost:27017", function (error, client) {

		// database name will be "jwt_authentication"
		var database = client.db("jwt_authentication");
		console.log("Database connected");

	});
});

http://localhost:3000/

http://localhost:3000/signup

// route for signup requests
app.route("/signup")

	// get request accessed from browser
	.get(function (request, result) {
		// render signup.ejs file inside "views" folder
		result.render("signup");
	});

<!-- menu items will be created using Javascript -->
<ul id="main-menu">
	
</ul>

<script>
	// variables used in all files
	var mainURL = "http://localhost:3000";
	var accessTokenKey = "accessToken";
	var user = null;
</script>

<%- include ("header") %>

<form method="POST" onsubmit="return doRegister(this);">

	<table>
		<tr>
			<th>Name</th>
			<td>
				<input type="text" name="name" required />
			</td>
		</tr>

		<tr>
			<th>Email</th>
			<td>
				<input type="email" name="email" required />
			</td>
		</tr>

		<tr>
			<th>Password</th>
			<td>
				<input type="password" name="password" required />
			</td>
		</tr>

		<tr>
			<td>
				<input type="submit" name="submit" value="Register" />
			</td>
		</tr>
	</table>

</form>

<%- include ("footer") %>

<script>
	function doRegister(form) {

		// disable the submit button and show "Loading..." text
		form.submit.setAttribute("disabled", "disabled");
		form.submit.value = "Loading...";

		// create AJAX object
		var ajax = new XMLHttpRequest();

		// 1. method is POST
		// 2. path where request will be sent
		// 3. request will be asynchronous
		ajax.open("POST", mainURL + "/signup", true);

		// called everytime status of request changes
		ajax.onreadystatechange = function () {

			// when response is received from server
			if (this.readyState == 4) {

				// if the request is OK
				if (this.status == 200) {

					// response received from server
					console.log(this.responseText);

					// enable the submit button
					form.submit.removeAttribute("disabled");
					form.submit.value = "Register";

					// convert the JSON string into Javascript object
					var response = JSON.parse(this.responseText);

					// display message
					alert(response.message);

					// if the user is created, then redirect to login
					if (response.status == "success") {
						window.location.href = "/login";
					}
				}

				// if there is an internal server error
				if (this.status == 500) {
					console.log(this.responseText);
				}
			}
		};

		// create form data object from form
		var formData = new FormData(form);

		// actually sending the AJAX request
		ajax.send(formData);

		// prevent the form from submitting
		return false;
	}
</script>

// route for signup requests
app.route("/signup")

	// get request accessed from browser
	.get(function (request, result) {
		// render signup.ejs file inside "views" folder
		result.render("signup");
	})

	// post request called from AJAX
	.post(async function (request, result) {

		// get values from signup form
		var name = request.fields.name;
		var email = request.fields.email;
		var password = request.fields.password;

		// check if email already exists
		var user = await database.collection("users").findOne({
			"email": email
		});

		if (user != null) {
			result.json({
				"status": "error",
				"message": "Email already exists."
			});
			return true;
		}

		// encrypt the password
		bcrypt.hash(password, 10, async function (error, hash) {

			// insert in database
			await database.collection("users").insertOne({
				"name": name,
				"email": email,
				"password": hash,
				"accessToken": ""
			});

			// send the response back to client
			result.json({
				"status": "success",
				"message": "Signed up successfully. You can login now."
			});
		});
		
	});

http://localhost:3000/login

// route for login requests
app.route("/login")

	// get request accessed from browser
	.get(function (request, result) {

		// render login.ejs file inside "views" folder
		result.render("login");
	});

<%- include ("header") %>

<form method="POST" onsubmit="return doLogin(this);">
	<table>
		<tr>
			<th>Email</th>
			<td>
				<input type="email" name="email" required />
			</td>
		</tr>

		<tr>
			<th>Password</th>
			<td>
				<input type="password" name="password" required />
			</td>
		</tr>

		<tr>
			<td>
				<input type="submit" name="submit" value="Login" />
			</td>
		</tr>
	</table>
</form>

<%- include ("footer") %>

<script>
	function doLogin(form) {

		// disable the submit button and show "Loading..." text
		form.submit.setAttribute("disabled", "disabled");
		form.submit.value = "Loading...";

		// create AJAX object
		var ajax = new XMLHttpRequest();

		// 1. method is POST
		// 2. path where request will be sent
		// 3. request will be asynchronous
		ajax.open("POST", mainURL + "/login", true);

		// called everytime status of request changes
		ajax.onreadystatechange = function () {

			// when response is received from server
			if (this.readyState == 4) {

				// if the request is OK
				if (this.status == 200) {

					// response received from server
					console.log(this.responseText);

					// enable the submit button
					form.submit.removeAttribute("disabled");
					form.submit.value = "Login";

					// convert the JSON string into Javascript object
					var response = JSON.parse(this.responseText);

					// if user is logged in successfully
					if (response.status == "success") {

						// get access token from server
						var accessToken = response.accessToken;

						// save in local storage
						localStorage.setItem("accessToken", accessToken);

						// redirect to home page
						window.location.href = "/";
					} else {

						// display message
						alert(response.message);
					}
				}

				// if there is an internal server error
				if (this.status == 500) {
					console.log(this.responseText);
				}
			}
		};

		// create form data object from form
		var formData = new FormData(form);

		// actually sending the AJAX request
		ajax.send(formData);

		// prevent the form from submitting
		return false;
	}
</script>

// route for login requests
app.route("/login")

	// get request accessed from browser
	.get(function (request, result) {

		// render login.ejs file inside "views" folder
		result.render("login");
	})

	// post request called from AJAX
	.post(async function (request, result) {

		// get values from login form
		var email = request.fields.email;
		var password = request.fields.password;

		// check if email exists
		var user = await database.collection("users").findOne({
			"email": email
		});

		if (user == null) {
			result.json({
				"status": "error",
				"message": "Email does not exists."
			});
			return false;
		}

		// check if password is correct
		bcrypt.compare(password, user.password, async function (error, isVerify) {
			if (isVerify) {

				// generate JWT of user
				var accessToken = jwt.sign({
					"email": email
				}, accessTokenSecret);

				// update JWT of user in database
				await database.collection("users").findOneAndUpdate({
					"email": email
				}, {
					$set: {
						"accessToken": accessToken
					}
				});

				result.json({
					"status": "success",
					"message": "Login successfully.",
					"accessToken": accessToken
				});

				return false;
			}

			result.json({
				"status": "error",
				"message": "Password is not correct."
			});
		});
	});

// route for home page
app.get("/", function (request, result) {
	result.render("index");
});

<%- include ("header") %>

<%- include ("footer") %>

<script>

	// get user on page load
	window.addEventListener("load", function () {
		getUser();
	});

	function getUser() {

		// check if user is logged in
		if (localStorage.getItem(accessTokenKey)) {

			// call AJAX to get user data
			var ajax = new XMLHttpRequest();
			ajax.open("POST", mainURL + "/getUser", true);

			ajax.onreadystatechange = function () {
				if (this.readyState == 4) {
					if (this.status == 200) {
						// console.log(this.responseText);

						var response = JSON.parse(this.responseText);
						if (response.status == "success") {
							// user is logged in
							window.user = response.user;
						} else {
							// user is logged out
							localStorage.removeItem(accessTokenKey);
						}

						showMainMenu();
					}

					if (this.status == 500) {
						console.log(this.responseText);
					}
				}
			};

			var formData = new FormData();
			formData.append("accessToken", localStorage.getItem(accessTokenKey));
			ajax.send(formData);

			return false;
		}

		showMainMenu();
	}

	function doLogout() {
		// send beacon to server before redirecting
		var formData = new FormData();
		formData.append("accessToken", localStorage.getItem(accessTokenKey));

		navigator.sendBeacon(mainURL + "/logout", formData);

		// remove access token from local storage
		localStorage.removeItem(accessTokenKey);
		return true;
	}

	function showMainMenu() {
		var html = "";

		// if user is logged in
		if (localStorage.getItem(accessTokenKey)) {
			html += `<li>
				<a href='/login' onclick='return doLogout();'>Logout</a>
			</li>`;
		} else {
			html += `<li>
				<a href='/login'>Login</a>
			</li>`;

			html += `<li>
				<a href='/signup'>Signup</a>
			</li>`;
		}

		// show in main menu
		document.getElementById("main-menu").innerHTML = html;
	}
</script>

// return user data using access token
app.post("/getUser", async function (request, result) {
	var accessToken = request.fields.accessToken;

	var user = await database.collection("users").findOne({
		"accessToken": accessToken
	});

	if (user == null) {
		result.json({
			"status": "error",
			"message": "User has been logged out. Please login again."
		});
		return false;
	}

	result.json({
		"status": "success",
		"message": "Data has been fetched.",
		"user": user
	});
});

// empty the access token of user (logout)
app.post("/logout", async function (request, result) {
	var accessToken = request.fields.accessToken;

	await database.collection("users").findOneAndUpdate({
		"accessToken": accessToken
	}, {
		$set: {
			"accessToken": ""
		}
	});

	result.json({
		"status": "success",
		"message": "User has been logged out."
	});
});

<script>
    var onPostsPage = true;

    function getPosts() {
        // call ajax
    }
</script>

// user is logged in
window.user = response.user;

if (typeof onPostsPage !== "undefined" && onPostsPage) {
    getPosts();
}