Web Dev Simplified - Login System Tutorial

Introduction

• Presenter: Kyle
• Topic: Setting up a login system for web applications
• Commonality: Most web projects require a user login component
• Goal: Provide a boilerplate for a login system

Project Overview

• Basic login and registration screens
• Handling login errors (wrong email, wrong password)
• Redirect based on login status

Initial Setup

• Tools Needed: Visual Studio Code, Node.js, NPM
• Project Initialization:
  • Create blank project
  • Initialize with NPM: npm init (use default values)
  • Install dependencies: npm install express ejs
  • Install dev dependencies: npm install --save-dev nodemon dotenv
• Files to Create:
  • .env for environment variables
  • .gitignore to ignore node_modules and .env

Configuring Package.json

• Script:

  "scripts": {
    "dev": "nodemon server.js"
  }
  

• Server Setup:
  • Basic Express setup
  • Create server.js
  • Start server: npm run dev

Setting Up Express

• Basic Routes:
  • GET /: Render homepage
  • Views Folder:
    • Create views/index.ejs
• EJS Setup:
  • Set as view engine in Express
  • Pass variables from server to EJS

Login and Register Pages

• Create Views:
  • login.ejs
  • register.ejs
• Form Handling:
  • Create forms in EJS files
  • Forms handle POST requests
• Routes for Forms:
  • POST /login
  • POST /register

Handling Form Data

• Middleware: Use express.urlencoded
• In-Memory Storage:
  • Users Array for storing users
  • Note: Suitable for tutorials, not production
• Password Hashing:
  • Use bcrypt: npm install bcrypt
  • Hash passwords before storing

Building Registration Functionality

• Error Handling: Use try-catch for async functions
• Storage: Push new user to users array
• Redirects: On success to login, on failure back to register

Implementing Login

• Library: Use Passport.js for authentication
  • npm install passport passport-local express-session express-flash
• Setup Passport:
  • Create passport-config.js
  • Initialize passport and strategies
  • Handle serialization and deserialization of users
  • Use flash messages for errors
  • Routes: Handle POST /login with passport

Protecting Routes

• Middleware Functions:
  • checkAuthenticated for protected routes
  • checkNotAuthenticated for guest-only routes (e.g., login, register)

Logging Out

• Delete Request: DELETE /logout
• Override Method: Use method-override for form submissions
  • npm install method-override
• Form: Create logout button in EJS that submits DELETE request

Summary

• Completed a basic login system with registration, authentication, and protected routes.
• Used various tools and libraries to manage users, sessions, and password security.

Conclusion

• Next Steps: Consider integrating with a database like MongoDB for production use.
• Further Learning: Check out related videos on web development and authentication.