{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-8/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n
This blog post is part of a series. You must finish part-1, part-2, part-3, part-4, part-5, part-6 & part-7 before continuing here.
\n

Defining & creating the User model

\n

We know that we need to store user details in the database when a user registers in our application. In order to make this happen, we need to define mongoose models to interact with the database.

\n

We will start by creating a models folder inside the server folder. Then, we will create a file named userModel.js inside the models folder.

\n

Copy the code below and paste it in the userModel.js file.

\n
server/models/userModel.js
\n
const mongoose = require("mongoose")\n\nconst userSchema = new mongoose.Schema({\n  firstName: {\n    type: String,\n    required: true,\n  },\n  lastName: {\n    type: String,\n    required: true,\n  },\n  email: {\n    type: String,\n    unique: true,\n    required: true,\n  },\n  password: {\n    type: String,\n    required: true,\n  },\n})\n\nconst User = mongoose.model("User", userSchema)\n\nmodule.exports = User
\n

Above, we have used the Schema constructor to create a new schema instance, defining various fields inside it in the constructor’s object parameter. Note that the fields that we have defined (firstName, lastName, email, password) are the fields that we ask a user to fill in the registration form.

\n

Then, we have compiled the userSchema into a user model using the mongoose.model() method. Note that the first argument to the model method is the singular name of the collection that will be created for the User model (Mongoose will create the database collection for the User model), and the second argument is the schema that we want to use in creating the User model.

\n

In the email field, we have set the unique option to true which tells mongoose that a user’s email must be unique.

\n

Schema

\n

The Schema allows you to define the fields stored in each document along with their validation requirements and default values. A schema can have an arbitrary number of fields - each one represents a field in the documents stored in MongoDB.

\n

Model

\n

Once you have created a schema, you can use it to create models. Schemas are compiled into models using the mongoose.model() method. A model maps to a collection of documents in the MongoDB database. The documents will contain the fields that you define in the model Schema.

\n

In mongoose, a model is a class. The model represents a collection of documents in the database you can search while the model’s instances represent individual documents that you can save and retrieve.

\n

Setting up a web server using Express

\n

Install Express in the mern-auth folder using the following command:

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npm i express
\n

Create a file called index.js in the server folder and paste the following code snippet in the file.

\n
server/index.js
\n
const express = require("express")\nconst dotenv = require("dotenv")\nconst connectDB = require("./config/db")\n\ndotenv.config()\n\n// connect to the database\nconnectDB()\n\nconst app = express()\n\napp.use(express.json())\n\nconst PORT = process.env.PORT || 5000\n\napp.listen(PORT, () => {\n  console.log(`Server listening on port ${PORT}`)\n})
\n

We require and configure dotenv at the top of the application.

\n

We use express.json(), which is a built-in middleware function in Express to parse incoming requests with JSON payloads. A new body object containing the parsed data is populated on the request object (i.e. req.body).

\n

We also need to add the PORT environment variable in the .env file.

\n
mern-auth/.env
\n
PORT=5000\nMONGO_URI=mongodb+srv://sundaray:<password>@sandbox.y8blv.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
\n

Note that whenever you make any changes to the .env file, you will have to stop and restart the server.

\n

Enabling server restart on file change

\n

Any changes we make to our server-side code will not be visible until we restart the server. It quickly becomes irritating to stop and restart the server every time we make a change. So, we will use a tool for this purpose called nodemon and install it as a development dependency.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npm i --save-dev nodemon
\n

Add the following highlighted code snippet in the package.json file in the mern-auth folder.

\n
mern-autj/package.json
\n
{\n  "name": "mern-auth",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "server": "nodemon server/index.js"\n  },\n  "author": "",\n  "license": "ISC",\n  "dependencies": {\n    "dotenv": "^8.2.0",\n    "express": "^4.17.1",\n    "mongoose": "^5.12.4"\n  },\n  "devDependencies": {\n    "nodemon": "^2.0.7"\n  }\n}
\n

Start the Express server using the following command:

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npm run server
\n

We will get the following output in the terminal.

\n

\n \n \n \n \n

\n

Our server is successfully listening on port 5000 and our application is connected to the MongoDB database.

\n

We have one minor issue to fix.

\n

Currently, we have two servers. We have one server created by create-react-app listening on port 3000. We also have our Express server listening on port 5000. We can start both these servers on separate terminals, but it gets tiring soon. We will use a tool called concurrently which will help us run multiple npm scripts in parallel.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npm i concurrently
\n

Now update the package.json file.

\n
mern-auth/server
\n
{\n  "name": "mern-auth",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "client": "npm run start --prefix client",\n    "server": "nodemon index.js",\n    "dev": "concurrently \\"npm run client\\" \\"npm run server\\""\n  },\n  "author": "",\n  "license": "ISC",\n  "dependencies": {\n    "concurrently": "^6.0.2",\n    "dotenv": "^8.2.0",\n    "express": "^4.17.1",\n    "mongoose": "^5.12.4"\n  },\n  "devDependencies": {\n    "nodemon": "^2.0.7"\n  }\n}
\n

Now, we can start the create-react-app server using the command npm run client. We can start the Express server using the command npm run server and we can start both the servers in parallel using npm run dev.

\n

Setting up routes & creating route handlers

\n

Whenever a new user fills in the registration form and clicks on the Register button, we will make a POST request to the /api/users/register endpoint.

\n

Inside the server folder, create a folder named routes. And inside the routes folder, create a file named userRoutes.js.

\n
mern-auth/routes/userRoutes.js
\n
  "/register",\n  asyncHandler(async (req, res, next) => {\n    const { firstName, lastName, email, password } = req.body;\n\n    const userExists = await User.findOne({ email });\n\n    if (userExists) {\n      const err = new Error("User already registered");\n      err.status = 400;\n      next(err);\n    }\n\n    const user = await User.create({\n      firstName,\n      lastName,\n      email,\n      password,\n    });\n\n    res.json({ message: "New user created" });\n  })\n);\n\nmodule.exports = router;
\n
\n

Note: In userRoutes.js file, we have defined route handler callbacks directly inside the router functions. You will often come across blog posts/courses, where the callbacks are defined separately inside a controller module. Either of the approach is fine.

\n
\n

Above, we use an npm package called express-async-handler to handle exceptions inside of async express routes and pass them to express error handlers.

\n

The logic inside the route handler function is as follows:

\n

Check whether we already have a user in the database with the provided email address. If yes, send an error message - User already registered - to the client. Otherwise, create a new document in the database and send a message - New user created - to the client.

\n

Note that when a user exists, we create a custom error and pass it to the next() function. Any error passed to the next() function is handled by the built-in error handler in Express. However, we are going to define a custom error handler.

\n

At the end of the userRoutes.js file, we export the Router object.

\n

Defining a custom error handler

\n

Inside the server folder, create a folder named middleware and inside the middleware folder create a file named errorMiddleware.js and paste the following code snippet in the file.

\n
server/middleware/errorMiddleware.js
\n
const globalErrorHandler = (err, req, res, next) => {\n  err.status = err.status || 500\n  res.status(err.status).json({\n    message: err.message,\n    stack: process.env.NODE_ENV === "production" ? null : err.stack,\n  })\n}\n\nmodule.exports = globalErrorHandler
\n

There is one issue that we need to fix though. In the userRoutes.js file, you will notice that we are saving the user’s password in the database as plain text. This poses security concerns. Therefore, we must hash the password before we save it to the database. In order to hash the password, we will use a package called bcryptjs.

\n
\n

Hashing: A secure way to store passwords is to transform them into data that can’t be converted back to original passwords. This one way security mechanism is known as hashing.

\n
\n

One more thing: we will not hash the password inside the route handler function. Instead, we will mongoose pre middleware function, which is specified on the schema level.

\n
\n

Mongoose middleware: In Mongoose, middlewares let you attach your own custom logic to built-in mongoose functions. Middleware functions are sometimes called hooks. That’s because middlewares let you hook into existing functions.

\n
\n

First, install bcryptjs.

\n
  PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npm i bcryptjs
\n

Add the highlighted code snippets below in userModel.js.

\n
server/models/userModel.js
\n
const mongoose = require("mongoose")\nconst bcrypt = require("bcryptjs")\n\nconst userSchema = new mongoose.Schema({\n  firstName: {\n    type: String,\n    required: true,\n  },\n  lastName: {\n    type: String,\n    required: true,\n  },\n  email: {\n    type: String,\n    unique: true,\n    required: true,\n  },\n  password: {\n    type: String,\n    required: true,\n  },\n})\n\nuserSchema.pre("save", async function () {\n  const salt = await bcrypt.genSalt(10)\n  this.password = await bcrypt.hash(this.password, salt)\n})\n\nconst User = mongoose.model("User", userSchema)\n\nmodule.exports = User
\n

Mongoose will call the pre(‘save’) function before sending the fields to the database. Hold on a sec. Where are we using the save() function? Notice that in the route handler function responsible for handling the /api/users/register endpoint, we are using the create function of the User model to create a new user. The create() function is actually a thin wrapper around the save() function.

\n

The genSalt() method takes in a number known as salt rounds (aka cost), which is a measure of the no. of steps involved in creating the hash. The second argument to the hash() method is salt, which is a random string combined with the password to generate the hashed password.

\n

Server-side form validation

\n

We have already discussed the point that we should never trust the data coming from the client. It is possible for a malicious user to by-pass client-side validation and send bad data to the server. So, it’s important that we do server side validation of the form data as a security best-practice.

\n

We will use a package called joi, which is a schema description language and data validator for JavaScript.

\n

Install joi.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npm i joi
\n

Inside the server folder, create a folder named validation and inside the validation folder create a file named validate.js.

\n

Inside the validate.js file, paste the following code snippet.

\n
server/validation/validate.js
\n
const Joi = require("joi")\n\nconst registrationValidation = formData => {\n  const schema = Joi.object({\n    firstName: Joi.string().required().max(20),\n    lastName: Joi.string().required().max(20),\n    email: Joi.string().required().email(),\n    password: Joi.string().required().min(5),\n  })\n\n  return schema.validate(formData)\n}\n\nmodule.exports = { registrationValidation }
\n

Now, add the highlighted code snippets in userRoutes.js file.

\n
server/routes/userRoutes.js
\n
onst express = require("express");\nconst asyncHandler = require("express-async-handler");\nconst User = require("../models/userModel");\nconst { registrationValidation } = require("../validation/validate");\n\nconst router = express.Router();\n\nrouter.post(\n  "/register",\n  asyncHandler(async (req, res, next) => {\n    const { error } = registrationValidation(req.body);\n\n    if (error) {\n      const err = new Error(error.details[0].message);\n      err.status = 400;\n      next(err);\n    }\n\n    const { firstName, lastName, email, password } = req.body;\n\n    const userExists = await User.findOne({ email });\n\n    if (userExists) {\n      const err = new Error("User already registered");\n      err.status = 400;\n      next(err);\n    }\n\n    const user = await User.create({\n      firstName,\n      lastName,\n      email,\n      password,\n    });\n\n    res.json({ message: "New user created" });\n  })\n);\n\nmodule.exports = router;
\n

Using the Router module

\n

To use the Router module, we require the userRoutes.js module in index.js and then call use() on the Express application (app) to add the router in the middleware handling chain.

\n

We also require the errorHandler.js module and define it after all the app.use() calls, because an error handler must be the last middleware in the request processing pipeline.

\n
server/index.js
\n
const express = require("express")\nconst dotenv = require("dotenv")\nconst globalErrorHandler = require("./middleware/errorMiddleware")\nconst userRoutes = require("./routes/userRoutes")\n\nconst connectDB = require("./config/db")\n\ndotenv.config()\n\nconnectDB()\n\nconst app = express()\n\napp.use(express.json())\n\napp.use("/api/users", userRoutes)\n\napp.use(globalErrorHandler)\n\nconst PORT = process.env.PORT || 5000\n\napp.listen(PORT, () => {\n  console.log(`Server listening on port ${PORT}`)\n})
\n

Go to part-9

\n","frontmatter":{"title":"Implement JWT Based User Authentication in a MERN Stack App - Part 8","date":"2021-05-23"}}},"pageContext":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-8/","prev":{"fields":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-7/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-9/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}