HOW TO CREATE A LOGIN PAGE USING ANGULAR AND NODE JS
Introduction
The Login Function is something mandatory when it comes to any kind of system which will build according to the industry standards. Development of the login page which is rich with features will definitely provide a better user experience to the users. Even if there are different user levels it is possible to provide the same login page and differentiate the level of the user from the backend. In this tutorial, you will learn how to develop a feature-rich login page by using the industry standards like tokens and all.
Prerequisites
To complete this tutorial, you will need the following as the prerequisites. Please click on the links to learn more about the prerequisites.
● An IDE
● Basic Knowledge of HTML, CSS, and Angular
○ https://www.w3schools.com/html/
○ https://www.w3schools.com/css/
● Installed the Node JS successfully
Step 01 — Login UI
First, you have to create the login interface. Here we have used the Mat computer library with Angular framework. To learn more about this framework, you can refer to this particular website. https://material.angular.io/. In the login interface, you must include two text fields for username and password, one check box for remembering me option, a link to action button for forgetting your password function, and a button for login.
Note: In this particular scenario, there can be two user types who will be known as students and lecturers.
Step 02 — Login Function
To implement the core of the login function you have to write an HTML file along with a typescript file. As the image shows in the HTML file you have to use form validation. As an example, user name validation and password validation are the two validations used in this file.
For that particular login function, you have to write the typescript file as follows.
Backend Authentication
In this api.js, it takes the user inputs of username, password and then execute the check credentials which we explained after this. According to that api.js provides the response to the server whether it corrects to proceed further or not as an error message.
In this check credentials file it compares the existing data with the provided data by user and compare them. According to result it provide the status to the api.js.
Step 03 — Token
In this step, you have to write the token.html file which will be playing a major role in a login page. For this, you can use the code below.
Note: The token is a standard mechanism used in all high-level projects in the industry to keep control of the login function. Basically, here what happens is whenever the user input the user name and password then it sends them to the backend. In the backend, the data received as user inputs will check with the data included in the database. If that particular user data is matched with data in the database and the user is valid, the backend generates the token with an expiration time. Further, Token contains the header and payload. After generating the token it will send to the browser and save as a session or cookie. Then after all the actions will be performed as a registered user by using the generated token. Simply in each request, the token is included in the header.
Step 04 — Forgotten Password
In this step, you have to do the following coding and form validations to implement the part of the forgotten password feature. The main objective of this is to get the username of the particular user and send the recovery option to each email address.
Step 05 — Verification
In this section, you have to do the coding for HTML to get the recovery email information from the user and validate the email address. Simply here also you have to use form validations before complete the verification process.
For the above particular verification part, you have to write the typescript file as follows.
Conclusion
By following these steps one by one you can easily create a feature-rich login page according to the industry standards.