Git Product home page Git Product logo

lab-express-basic-auth's Introduction

PP | Basic Auth

Learning Goals

After this learning unit, you will be able to:

  • Create a basic authorization, using Express, BCrypt, Mongo, and Mongoose.
  • Create a basic authentication, using Express, BCrypt, Mongo, and Mongoose.
  • Control the error in the server-side.
  • Validate the fields in the client-side.
  • Create a route protected with username and password.

Requirements

Submission

Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

Navigate to your repo and create a Pull Request -from your master branch to the original repository master branch.

In the Pull Request name, add your Campus city, your name, and your last name separated by a dash.

Deliverables

Please, push every file needed to make your app properly on Github before creating the pull request.

Introduction

In this Pair Programming exercise, we are going to create a project where we will have all the basic authorization and authentication process that we could have in a website.

We provide you an starter code that includes some of the packages you will need to complete the exercise. This packages are ejs, mongodb, and mongoose, and we have generated them with the express generator.

Iteration 1 - Sign Up

First of all, we have to create the signup of the application, that allow our users to register in the application. The users have to indicate the following information:

  • Username. It has to be unique in the database, and it will identify each user.
  • Password. It has to be encrypted, using bcrypt.

To accomplish this first iteration, you have to create the database model with mongoose, the route, the controller, and the view.

Remember that you have to control the errors when the user is signing up:

  • The fields can't be empty.
  • The username can't be repeated.

Iteration 2 - Login

Once the user has signed up, he has to be able to log in the application. You have to create the view and add the correct functionality in the controller to let them log in the application.

Once the user has logged in, you have to create a session with express-session and mongo-connect.

Again, we have to check out that the fields are correctly filled before try to authenticate him.

Iteration 3 - Protected routes

At this point, we have done all the authentication process. Now, we have to create some routes that are protected so the users can't visit them without being authenticated.

Let's create two different routes protected by authentication: main page and private page. You have to create the views and add the middleware configuration to avoid accessing them without being authenticated.

Iteration 4 - Front-End validations

Now, we are going to add some validations in our forms. Remember we have two different forms: sign up and login.

Remember that the different inputs we have can't be empty to save/login the user. Check out the documentation and try to find how we can ensure that the fields are not empty in the front-end.

Iteration 5 - Password Strength Measurement

To finish up with the exercise, we will add a jQuery plugin to measure the password strength when we sign up in the application. We recommend you to apply the Strength.js you can find in jQuery Cards, but feel free to look for another one.

Once it's applied, the result should be something like this:

This will be very helpful to our users, to let them know how sure is the password they are going to use to log in our application.

Summary

Once you are done with this exercise, you will have an excellent boilerplate that will include the basics of authorization and authentication.

Extra Resources

lab-express-basic-auth's People

Contributors

lluisarevalo avatar michielab avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.