/ds-02-post-login

Express API - Exercise - POST requests

Write a student user login - powered by POST

  • Create a server.js file

  • Install express

  • In server.js - Setup an express application

  • Paste in the following array of users: let users = [ {username: "User1", password: "PW1"}, {username: "User2", password: "PW2"}, {username: "User3", password: "PW3"}, ]

  • Parse incoming POST json data by the code: app.use( express.json() )

  • Define a POST route /login

    • console.log the received body (=> req.body)
    • For now: Just return an object with a message property back to the frontend:
      • e.g.: { message: 'User logged in successfully...' }
      • Use res.send() to send the given object back to the client as response

  • Test your POST route by either POSTMAN or RESTED client

    • Do you see the message object printed there?
    • Check the terminal where the backend runs: Do you see the form data printed here?
    • Great, then continue with the next step!

Code the login!

Now we want to actually send in a pair of username and password. And depending on if that users exist we want to return a login success, otherwise a login failure.

The route /login should now do the following:

  • read username and password data from req.body

    • the fields are accessible like so:
      • req.body.username
      • req.body.password

  • Now check: Does a user with given username and pw exist in our array of users?

    • If so: Send back the message "Login successful"
    • If not: Send back the message "Login failed"
    • Hint: You can check if an entry exists in an array with different array methods
      • Some recommendations: arr.find(item => ...) or arr.some(item => ...)
      • If you struggle with that: Look up the documentation of these methods, e.g. on W3C or MDN to see some examples

  • Test with POSTMAN or RESTED client if your login code works!

    • Test the output when sending a username & password that does not exist
    • Test the output when sending a username & password that does exist

Bonus Exercise - Let's login with a form!

  • Setup a folder "client"

  • Setup a file "login.html" within that folder

    • in login.html: provide an HTML form where a user can enter "username" and "password"
    • create a function "login"
    • call that "login" on submit
      • don't forget to prevent the default browser submit (=> e.preventDefault() )
    • perform a fetch() call to your POST url (http://localhost:5000/login)
    • send your form data in the body (don't forget the "stringify")
    • display the returned response in the browser console

  • In server.js: Provide a route GET /login

    • load the file login.html here and send it to the user
    • call "http://localhost:5000/login in the browser
    • if your form loads: fill out the form and submit it
    • check the browser console
      • you received the message from the server?