Week 10 - Development - Login and Registration Page

Overview

This week we have started the development process on our app. We mainly worked on the login and the registration page on both the front and back end so we can have different users use the app.

Login Page

We have discussed that logins are essential since patient’s data should only be viewable by certain users.

Once the user has entered their email and password, onSubmitForm will be triggered and the credentials will be passed to the backend to be checked. The email will first be checked to have to correct format, then a query will be performed to the database using pool.query. If there is a matching email and the corresponding password matches with bcrypt.compare, a success message will pop up to the user. Otherwise, the user will not be able to login and be notified with invalid credentials.

Since we think the user should be able to remain logged in for an amount of time, i.e., a user should not have to login whenever they close the page, we decided to assign a JWT (JSON Web Token) using jwtGenerator to the user. By doing so, the user can keep logged in if they have the token and we can also keep track of the login status of a user.

Register Page

We also made the register page so that it is possible to create new users. It acts similarly to the login page, but it checks for existing users, so no duplicate users will be created. After the checks, the new user data will be inserted into the database by pool.query and assigns JWT at the same time.

To store the registered users, we created a database using PostgreSQL and store the email, name and password into the users table with the user_id as its primary key. This means we can use query instructions to check for emails and passwords. We also made sure that the user_email is unique so once email can only be used once.

Here is an example of when the registration process failed due to incorrect input of the email.

Next Steps

We will continue to develop other functionalities by splitting up the tasks and expanding the structure of our database. At the same time, we will keep our clients up to date so that we can have relevant feedbacks on our current development.