Login Backend and Frontend

Following the provided screenshot we need to make the page for login on our system. And the functionality behind it. Without the Forgotten Password functionality for now. This functionality can be added on a later stage, because it opens the system to a vulnerability we can skip for now.

Backend:

For the backend we need to do the logic for logging in, add to the basic Controller verification for the logged in user and the info that comes with it.

We can keep the current structure in hub_alpha. But use the user tables instead of the current editor ones.  We can change the password encryption because every user will be forced to change their password for the new version, but for now we can keep the current one. So best we extract the encryption and verification in such a way that we can easily change it.

When a user successfully logs in we are to keep an encrypted key for him in the session and in the database that we are to match if this is actually the logged in user. This key is encrypted randomly generated code and to be kept for every user and changed upon every login and cleared on logout. This way if an user’s key is compromised he just needs to relog and the old key will cease to exist. (Extended logging will be examined in a later implementation). We want to keep the current info kept for the user. Time of successful login and failed attempts, as they are kept currently.

For brute force protections we need to add to following logic:

• 30 seconds after 3 wrong attempts - Too many unsuccessful attempts. Please try again later.
• minute after the 4th - Too many unsuccessful attempts. Please try again later.
• 5 minutes after the 5th - Too many unsuccessful attempts. Please try again later.
• user block after the 6th wrong consecutive attempt with notification for the instance to be tracked by authorized personal - send a mail notification - Account blocked. Please contact support.

We will add an extra step. Which is two factor authentication. We will use the Google Two Factor authentication (2FA). For implementation use: https://github.com/antonioribeiro/google2fa . The Two Factor is to be required on every login. Except the first one. When we create a new user we need to prompt it to change password and after that to show the code to register the device. (Change password functionality and user generation is a separate flow that is not relevant here and for test we can just follow if the user has 2FA set up to verify if it works or not). For the 2FA we will need the same brute force protection rules as the login.

Logout functionality needs to clear the session, remove the key from the database and return to the login page

Frontend:

We need to implement it as shown in the attached image. Password field needs to have the option for show password and to show the last input symbol for 5 seconds before masking it. And we need to have an indicator if CAPS LOCK is on. All fields are required so no submission unless they are filled in. The submit button should be active but on error we can make the form shake or just mark the fields with a warning border. This can be determined during development what looks more pleasing. All functionality is to happen asynchronously except the forwards after success of course.

When the button is clicked we need to change the form with some type of loader. After that if success we need to display the QR Code generated for the 2FA (if it is the first time a user logs in) and the input for the code for validation. After that if success we can open the requested page. For now we are to print a message on a white screen with “successful login” and logout button. The QR Code will be used only for first time logins that need to setup 2FA. Otherwise we just need the input for it.(Change password functionality and user generation is a separate flow that is not relevant here )

In case a fail or brute force protection is triggered after submit we need to show the appropriate message.