LAB | Basic Auth
Introduction
In this lab, you are going to reinforce the knowledge on how to create basic authorization and authentication in a web app.
Requirements
- Fork this repo
- Clone this repo
Submission
-
Upon completion, run the following commands:
git add . git commit -m "done" git push origin master
-
Create Pull Request so your TAs can check up your work.
Instructions
In this lab, you literally have to recreate materials your instructors went through on the class. The point is not to blindly copy-paste them, but the opposite of that: to go once again, step by step through the process of registering users and authenticating them in the web app. Try to target all the weak spots, everything you missed to grasp during the lecture time, so you can ask your instructors and assistants to push you through the learning process.
Iteration 0 | Initialize the project
After forking and cloning the project, you will have to install all the dependencies:
$ cd lab-express-basic-auth
$ npm install
Now you are ready to start ๐
Iteration 1 | Sign Up
We have to create the signup feature - the goal is to enable our users to register in our application. The users have to provide the following information:
- Username: Must be unique in our application, and will identify each user.
- Password: Must be encrypted (you can use the
bcryptjs
npm package).
To complete this first iteration, you have to create the model as well as corresponding routes, and the views.
Iteration 2 | Login
Once the user has signed up, he/she should be able to authenticate themselves. This means the user should be able to login to the application. Your assignment in this iteration is to create corresponding routes as well as the views to let them log in to the application.
As you know, it is not enough just to allow users to login. Users should be able to maintain their "presence" in the application (stay logged in when going from a page to a page, after the refresh), and for that, there should be the user(s) in the session. You have learned that you can use the express-session
and connect-mongo
npm packages to create a session.
Iteration 3 | Protected Routes
At this point, you have implemented the basic authentication in this application. Your next assignment is to create some protected routes. Refresher: users can't visit these routes unless they are authenticated (logged in and exist in the session).
Let's create two different routes protected by authentication:
/main
- Add a funny picture of a cat and a link back to the home page/private
- Add your favoritegif
and an<h1>
denoting the page as private.
Create the views and add the middleware configuration to avoid accessing these routes without being authenticated.
Bonus | The validation
Validation during the signup process
You should handle validation errors when a user signs up:
- The fields can't be empty.
- The username can't be repeated.
Bonus | Validation during the login process
You should check if all the fields are correctly filled before authenticating the user.
Frontend validation
Let's add validations to our forms. Remember we have two different forms: sign up and log in.
Remember, when a user signs up or logs in, both the username and password fields must be filled in.
Check out the documentation at MDN. See if you can find a constraint that requires the user to fill a field before submission.
Extra Resources
Happy coding! โค๏ธ