Skip to content

inferio-2004/real-time-chat-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Real-Time Chat Application

πŸ“ Overview

A real-time chat application built with React.js frontend and Node.js backend, featuring secure end-to-end encryption using ECDH key exchange and AES-GCM encryption.

πŸ“Έ Screenshots

Screenshot 2025-01-17 102949 Screenshot 2025-01-17 103001 Screenshot 2025-01-17 103247 Screenshot 2025-01-17 103304 Screenshot 2025-01-17 103346 Screenshot 2025-01-17 103359 Screenshot 2025-01-17 103417

πŸš€ Features

Security Features

  • πŸ” End-to-End Encryption: Messages are encrypted using ECDH + AES-GCM
  • πŸ”‘ Secure Key Management: Private keys encrypted with password-derived master keys
  • πŸ§‚ Salt-based Encryption: Random salts for enhanced security
  • πŸ”’ Hashed Passwords: Passwords stored as bcrypt hashes in database
  • πŸ‘οΈ Show/Hide Password: User-friendly password visibility toggle

Communication Features

  • πŸ’¬ Real-time Messaging: Instant message delivery using Socket.IO
  • πŸ‘₯ Multi-user Support: Search and chat with multiple users
  • οΏ½ Online User Tracking: Redis-based session management for real-time user status
  • πŸ“± Responsive Design: Works on desktop and mobile devices
  • πŸ”„ Persistent Sessions: Login state maintained across browser sessions
  • πŸ“ Chat History: Previous conversations stored and retrievable

Technical Features

  • πŸ—οΈ Scalable Architecture: Separate frontend and backend services
  • 🐳 Docker Database: PostgreSQL database containerized with Docker
  • πŸ”΄ Redis Session Management: Track online users and socket session IDs
  • 🌐 CORS Enabled: Cross-origin resource sharing configured
  • πŸ“Š Real-time Status: Online/offline status tracking
  • πŸ”§ Environment Configuration: Configurable via environment variables

πŸ› οΈ Technology Stack

Frontend

  • React.js - UI framework
  • Socket.IO Client - Real-time communication
  • Axios - HTTP client for API requests
  • Crypto-js - Cryptographic functions
  • Elliptic - ECDH key generation
  • React Router - Client-side routing
  • ChatScope UI Kit - Chat interface components

Backend

  • Node.js - Server runtime
  • Express.js - Web application framework
  • Socket.IO - Real-time bidirectional communication
  • Redis - Session management and online user tracking
  • PostgreSQL - Database for user data and messages
  • bcrypt - Password hashing
  • nanoid - Unique ID generation
  • dotenv - Environment variable management

Infrastructure

  • Docker - Database containerization
  • Redis - In-memory data store for user sessions and socket IDs
  • CORS - Cross-origin resource sharing
  • Environment Variables - Configuration management

πŸ”§ Installation & Setup

Prerequisites

  • Node.js (v14 or higher)
  • Docker and Docker Compose
  • npm or yarn package manager

1. Clone the Repository

git clone <repository-url>
cd chat_app

2. Setup Environment Variables

Create a .env file in the root directory:

# Database Configuration
DB_USER=postgres
DB_HOST=localhost
DB_NAME=chat_app_db
DB_PASSWORD=mysecretpassword
DB_PORT=5432

# API Configuration
REACT_APP_API_BASE=http://localhost:5000

# Socket Configuration
SOCKET_PORT=4000
API_PORT=5000

3. Start the Database

docker-compose up -d

4. Install Backend Dependencies

cd chat-app-backend
npm install

5. Install Frontend Dependencies

cd ../chat-app-frontend
npm install

6. Start the Backend Server

cd ../chat-app-backend
npm start

7. Start the Frontend Application

cd ../chat-app-frontend
npm start

The application will be available at:

πŸ” Encryption Flow

Registration Process

  1. User enters password and personal information
  2. Random salt is generated using nanoid
  3. Master key is derived from password + salt using PBKDF2
  4. ECDH key pair (public/private) is generated
  5. Private key is encrypted with master key using AES
  6. Public key, encrypted private key, and salt are stored in database
  7. Password is hashed with bcrypt before storage

Login Process

  1. User enters email and password
  2. Server verifies password against bcrypt hash
  3. Server returns encrypted private key and salt
  4. Client recreates master key from password + salt
  5. Client decrypts private key using master key
  6. Private key is stored in session for message encryption/decryption

Message Encryption

  1. Sender computes shared secret using their private key + receiver's public key (ECDH)
  2. Message is encrypted using AES-GCM with the shared secret
  3. Encrypted message is sent to server and stored in database
  4. Receiver retrieves encrypted message
  5. Receiver computes same shared secret using their private key + sender's public key
  6. Receiver decrypts message using AES-GCM

πŸš€ Running Multiple Instances

To test encryption between different users, run multiple frontend instances:

Terminal 1 (Port 3002)

cd chat-app-frontend
npm run start:3002

Terminal 2 (Port 3003)

cd chat-app-frontend
npm run start:3003

πŸ“ Project Structure

chat_app/
β”œβ”€β”€ chat-app-backend/          # Node.js backend
β”‚   β”œβ”€β”€ server.js             # Main server file
β”‚   β”œβ”€β”€ SocketServer.js       # Socket.IO server
β”‚   β”œβ”€β”€ login_register.js     # Authentication endpoints
β”‚   β”œβ”€β”€ search.js            # User search functionality
β”‚   β”œβ”€β”€ msg_db.js            # Message storage/retrieval
β”‚   └── package.json
β”œβ”€β”€ chat-app-frontend/         # React frontend
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ App.js           # Main app component
β”‚   β”‚   β”œβ”€β”€ Login.jsx        # Authentication component
β”‚   β”‚   β”œβ”€β”€ Home.jsx         # Chat interface
β”‚   β”‚   β”œβ”€β”€ client_socket.js # Crypto & socket functions
β”‚   β”‚   └── App.css          # Styles
β”‚   └── package.json
β”œβ”€β”€ docker-compose.yaml       # Docker configuration
β”œβ”€β”€ init.sql                 # Database schema
β”œβ”€β”€ .env                     # Environment variables
└── README.md               # Documentation

πŸ”’ Security Considerations

What's Protected

  • βœ… Messages are encrypted end-to-end
  • βœ… Private keys are encrypted before storage
  • βœ… Passwords are hashed with bcrypt
  • βœ… Shared secrets are computed client-side only
  • βœ… Database stores only encrypted content

Security Notes

  • πŸ” Private keys never leave the client unencrypted
  • πŸ”‘ Master keys are derived from passwords and never stored
  • πŸ§‚ Each user has a unique salt for key derivation
  • πŸ’Ύ Conversation keys are cached per session for performance
  • πŸ”„ Key regeneration is possible if keys are lost

πŸš€ Future Enhancements

  • Group chat functionality
  • File sharing with encryption
  • Push notifications
  • Message delivery confirmations
  • User profile management
  • Advanced security features (key rotation, etc.)

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Commit your changes
  4. Push to the branch
  5. Create a Pull Request

πŸ”§ Troubleshooting

Common Issues

  1. Database Connection Error: Ensure Docker is running and PostgreSQL container is started
  2. Port Already in Use: Check if ports 3000, 4000, 5000, or 5432 are already in use
  3. Environment Variables: Ensure .env file is properly configured
  4. Key Decryption Fails: Clear localStorage and re-register if keys are corrupted

About

A scalable real-time chat application built with React, Socket.IO, Redis, PostgreSQL, and Docker. It features user authentication, storage/retrieval of message from database, live messaging, and online/offline status tracking. Designed for responsiveness and ease of deployment, it is an ideal solution for real-time communication needs.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors