Expense Tracker - JWT Authentication & User Specific Expense Managemen

A full-stack Expense Tracker application built using Node.js, Express.js, MySQL, Sequelize ORM, bcrypt, and MVC Architecture. Users can securely sign up, log in, and manage their daily expenses.

📌 Project Overview

This project implements the Secure User Authentication System for the Expense Tracker application.

Users can:

Register securely using bcrypt password hashing
Login using JWT Authentication
Create personal expenses
View only their own expenses
Delete only their own expenses
Store expenses linked to their account
Access protected routes using JWT tokens

The project follows the MVC (Model-View-Controller) Architecture and uses Sequelize ORM for database operations.

✨ Features

Authentication Features

User Registration
Login Authentication
bcrypt Password Hashing
JWT Token Generation
JWT Token Verification
Protected Routes
Authentication Middleware

Expense Management Features

Add Expense
View User Specific Expenses
Delete Own Expenses
Expense Categories
Expense Persistence
Expense Reload on Refresh

Database Features

User Table
Expense Table
One-To-Many Relationship
Foreign Key Mapping

New Section: JWT Authentication

## 🔐 JWT Authentication

### Why not send User ID from Frontend?

Sending userId directly from frontend is insecure because users can modify the request and access another user's data.

Example:

```json
{
  "userId": 5
}
```

A malicious user could change:

```json
{
  "userId": 1
}
```

and access someone else's expenses.

Therefore user identity must be verified using JWT.

---

### Token Generation

After successful login:

```text
User Login
      ↓
Verify Password
      ↓
Generate JWT Token
      ↓
Send Token To Frontend
```

Example:

```js
jwt.sign(
    {
        userId: user.id,
        name: user.name
    },
    'secretkey'
);
```

---

### Token Verification

Frontend sends token:

```text
Authorization: JWT_TOKEN
```

Backend verifies token:

```js
jwt.verify(token, 'secretkey');
```

If token is valid:

```js
req.user = decodedToken;
```

User information becomes available in all protected routes.

New Database Relationship Section

## 🔗 User & Expense Relationship

### One User

Can Have

### Many Expenses

```text
User
  │
  ├── Expense 1
  ├── Expense 2
  ├── Expense 3
```

### Sequelize Relationship

```js
User.hasMany(Expense);

Expense.belongsTo(User);
```

This automatically creates:

```text
userId
```

inside Expense Table.

Update Expense Schema

## 🗃 Expense Table Schema

| Field       | Type    |
|------------|---------|
| id         | INTEGER |
| amount     | FLOAT |
| description| STRING |
| category   | STRING |
| userId     | INTEGER |

New Protected Routes Section

## 🛡 Protected Routes

### Add Expense

```http
POST /expense/add-expense
```

Protected using:

```js
auth
```

middleware.

---

### Get Expenses

```http
GET /expense/get-expenses
```

Returns only logged-in user's expenses.

---

### Delete Expense

```http
DELETE /expense/delete-expense/:id
```

User can delete only expenses created by them.

Update Expense Flow

## 💰 User Specific Expense Flow

```text
User Login
      ↓
JWT Token Generated
      ↓
Token Stored In LocalStorage
      ↓
Expense Added
      ↓
Token Sent In Header
      ↓
Middleware Verifies User
      ↓
userId Extracted
      ↓
Expense Saved With userId
      ↓
Expense Linked To User
```

New Middleware Section

## 🔒 Authentication Middleware

File:

```text
middleware/auth.js
```

Responsibilities:

```text
Read JWT Token
Verify Token
Extract User Information
Attach User To Request
Allow Access To Protected Routes
```

🔐 Password Security

Before bcrypt

Database stored passwords like:

123456
admin123
password

This is unsafe because anyone with database access can view user passwords.

After bcrypt

Passwords are stored as hashes:

$2b$10$RkK9j...  
$2b$10$gXfP7...

Actual passwords are never stored in plain text.

Signup Flow

User Password
      │
      ▼
bcrypt.hash()
      │
      ▼
MySQL Database

Login Flow

User Password
      │
      ▼
bcrypt.compare()
      │
      ▼
Authentication Result

🛠 Tech Stack

Node.js
Express.js
bcrypt
MySQL
Sequelize ORM
JavaScript
HTML5
CSS3
Axios
CORS

📁 Project Structure

expense-tracker
│
├── controllers
│   ├── user.js
│   └── expense.js
│
├── models
│   ├── user.js
│   └── expense.js
│
├── routes
│   ├── user.js
│   └── expense.js
│
├── util
│   └── database.js
│
├── views
│   ├── signup.html
│   ├── signup.css
│   ├── signup.js
│   ├── login.html
│   ├── login.css
│   ├── login.js
│   ├── expense.html
│   ├── expense.css
│   └── expense.js
│
├── images
│
├── app.js
├── package.json
└── README.md

🔐 Authentication APIs

Signup API

POST /user/signup

Request Body

{
  "name": "Yash",
  "email": "yash@gmail.com",
  "password": "123456"
}

Process

Validate User
       ↓
Check Existing Email
       ↓
bcrypt.hash()
       ↓
Store Hashed Password
       ↓
Success Response

Success Response

{
  "message": "User created successfully"
}

Status Code:

201 Created

Duplicate User Response

{
  "message": "User already exists"
}

Status Code:

409 Conflict

Login API

POST /user/login

Request Body

{
  "email": "yash@gmail.com",
  "password": "123456"
}

Process

Find User
      ↓
bcrypt.compare()
      ↓
Password Match ?
      ↓
Login Success

Successful Login

{
  "message": "User login successful"
}

Status Code:

200 OK

Invalid Password

{
  "message": "User not authorized"
}

Status Code:

401 Unauthorized

User Not Found

{
  "message": "User not found"
}

Status Code:

404 Not Found

💰 Expense APIs

Add Expense

POST /expense/add-expense

Request Body

{
  "amount": 500,
  "description": "Petrol",
  "category": "Fuel"
}

Success Response

{
  "success": true,
  "expense": {
    "id": 1,
    "amount": 500,
    "description": "Petrol",
    "category": "Fuel"
  }
}

Status Code:

201 Created

Get Expenses

GET /expense/get-expenses

Status Code:

200 OK

Delete Expense

DELETE /expense/delete-expense/:id

Status Code:

200 OK

📤 Authentication Flow

User
 ↓
Frontend Form
 ↓
Axios POST Request
 ↓
Route
 ↓
Controller
 ↓
Model
 ↓
MySQL Database
 ↓
Response
 ↓
Frontend Alert

🗃 User Table Schema

Field	Type
id	INTEGER
name	STRING
email	STRING
password	STRING

Add Expense Flow

## 💰 Expense Flow

```text
User Login
      ↓
Expense Page Opens
      ↓
Enter Expense Details
      ↓
Axios POST Request
      ↓
Expense Route
      ↓
Expense Controller
      ↓
Expense Model
      ↓
MySQL Database
      ↓
Expense Displayed on Screen

## 🏗 MVC Architecture

### View

```text
signup.html
signup.css
signup.js

login.html
login.css
login.js

Controller

controllers/user.js

Responsibilities:

Receive Requests
Validate Data
Check Existing Users
Verify Login Credentials
Send Responses

Model

models/user.js

Responsibilities:

Database Operations
Store User Data
Manage User Records

Previous MVC Architecture Diagram

Updated MVC Architecture Diagram

expense-tracker
│
├── controllers                 ←  Controller Layer
│   ├── user.js
│   └── expense.js
│
├── models                      ←  Model Layer               
│   ├── user.js
│   └── expense.js
│
├── routes                      ←  Route Layer
│   ├── user.js
│   └── expense.js
│
├── util
│   └── database.js            ←  Database Configuration
│
├── views                      ←  View Layer
│   │
│   ├── signup.html
│   ├── signup.css
│   ├── signup.js
│   │
│   ├── login.html
│   ├── login.css
│   ├── login.js
│   │
│   ├── expense.html
│   ├── expense.css
│   └── expense.js
│
├── images
│   ├── signup-page.png
│   ├── login-page.png
│   ├── expense-page.png
│   ├── add-expense.png
│   ├── expense-table.png
│   ├── delete-expense.png
│   ├── mysql-data.png
│   └── mvc-architecture.png
│
├── app.js                   ←  Application Entry Point
├── package.json 
├── package-lock.json
└── README.md

MVC Flow Diagram

┌─────────────────────┐
│       VIEW          │
│ HTML • CSS • JS     │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│      ROUTES         │
│ routes/user.js      │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│    CONTROLLER       │
│ controllers/user.js │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│       MODEL         │
│ models/user.js      │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│   MYSQL DATABASE    │
└─────────────────────┘

📸 Project Screenshots

Signup Page

Login Page

Network Requests

Successful Responses

Error Handling

Password Bcrypt

Expense Dashboard

Add Expense

Delete Expense

User Per Login

Database Records

Expense List

🚀 Future Improvements

* Premium Membership
* Leaderboard Feature
* Expense Pagination
* Download Expense Reports
* Forgot Password
* Razorpay Integration
* AWS Deployment
* Monthly Analytics
* AI Powered Expense Insights

👨‍💻 Author

Yashav Shukla

Node.js • Express.js • MySQL • JavaScript

🌐 GitHub Profile

⭐ If you found this project helpful, consider giving it a star on GitHub!

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
controllers		controllers
images		images
middleware		middleware
models		models
node_modules		node_modules
routes		routes
util		util
views		views
README.md		README.md
app.js		app.js
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

Expense Tracker - JWT Authentication & User Specific Expense Managemen

📌 Project Overview

✨ Features

Authentication Features

Expense Management Features

Database Features

New Section: JWT Authentication

New Database Relationship Section

Update Expense Schema

New Protected Routes Section

Update Expense Flow

New Middleware Section

🔐 Password Security

Before bcrypt

After bcrypt

Signup Flow

Login Flow

🛠 Tech Stack

📁 Project Structure

🔐 Authentication APIs

Signup API

Request Body

Process

Success Response

Duplicate User Response

Login API

Request Body

Process

Successful Login

Invalid Password

User Not Found

💰 Expense APIs

Add Expense

Request Body

Success Response

Status Code:

Get Expenses

Status Code:

Delete Expense

Status Code:

📤 Authentication Flow

🗃 User Table Schema

Add Expense Flow

Controller

Model

Previous MVC Architecture Diagram

Updated MVC Architecture Diagram

MVC Flow Diagram

📸 Project Screenshots

Signup Page

Login Page

Network Requests

Successful Responses

Error Handling

Password Bcrypt

Expense Dashboard

Add Expense

Delete Expense

User Per Login

Database Records

Expense List

🚀 Future Improvements

👨‍💻 Author

Yashav Shukla

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Packages