In this tutorial, I will be making a simple authentication flow using the technologies that we have already discussed. By the end of this tutorial, you would have made a flow similar to the one indicated by the diagram below. This will also help you see how you can make your views more intelligent, readable and easy to build.
In the PREVIOUS POST we build the application views. To give some intelligence to those views
we are going to use some of the amazing features of JADE. I recommend you go through the
documentation of JADE to get an idea how decision making can be done in the views only.
This will be required, for example, while rendering a ‘Logout’ button. This button should only be shown if the user is logged in. So, instead of checking on each render call, we will put the logic to check and then render the appropriate view in the views(topbar.jade, in this case) only.
Lets go one step at a time here. We are assuming here that the user credentials are already present in the database. If you are referring to the project’s CODE, then just run the file named ‘insertUser’ in the ‘/scripts’ folder. This will insert an user in db with username : test1 and password : test1.
For this example, this can even be hard coded.
Step 1 : User Authentication
This step will involve a simple form POST which sends user credentials to the server where the user login and password can be authenticated the usual way. We will be using mongodb for storing user information and the stored data will be used to authentication. The following snippet shows the route for handling login POST request. This is submitted when the user enters the login and password in form provided on the topbar. We set a handler on the ‘Login’ button so that basic input validation can be done on the values that the user has entered. The following code will POST the data to server.
On the server side, we do a simple user validation and return the appropriate response.
Step 2 : Setting user in session.
You might have already noticed in the previous code snippet that we have already done this part. After authenticating the user, we have to set the user information in the session so that it is available during the entire duration the user is logged in. We do this by setting the ‘session’ parameter of ‘req’.
Step 3 : Dynamichelpers.
To quote from expressjs docs on dynamic helpers – ” Dynamic view helpers are simply functions which accept req, res, and are evaluated against the Server instance before a view is rendered”.
What this means is that if we want some logic to execute before rendering each and every view, we can use dynamic helpers. So in the case of our application, we are going to use this functionality to set a ‘session’ object. Put the following code in ‘app.js’.
The object ‘session’ will now be available to every view which will right now contain user information. In a similar way, any information that is always required by the views can be added by just returning that object in dynamicHelpers. Many dynamic helpers can be added in the following manner as required.
The ‘someInfo’ now will be available in the similar way to each and every view.
I recommend that the reader go through the examples given in expressjs docs to gain a better understanding of dynamicHelpers and other such utility functions provided by express.
Step 4 : Check and Render
After the previous step, will will always have a ‘session’ object available in all the views. The only thing to do now is to check whether that ‘session’ object contains a valid ‘user’ or not while rendering the view. In this case, we will do this check (in the view itself) each time the ‘topbar’ is loaded. If the ‘session’ contains a ‘user’, then a logout button and a link to admin panel will be shown, otherwise, the home screen will be shown.
This will be achieved using a feature in JADE called CONDITIONALS. The following snippet shows its use in our code.
As can be seen, each time the topbar is rendered, the conditional statement will make sure the appropriate widgets are rendered i.e. If a user is logged in, then a ‘Logout’ button, ‘Admin’ tab and a prompt is shown otherwise, the login form is shown.
Step 5 : Logout
Now the final thing to do is to remove the user from session when the user hits ‘Logout’ button. This is as easy as issuing a GET request on logout to the URL ‘/logout’, removing the user from the session, and redirecting the request back to home page (‘/’). We already have done the first part in the previous step(look at the href for Logout button). For invalidating the user in session and redirecting back to homepage, we write the following route on server.
That’s about it. You can now log in and out and the view will take care of which widgets to show and hide.
The completed code for all of this is available on github. All you have to is a clone 🙂