GithubHelp home page GithubHelp logo

filipe-freire / lab-express-basic-auth Goto Github PK

View Code? Open in Web Editor NEW

This project forked from josecarneiro/lab-express-basic-auth

0.0 1.0 0.0 480 KB

JavaScript 75.01% SCSS 2.10% Handlebars 22.90%

lab-express-basic-auth's Introduction

logo_ironhack_blue 7

Basic Auth

Introduction

In this exercise, we are going to create a project where we will have all the basic authorization and authentication processes and features that you would in a real application.

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

Iteration 0 | Initialize the project

After forking and cloning the project, you have to install all the dependencies:

$ npm install

Now you are ready to start ๐Ÿš€

Iteration 1 - Sign Up

We have to create the sign up functionality of the application, that allows new users to create an account. The users have to provide the following information:

  • Username: Must be unique in our application, and will identify each user.
  • Password: Must be hashed, using bcrypt.

To complete this first iteration, you have to create the User model with mongoose, the routes, and the views.

Remember that you should to handle validation errors when a user signs up:

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

Iteration 2 - Login

Once the user has signed up, they have 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 connect-mongo.

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

Iteration 3 - Protected Routes

At this point, we have implemented basic authentication features. Now, we have to create some routes that are protected, meaning that users can't visit these routes unless they're authenticated.

Let's create two different routes protected by authentication:

  • GET /main - Add a funny picture of a cat and a link back to the home page
  • GET /private - Add your favorite gif 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 - Iteration 4 - Frontend validations

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 on MDN. See if you can find a constraint that requires the user to fill a field prior to submission.

Bonus - Iteration 5 - Profile Page

Create the following routes and corresponding views:

  • GET /profile - Should display basic information about the user, such as the username and user id. Should not be accessible to non-logged-in users.

Bonus - Iteration 6 - Editing Profile

Add a name property to the user schema that accepts a string and no has additional validators.

Create the following routes and request handlers/corresponding views:

  • GET /profile/edit - Should display a form that allows the user to edit their name.
  • POST /profile/edit - Gets name property from the request body and updates the user document.

Both routes should disallow non-logged-in users. Also, update the /profile view to display the user's name.

Extra Resources

Happy coding! ๐Ÿ’™

lab-express-basic-auth's People

Contributors

filipe-freire avatar jalexy12 avatar josecarneiro avatar lluisarevalo avatar mc100s avatar mjarraya avatar nizaroni avatar papuarza avatar sandrabosk avatar soniameller avatar tawebbcn avatar

Watchers

 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.