Develop A Web Project With Authentication Using MEAN Stack

Introduction 

In today's Web-based application work, MEAN stack is one of the popular web development stacks. MEAN stack mainly consists of MongoDB, Express, Angular, and Node.js. MEAN has become much popular because it allows us to develop a program in JavaScript on both the client-side and server-side. The MEAN stack always enables a perfect combination of JavaScript Object Notation (JSON) development like MongoDB stores data in a JSON-like format, Express, and Node.js provide facility easy JSON based query creation and Angular allows the client to seamlessly send and receive the JSON documents.

MEAN is mainly used to develop a browser-based web application since Angular (client-side) and Express (server-side) are both the frameworks related to the web applications. Also using MEAN stack, we can develop a RESTful API Server with the help of Express and Node.js very easily. Since the RESTful API server is required to provide support related to the API endpoint so that those can be accessed from any applications or devices.

The application we will develop in this article is a basic Product Catalog that supports standard CRUD (Create, Read, Update, Delete) operations along with the authentication mechanism. So that nobody can access the product catalog without proper authorization. For the authorization purpose, we will use the JWT tokens and shown how to implement JWT token in this MEAN stack based application. For this purpose, we will break down this article into the below sub-category or parts. 

  1. Create a Basic Projects structure using Angular CLI.

  2. Develop API Server using Express to Insert Initial Data into Mongo Database

  3. Develop CRUD related API

  4. Develop Product List UI using Angular

  5. Develop UI for Add New Product in the List

  6. Implement API wrapper service

  7. Implement Router in Express App

  8. Create JWT token and implement in API endpoints for Authentication

  9. Implement Http Interceptor to pass a token from Angular Component to API request

  10. Implement User Login Screen to generate the token

  11. Implement the Route guard so that nobody can access product list UI without proper authentication.


Prerequisites

For developing this MEAN stack-based web application, the below-mentioned software needs to be installed in our machine

  1. Node.js (Latest Version)

  2. MongoDB

  3. Angular CLI 10 (Latest Version)



Project Structure

First, we need to create a blank folder structure for the MEAN stack-based web application. For that purpose, we will create the below project structure: