Building your first MEAN Stack Web Application – Part2

By | March 13, 2017
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

This is part-2 in series of developing a basic Web Application using MEAN Stack. MEAN is actually a combination of multiple language platforms to create applications. It is a shorthand wherein M stands for MongoDb, E stands for Express, A stands for Angular.js and N stands for Node.js.

In previous part of this MEAN Stack Application, we covered the followings:

  • Environment Setup for MEAN Web Development
  • Routes for MEAN Stack Application
  • User Registration Process

Allright so far so good, now lets start with validation and DAO part of register module.

In routes folder, where we have added method to render view for register, in the same file we will be adding code, for what will happen when there will a post request.

As we can see now we have added post on “/register” that is coming from UI. Now to get values from request the below syntax is used:

req.body.<fieldname>

So as we did , we received all four values from our view and now its up to controller to validate the values and store them in database.

Let’s first validate these values :

To validate we have already added validator module in our code main file that is main.js, now all we need to do is to validate the data. Syntax to validate data is:

So in the syntax above, Field_Name will be the name of field that needs to be validated, Error_message will the error message that we need to display in case validation is failed, Validator_Function is function that will be specific to data object, for example, for name we will check with NotEmpty(), where as for email we will check with NotEmpty() as well as with isEmail() methods. Lets now write code to validate data. In the same method that is written above we will add some validation part now, below is the code that will validate the data.

Now we have our validation code in place. Now question arises how these will work, how these error messages will displayed to client, who will be responsible for this and so and so. So our next task is to get all the errors and direct to register view. Lets do this:

The above piece of code will collect all the errors if any in validation part. Now our task to use this and forward to client. Lets write small piece of code for this as well.

So if there is any error, render the register view with errors in it. Before we restart the server and test, we need to add some piece of code in view part as well.

So this is the code that we will be adding to our register view. Traverse through each error object and display it.

Now we are good to go with testing part of register view. Lets restart the server and see if got all what we have expected or not. So in the example snipped below I have added email, username, password and not name, lets submit now and see what happens.MEAN Stack Example

Upon submitting this page what we will got is:MEAN Web Application Validation

And the same validation will work for all data fields. So we are good with validation part of our register module. Now when validation is working fine, we have data object, so we will happy to store the data in database and register user to our application. In next section we will be talking about storing data to database.

So now when everything goes fine and there is no validation error in our page, we will like to store data in database and register user to use our application. So what we will do is create a user object populate this with the values we got from request and pass to dao layer for persistence.

Here we have createUser method that we will write in dao layer part, next thing is, if everything goes fine and there is no error then we will notify user will success message, which will state that registration is successful and last thing we will do is to redirect the user to login page so that user can login, with the credentials.  Let’s now move to dao layer, where we will write createUser function.

Remember when we talked about the different folders we talked about models folder that is responsible for data interaction part with database. So we will start writing our code in user.js which is DAO layer for our application. Here we will be creating the createUser function.

This piece of code will store our data in database.  Lets test this, we need to start the server and in browser go to localhost:8777, since our app is listening at port number 8777.

On register page, we have filled the information and we are going to post the request. Lets see if our code works fine.Register New User

Upon post, what we got is the below screen. So our registration code is working fine and we have redirected to the sign-in page.MEAN Stack Tutorial

Great !! isn’t it, we have successfully registered user Ahmad. Lets check in our db for the values. MongoDB Query

So we have all the values stored what we have passed from UI.But there is one glitch, if you can at the db data, we are storing password in plain text. By doing so we are creating a security loophole in our application. It should not happen right, one can take dump of our database and easily hack our system. What to do now..

Calm down, here crypto comes to rescue us. So it’s a thumb rule that we should not and we must not store password as plain text in database. So what we will do is we will encrypt the password and then save to database.

First we need to have this module with our application, lets add this:

The code block above will generate hash for the given data using sha512 algorithm. So we are going to use this function and encrypt our password and try to persist.

Learn the Fundamentals of Angular 2 and get ready to create your own web application
Click Here to Take the Video Course Now.
Course Contents are:

  • Introduction
  • Displaying Data
  • User Input and Data Binding
  • Forms using Angular2
  • Services and Dependency Injection
  • Routing


In createUser function, we will call this generateHash function. Lets amend the createUser method now:

And we are all set to go and test our application. Before proceeding we will be going to remove the data from database, since it was incorrect. Lets remove data and restart server.MongoDB Remove User

The with the same dataset we are going to register user, So we are not repeating the same screens as above, assuming that we have inserted the same data as above. Lets  check in database now:Query MongoDB

So if you can see, now we have encrypted password in our database, and this completes registration module.

Let’s start writing code for login module.

So we will use something called passport for login module. First we need to import passport and passport-local in our code so we can use the capabilities of this.

Here we have created two ref , one for passport and other for Passport-local. Since we will be using passport –local Strategy in our login module.

“Passport overview from http://passportjs.org/docs

Passport is authentication middleware for Node. It is designed to serve a singular purpose: authenticate requests. When writing modules, encapsulation is a virtue, so Passport delegates all other functionality to the application. This separation of concerns keeps code clean and maintainable, and makes Passport extremely easy to integrate into an application.
In modern web applications, authentication can take a variety of forms. Traditionally, users log in by providing a username and password. With the rise of social networking, single sign-on using an OAuth provider such as Facebook or Twitter has become a popular authentication method. Services that expose an API often require token-based credentials to protect access.
Passport recognizes that each application has unique authentication requirements. Authentication mechanisms, known as strategies, are packaged as individual modules. Applications can choose which strategies to employ, without creating unnecessary dependencies.

One we are setup with passport objects, like register we will write post handling for login. Lets write the code for the same:

So in the code above we are using authenticate method of passport, which has a parameter as ‘local’, since we are using local database, other parameters are success and failure URL’s and a Boolean flag as do we need to display the flash messages or not.

Now passport local will come into play and in next section we will be talking about fetching values from database and authenticate user.

So the first line of our code is basic syntax of passport object which tells passport that which strategy has been used and accordingly the object will be created, like in our example we are using passport-local strategy, so the object we have created is PassportLocal. It was a basic fix syntax, and the next line as well, which provides username and password from vie. Our work starts from next line, so we have username and password data in our router file. Now what we will do is we will make a call to database and try to get the user based on username. Remember when we have crated schema we kept usename as index.

Traverse to user.js file that is dao layer of our application. In this file we will be creating a function to fetch user data from database.

So we made a call to database with query username. It will return the user data for the usename we have passed in the query, and the same function is called from our router. Now the below piece of code:

That is in the router post method for login , will check if there is any error or not, if there is any error, error will be displayed on page and it will redirected to the URL that we have provided. If there is no data in foundUser, (foundUser is just a parameter name, that we got as callback from dao layer) ie. There is no data present in database corresponding to the username. So if there is no data we will throw and error message as ‘Authenticaion failed, Invalid Username !!’. If there is data present in database corresponding to the username, next step is to validate password. So again we will go to dao layer and write a method that will have code to validate password.

One more interesting thing here to notice, if you can remember we have saved our password in encrypted from using sha512 crypto algorithm. Now glitch is that we can not decrypt the password, once encrypted its encrypted, so how we will compare and check the passwords now and how we will authenticate the user. To overcome this what we will do is we will encrypt the password with the same sha512 algorithm and then compare the password both. Lets write code for this:

So the most important part is to generateHash here, we have reused the same method that we have created at the time of registration for hashing. If both hash are same then we passing true to router and if not then we will pass false.

One more thing that we need to do is, when user log in we will display welcome message with his name, so we need user’s name on view part as well. Also once user is logged in he should not able to see the Register and Login links. And when user is logged out he should not see the Home and Logout link.

To achieve this we need to modify our main.js file and add local for user as well. Lets add this:

in app.use method where we are setting flash messages we will add this line.  Now at view part we will use this local to show hide links.

So we will add this check in our layout file. The code says that if user is null that we are setting in main.js then user is not logged in and he is good to go with Register and login links.

Note: In order to keep things simple, we didn’t beautify the application but that can be easily done using bootstrap framework. You can find all about bootstrap framework here.

In index view we are going to use the user objet to fetch user’s name to display welcome message:

Lets test with putting it all together. For that we need to restart the server again lets restart and test.Web App Login

So we are trying to login user Ahmad, lets see if Ahmad can login to our system:MEAN Stack Book Store Example

Allright so Ahmad is successfully logged in and he can see the recent orders he placed with our online book store.

Last thing is to check logout functionality. Lets check:MEAN Stack App Example

Allright, everyting is working fine, well and good. So it completes this tutorial for MEAN stack user registration and login module.

More MEAN Stack and Related Tutorials:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest