How to create a full stack Chat App using Next js & Nest js?

Comprehensive Documentation for a Chat Application

Introduction

Purpose: Outline the purpose of the document.

Scope: Define the scope of the chat application.

Technologies Used: List Next.js, NestJS, TailwindCSS, REST API, WebSocket, MongoDB.

Project Structure

Frontend: Overview of the Next.js project structure.

Backend: Overview of the NestJS project structure.

Database: Structure of MongoDB collections (User, Chat, Message).

Sections and Functionality

1. User Authentication

User Registration:

Endpoint: /auth/register

Method: POST

Payload: { “username”: “string”, “password”: “string” }

Description: Registers a new user.

User Login:

Endpoint: /auth/login

Method: POST

Payload: { “username”: “string”, “password”: “string” }

Description: Authenticates a user and returns a JWT token.

User Logout:

Description: Logout mechanism (typically handled on the client side by destroying the JWT token).

2. User Management

Profile Management:

Endpoint: /users/me

Method: GET

Description: Fetches the logged-in user’s profile.

Update Profile:

Endpoint: /users/me

Method: PUT

Payload: { “username”: “string”, “password”: “string” }

Description: Updates the logged-in user’s profile information.

3. Chat Management

Create Chat:

Endpoint: /chats

Method: POST

Payload: { “participants”: [“userId1”, “userId2”] }

Description: Creates a new chat session between users.

Fetch Chats:

Endpoint: /chats

Method: GET

Description: Fetches all chat sessions for the logged-in user.

Fetch Chat Details:

Endpoint: /chats/:chatId

Method: GET

Description: Fetches messages in a specific chat session.

4. Messaging

Send Message:

Endpoint: /chats/:chatId/messages

Method: POST

Payload: { “content”: “string” }

Description: Sends a new message in a chat session.

Receive Messages:

Description: Real-time message receiving using WebSocket.
WebSocket Event: receiveMessage

5. Real-time Communication

WebSocket Setup:

Description: Initializing WebSocket connection on the client-side and handling events.

WebSocket Events:

sendMessage: Event to send a message.

receiveMessage: Event to receive messages.

6. User Interface

Login Page:

Description: UI for user login.
Components: Form, Input Fields, Submit Button.

Registration Page:

Description: UI for user registration.
Components: Form, Input Fields, Submit Button.

Chat List Page:

Description: UI for displaying the list of chat sessions.
Components: List of Chats, Search Bar.

Chat Window:

Description: UI for displaying chat messages and sending new messages.
Components: Message List, Input Field, Send Button.

7. Notifications

Real-time Notifications:

Description: Display real-time notifications for new messages.

8. File Sharing

Upload File:

Endpoint: /chats/:chatId/files

Method: POST

Payload: { “file”: “file object” }

Description: Uploads a file to a chat session.

Download File:

Endpoint: /chats/:chatId/files/:fileId

Method: GET

Description: Downloads a file from a chat session.

9. Settings

User Settings:

Description: Page for user settings (e.g., notification preferences, account management).

10. Deployment

Frontend Deployment:

Description: Steps to deploy the Next.js app using Vercel.

Backend Deployment:

Description: Steps to deploy the NestJS app using Heroku, DigitalOcean, or AWS.

11. Security

JWT Authentication:

Description: Implementing JWT for user authentication.

Data Encryption:

Description: Encrypting sensitive data (e.g., passwords).

12. Testing

Unit Testing:

Description: Writing unit tests for both frontend and backend.

Integration Testing:

Description: Writing integration tests to test API endpoints.

13. Performance Optimization

Frontend Optimization:

Description: Techniques for optimizing the Next.js application (e.g., code splitting, lazy loading).

Backend Optimization:

Description: Techniques for optimizing the NestJS application (e.g., caching, database indexing).

14. Documentation

API Documentation:

Description: Detailed documentation of all API endpoints using tools like Swagger.

User Guide:

Description: Guide for end-users on how to use the chat application.

15. Future Enhancements

Voice and Video Calls:

Description: Adding support for voice and video calls.

Group Chats:

Description: Adding support for group chat functionality.

Status Indicators:

Description: Adding online/offline status indicators for users.

This comprehensive breakdown covers the essential sections and functionalities needed to create a chat application similar to WhatsApp or Telegram using Next.js, NestJS, and TailwindCSS.

Creating a chat application like WhatsApp or Telegram involves a comprehensive set of features and technologies. Below is a detailed breakdown to help you get started with building a chat app using Next.js for the frontend, NestJS for the backend, TailwindCSS for styling, and REST APIs for communication.

1. Project Setup

Frontend (Next.js)

Initialize Next.js:

Install TailwindCSS:

Configure TailwindCSS: Update tailwind.config.js and globals.css.

Backend (NestJS)

Initialize NestJS:

Install Required Modules:

2. Database Schema and Models

Define User and Chat Models: Use Mongoose for schema definition.

User Schema

Chat Schema

3. Authentication

Local Strategy for Authentication: Use Passport.js for authentication.

Local Strategy

4. REST API Endpoints

User Registration and Login: Implement endpoints for user registration and login.

Auth Controller

5. Chat Functionality

Create and Fetch Chats: Implement endpoints for creating and fetching chats and messages.

Chat Controller

6. Real-time Communication

WebSocket for Real-Time: Integrate WebSocket for real-time messaging.

Install Dependencies

WebSocket Gateway

7. Frontend Integration

Real-Time Messaging with Socket.io: Use Socket.io on the frontend for real-time updates.

Install Socket.io Client

Frontend Integration

8. Styling with TailwindCSS

TailwindCSS for UI: Style the chat interface using TailwindCSS.

Example Styles

9. Deployment and Hosting

Frontend Deployment: Use Vercel for deploying the Next.js app.

Backend Deployment: Use services like Heroku, DigitalOcean, or AWS for deploying the NestJS app.

By following this breakdown, you can build a comprehensive chat application with real-time messaging capabilities, user authentication, and a responsive UI. Adjust and expand upon these basics to include additional features like user profiles, file sharing, notifications, etc., as needed.

User Authentication: User Registration

Backend Code (NestJS)

Auth Module Setup:

Generate the Auth Module:

nest generate module auth
nest generate service auth
nest generate controller auth

User Schema:

Create User Schema (src/schemas/user.schema.ts):

import { Prop, Schema, SchemaFactory } from ‘@nestjs/mongoose‘;
import { Document } from ‘mongoose‘;

export type UserDocument = User & Document;

@Schema()
export class User {
@Prop({ required: true, unique: true })
username: string;

@Prop({ required: true })
password: string;
}

export const UserSchema = SchemaFactory.createForClass(User);

User DTO (Data Transfer Object):

Create DTO for User Registration (src/auth/dto/register-user.dto.ts):

export class RegisterUserDto {
username: string;
password: string;
}

Auth Service:

Update the Auth Service (src/auth/auth.service.ts):

import { Injectable } from ‘@nestjs/common‘;
import { InjectModel } from ‘@nestjs/mongoose‘;
import { Model } from ‘mongoose‘;
import { User, UserDocument } from ‘../schemas/user.schema‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import * as bcrypt from ‘bcrypt‘;

@Injectable()
export class AuthService {
constructor(@InjectModel(User.name) private userModel: Model<UserDocument>) {}

async register(registerUserDto: RegisterUserDto): Promise<User> {
const { username, password } = registerUserDto;

// Check if the user already exists
const existingUser = await this.userModel.findOne({ username }).exec();
if (existingUser) {
throw new Error(‘User already exists‘);
}

// Hash the password
const salt = await bcrypt.genSalt();
const hashedPassword = await bcrypt.hash(password, salt);

// Create a new user
const newUser = new this.userModel({ username, password: hashedPassword });
return newUser.save();
}
}

Auth Controller:

Update the Auth Controller (src/auth/auth.controller.ts):

import { Controller, Post, Body } from ‘@nestjs/common‘;
import { AuthService } from ‘./auth.service‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import { User } from ‘../schemas/user.schema‘;

@Controller(‘auth‘)
export class AuthController {
constructor(private readonly authService: AuthService) {}

@Post(‘register‘)
async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
return this.authService.register(registerUserDto);
}
}

Mongoose Setup:

Configure Mongoose in App Module (src/app.module.ts):

import { Module } from ‘@nestjs/common‘;
import { MongooseModule } from ‘@nestjs/mongoose‘;
import { AuthModule } from ‘./auth/auth.module‘;
import { User, UserSchema } from ‘./schemas/user.schema‘;

@Module({
imports: [
MongooseModule.forRoot(‘mongodb://localhost/chat-app‘),
MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
AuthModule,
],
})
export class AppModule {}

Frontend Code (Next.js)

API Call for Registration:

Create API Function (src/services/api.js):

import axios from ‘axios‘;

const API_URL = ‘http://localhost:3000/auth‘;

export const register = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/register`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

Registration Form:

Create Registration Form Component (src/components/RegisterForm.js):

import { useState } from ‘react‘;
import { register } from ‘../services/api‘;

export default function RegisterForm() {
const [username, setUsername] = useState(”);
const [password, setPassword] = useState(”);
const [message, setMessage] = useState(”);

const handleSubmit = async (e) => {
e.preventDefault();
try {
const data = await register(username, password);
setMessage(‘User registered successfully‘);
} catch (error) {
setMessage(`Error: ${error.message}`);
}
};

return (
<div className=“max-w-md mx-auto mt-10“>
<h2 className=“text-2xl font-bold mb-5“>Register</h2>
<form onSubmit={handleSubmit}>
<div className=“mb-4“>
<label className=“block text-gray-700“>Username</label>
<input
type=“text“
value={username}
onChange={(e) => setUsername(e.target.value)}
className=“w-full px-3 py-2 border rounded“
/>
</div>
<div className=“mb-4“>
<label className=“block text-gray-700“>Password</label>
<input
type=“password“
value={password}
onChange={(e) => setPassword(e.target.value)}
className=“w-full px-3 py-2 border rounded“
/>
</div>
<button type=“submit“ className=“bg-blue-500 text-white px-4 py-2 rounded“>
Register
</button>
</form>
{message && <p className=“mt-4“>{message}</p>}
</div>
);
}

Conclusion

This setup includes the backend implementation for user registration with NestJS and a simple frontend registration form with Next.js. It uses MongoDB for data storage and bcrypt for password hashing. Adjust and expand this as needed for your complete chat application.

User Authentication: User Login and Logout

Backend Code (NestJS)

Auth Module Setup (continued from the previous setup)

Login DTO (Data Transfer Object):

Create DTO for User Login (src/auth/dto/login-user.dto.ts):

export class LoginUserDto {
username: string;
password: string;
}

JWT Module Setup:

Install JWT Package:

npm install @nestjs/jwt passport-jwt
npm install –save-dev @types/passport-jwt

Configure JWT in Auth Module (src/auth/auth.module.ts):

import { Module } from ‘@nestjs/common‘;
import { JwtModule } from ‘@nestjs/jwt‘;
import { PassportModule } from ‘@nestjs/passport‘;
import { AuthService } from ‘./auth.service‘;
import { AuthController } from ‘./auth.controller‘;
import { User, UserSchema } from ‘../schemas/user.schema‘;
import { MongooseModule } from ‘@nestjs/mongoose‘;
import { JwtStrategy } from ‘./jwt.strategy‘;

@Module({
imports: [
MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
PassportModule,
JwtModule.register({
secret: ‘YOUR_SECRET_KEY‘, // Replace with a secure key
signOptions: { expiresIn: ‘1h‘ },
}),
],
providers: [AuthService, JwtStrategy],
controllers: [AuthController],
})
export class AuthModule {}

Auth Service (continued):

Update Auth Service to Handle Login and JWT Generation (src/auth/auth.service.ts):

import { Injectable } from ‘@nestjs/common‘;
import { InjectModel } from ‘@nestjs/mongoose‘;
import { Model } from ‘mongoose‘;
import { JwtService } from ‘@nestjs/jwt‘;
import { User, UserDocument } from ‘../schemas/user.schema‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import { LoginUserDto } from ‘./dto/login-user.dto‘;
import * as bcrypt from ‘bcrypt‘;

@Injectable()
export class AuthService {
constructor(
@InjectModel(User.name) private userModel: Model<UserDocument>,
private jwtService: JwtService,
) {}

async register(registerUserDto: RegisterUserDto): Promise<User> {
const { username, password } = registerUserDto;

const existingUser = await this.userModel.findOne({ username }).exec();
if (existingUser) {
throw new Error(‘User already exists‘);
}

const salt = await bcrypt.genSalt();
const hashedPassword = await bcrypt.hash(password, salt);

const newUser = new this.userModel({ username, password: hashedPassword });
return newUser.save();
}

async validateUser(username: string, password: string): Promise<User> {
const user = await this.userModel.findOne({ username }).exec();
if (!user) {
return null;
}

const isPasswordValid = await bcrypt.compare(password, user.password);
if (!isPasswordValid) {
return null;
}

return user;
}

async login(loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
const { username, password } = loginUserDto;
const user = await this.validateUser(username, password);
if (!user) {
throw new Error(‘Invalid credentials‘);
}

const payload = { username: user.username, sub: user._id };
return {
access_token: this.jwtService.sign(payload),
};
}
}

Auth Controller (continued):

Update Auth Controller for Login (src/auth/auth.controller.ts):

import { Controller, Post, Body } from ‘@nestjs/common‘;
import { AuthService } from ‘./auth.service‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import { LoginUserDto } from ‘./dto/login-user.dto‘;
import { User } from ‘../schemas/user.schema‘;

@Controller(‘auth‘)
export class AuthController {
constructor(private readonly authService: AuthService) {}

@Post(‘register‘)
async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
return this.authService.register(registerUserDto);
}

@Post(‘login‘)
async login(@Body() loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
return this.authService.login(loginUserDto);
}
}

JWT Strategy:

Create JWT Strategy for Protecting Routes (src/auth/jwt.strategy.ts):

import { Strategy, ExtractJwt } from ‘passport-jwt‘;
import { PassportStrategy } from ‘@nestjs/passport‘;
import { Injectable } from ‘@nestjs/common‘;
import { JwtPayload } from ‘./jwt-payload.interface‘;
import { AuthService } from ‘./auth.service‘;

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
constructor(private authService: AuthService) {
super({
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
ignoreExpiration: false,
secretOrKey: ‘YOUR_SECRET_KEY‘, // Replace with a secure key
});
}

async validate(payload: JwtPayload) {
return { userId: payload.sub, username: payload.username };
}
}

JWT Payload Interface:

Create JWT Payload Interface (src/auth/jwt-payload.interface.ts):

export interface JwtPayload {
username: string;
sub: string;
}

Frontend Code (Next.js)

API Call for Login:

Update API Function (src/services/api.js):

import axios from ‘axios‘;

const API_URL = ‘http://localhost:3000/auth‘;

export const register = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/register`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const login = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/login`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

Login Form:

Create Login Form Component (src/components/LoginForm.js):

import { useState } from ‘react‘;
import { login } from ‘../services/api‘;

export default function LoginForm() {
const [username, setUsername] = useState(”);
const [password, setPassword] = useState(”);
const [message, setMessage] = useState(”);

const handleSubmit = async (e) => {
e.preventDefault();
try {
const data = await login(username, password);
localStorage.setItem(‘token‘, data.access_token);
setMessage(‘User logged in successfully‘);
} catch (error) {
setMessage(`Error: ${error.message}`);
}
};

return (
<div className=“max-w-md mx-auto mt-10“>
<h2 className=“text-2xl font-bold mb-5“>Login</h2>
<form onSubmit={handleSubmit}>
<div className=“mb-4“>
<label className=“block text-gray-700“>Username</label>
<input
type=“text“
value={username}
onChange={(e) => setUsername(e.target.value)}
className=“w-full px-3 py-2 border rounded“
/>
</div>
<div className=“mb-4“>
<label className=“block text-gray-700“>Password</label>
<input
type=“password“
value={password}
onChange={(e) => setPassword(e.target.value)}
className=“w-full px-3 py-2 border rounded“
/>
</div>
<button type=“submit“ className=“bg-blue-500 text-white px-4 py-2 rounded“>
Login
</button>
</form>
{message && <p className=“mt-4“>{message}</p>}
</div>
);
}

Logout Function:

Handle Logout on the Client Side:

export const logout = () => {
localStorage.removeItem(‘token‘);
window.location.href = ‘/login‘; // Redirect to login page
};

Example Logout Button:

import { logout } from ‘../services/api‘;

export default function LogoutButton() {
return (
<button onClick={logout} className=“bg-red-500 text-white px-4 py-2 rounded“>
Logout
</button>
);
}

Conclusion

This setup includes the backend implementation for user login with NestJS and a simple frontend login form with Next.js. The logout mechanism is handled on the client side by removing the JWT token from local storage. This setup provides the basic authentication flow for a chat application.

User Management: Profile Management

Backend Code (NestJS)

User Profile Endpoint

Create User Profile DTO:

Create DTO for User Profile (src/auth/dto/user-profile.dto.ts):

export class UserProfileDto {
username: string;
}

User Service:

Update User Service to Handle Profile Fetching (src/auth/auth.service.ts):

import { Injectable } from ‘@nestjs/common‘;
import { InjectModel } from ‘@nestjs/mongoose‘;
import { Model } from ‘mongoose‘;
import { JwtService } from ‘@nestjs/jwt‘;
import { User, UserDocument } from ‘../schemas/user.schema‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import { LoginUserDto } from ‘./dto/login-user.dto‘;
import { UserProfileDto } from ‘./dto/user-profile.dto‘;
import * as bcrypt from ‘bcrypt‘;

@Injectable()
export class AuthService {
constructor(
@InjectModel(User.name) private userModel: Model<UserDocument>,
private jwtService: JwtService,
) {}

// … other methods

async getUserProfile(userId: string): Promise<UserProfileDto> {
const user = await this.userModel.findById(userId).exec();
if (!user) {
throw new Error(‘User not found‘);
}
return { username: user.username };
}
}

Auth Controller:

Update Auth Controller to Include Profile Fetching (src/auth/auth.controller.ts):

import { Controller, Post, Get, Request, Body, UseGuards } from ‘@nestjs/common‘;
import { AuthService } from ‘./auth.service‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import { LoginUserDto } from ‘./dto/login-user.dto‘;
import { User } from ‘../schemas/user.schema‘;
import { JwtAuthGuard } from ‘./jwt-auth.guard‘;

@Controller(‘auth‘)
export class AuthController {
constructor(private readonly authService: AuthService) {}

@Post(‘register‘)
async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
return this.authService.register(registerUserDto);
}

@Post(‘login‘)
async login(@Body() loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
return this.authService.login(loginUserDto);
}

@UseGuards(JwtAuthGuard)
@Get(‘me‘)
async getProfile(@Request() req): Promise<{ username: string }> {
return this.authService.getUserProfile(req.user.userId);
}
}

JWT Auth Guard:

Create JWT Auth Guard (src/auth/jwt-auth.guard.ts):

import { Injectable } from ‘@nestjs/common‘;
import { AuthGuard } from ‘@nestjs/passport‘;

@Injectable()
export class JwtAuthGuard extends AuthGuard(‘jwt‘) {}

Update JWT Strategy:

Ensure Payload Includes User ID (src/auth/jwt.strategy.ts):

import { Strategy, ExtractJwt } from ‘passport-jwt‘;
import { PassportStrategy } from ‘@nestjs/passport‘;
import { Injectable } from ‘@nestjs/common‘;
import { JwtPayload } from ‘./jwt-payload.interface‘;
import { AuthService } from ‘./auth.service‘;

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
constructor(private authService: AuthService) {
super({
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
ignoreExpiration: false,
secretOrKey: ‘YOUR_SECRET_KEY‘, // Replace with a secure key
});
}

async validate(payload: JwtPayload) {
return { userId: payload.sub, username: payload.username };
}
}

Frontend Code (Next.js)

API Call for Fetching User Profile:

Create API Function for Fetching User Profile (src/services/api.js):

import axios from ‘axios‘;

const API_URL = ‘http://localhost:3000/auth‘;

export const register = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/register`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const login = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/login`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const getProfile = async (token) => {
try {
const response = await axios.get(`${API_URL}/me`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const logout = () => {
localStorage.removeItem(‘token‘);
window.location.href = ‘/login‘; // Redirect to login page
};

Profile Page:

Create Profile Page Component (src/pages/profile.js):

import { useEffect, useState } from ‘react‘;
import { getProfile } from ‘../services/api‘;

export default function Profile() {
const [profile, setProfile] = useState(null);
const [error, setError] = useState(”);

useEffect(() => {
const fetchProfile = async () => {
try {
const token = localStorage.getItem(‘token‘);
if (token) {
const data = await getProfile(token);
setProfile(data);
} else {
setError(‘No token found‘);
}
} catch (err) {
setError(err.message);
}
};

fetchProfile();
}, []);

if (error) {
return <div className=“text-red-500“>{error}</div>;
}

return (
<div className=“max-w-md mx-auto mt-10“>
<h2 className=“text-2xl font-bold mb-5“>Profile</h2>
{profile ? (
<div>
<p><strong>Username:</strong> {profile.username}</p>
</div>
) : (
<p>Loading…</p>
)}
</div>
);
}

Conclusion

This setup includes the backend implementation for fetching the logged-in user’s profile with NestJS and a simple frontend profile page with Next.js. The profile endpoint is protected with JWT authentication, ensuring only authenticated users can access their profile information.

User Management: Update Profile

Backend Code (NestJS)

Update User Profile DTO:

Create DTO for Updating User Profile (src/auth/dto/update-user.dto.ts):

export class UpdateUserDto {
username?: string;
password?: string;
}

User Service:

Update User Service to Handle Profile Updating (src/auth/auth.service.ts):

import { Injectable } from ‘@nestjs/common‘;
import { InjectModel } from ‘@nestjs/mongoose‘;
import { Model } from ‘mongoose‘;
import { JwtService } from ‘@nestjs/jwt‘;
import { User, UserDocument } from ‘../schemas/user.schema‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import { LoginUserDto } from ‘./dto/login-user.dto‘;
import { UpdateUserDto } from ‘./dto/update-user.dto‘;
import * as bcrypt from ‘bcrypt‘;

@Injectable()
export class AuthService {
constructor(
@InjectModel(User.name) private userModel: Model<UserDocument>,
private jwtService: JwtService,
) {}

// … other methods

async updateUserProfile(userId: string, updateUserDto: UpdateUserDto): Promise<User> {
const user = await this.userModel.findById(userId).exec();
if (!user) {
throw new Error(‘User not found‘);
}

if (updateUserDto.username) {
user.username = updateUserDto.username;
}

if (updateUserDto.password) {
const salt = await bcrypt.genSalt();
user.password = await bcrypt.hash(updateUserDto.password, salt);
}

return user.save();
}
}

Auth Controller:

Update Auth Controller to Include Profile Updating (src/auth/auth.controller.ts):

import { Controller, Post, Get, Put, Request, Body, UseGuards } from ‘@nestjs/common‘;
import { AuthService } from ‘./auth.service‘;
import { RegisterUserDto } from ‘./dto/register-user.dto‘;
import { LoginUserDto } from ‘./dto/login-user.dto‘;
import { UpdateUserDto } from ‘./dto/update-user.dto‘;
import { User } from ‘../schemas/user.schema‘;
import { JwtAuthGuard } from ‘./jwt-auth.guard‘;

@Controller(‘auth‘)
export class AuthController {
constructor(private readonly authService: AuthService) {}

@Post(‘register‘)
async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
return this.authService.register(registerUserDto);
}

@Post(‘login‘)
async login(@Body() loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
return this.authService.login(loginUserDto);
}

@UseGuards(JwtAuthGuard)
@Get(‘me‘)
async getProfile(@Request() req): Promise<{ username: string }> {
return this.authService.getUserProfile(req.user.userId);
}

@UseGuards(JwtAuthGuard)
@Put(‘me‘)
async updateProfile(@Request() req, @Body() updateUserDto: UpdateUserDto): Promise<User> {
return this.authService.updateUserProfile(req.user.userId, updateUserDto);
}
}

JWT Auth Guard and Strategy (from previous steps).

Frontend Code (Next.js)

API Call for Updating User Profile:

Create API Function for Updating User Profile (src/services/api.js):

import axios from ‘axios‘;

const API_URL = ‘http://localhost:3000/auth‘;

export const register = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/register`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const login = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/login`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const getProfile = async (token) => {
try {
const response = await axios.get(`${API_URL}/me`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const updateProfile = async (token, userData) => {
try {
const response = await axios.put(`${API_URL}/me`, userData, {
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const logout = () => {
localStorage.removeItem(‘token‘);
window.location.href = ‘/login‘; // Redirect to login page
};

Update Profile Form:

Create Update Profile Form Component (src/components/UpdateProfileForm.js):

import { useState, useEffect } from ‘react‘;
import { getProfile, updateProfile } from ‘../services/api‘;

export default function UpdateProfileForm() {
const [username, setUsername] = useState(”);
const [password, setPassword] = useState(”);
const [message, setMessage] = useState(”);

useEffect(() => {
const fetchProfile = async () => {
try {
const token = localStorage.getItem(‘token‘);
if (token) {
const data = await getProfile(token);
setUsername(data.username);
}
} catch (err) {
setMessage(`Error: ${err.message}`);
}
};

fetchProfile();
}, []);

const handleSubmit = async (e) => {
e.preventDefault();
try {
const token = localStorage.getItem(‘token‘);
const userData = { username, password: password || undefined };
const data = await updateProfile(token, userData);
setMessage(‘Profile updated successfully‘);
} catch (error) {
setMessage(`Error: ${error.message}`);
}
};

return (
<div className=“max-w-md mx-auto mt-10“>
<h2 className=“text-2xl font-bold mb-5“>Update Profile</h2>
<form onSubmit={handleSubmit}>
<div className=“mb-4“>
<label className=“block text-gray-700“>Username</label>
<input
type=“text“
value={username}
onChange={(e) => setUsername(e.target.value)}
className=“w-full px-3 py-2 border rounded“
/>
</div>
<div className=“mb-4“>
<label className=“block text-gray-700“>Password</label>
<input
type=“password“
value={password}
onChange={(e) => setPassword(e.target.value)}
className=“w-full px-3 py-2 border rounded“
placeholder=“Leave blank to keep the same“
/>
</div>
<button type=“submit“ className=“bg-blue-500 text-white px-4 py-2 rounded“>
Update
</button>
</form>
{message && <p className=“mt-4“>{message}</p>}
</div>
);
}

Conclusion

This setup includes the backend implementation for updating the logged-in user’s profile with NestJS and a simple frontend update profile form with Next.js. The profile update endpoint is protected with JWT authentication, ensuring only authenticated users can update their profile information.

Chat Management: Create Chat

Backend Code (NestJS)

Chat Module Setup

Generate the Chat Module:

nest generate module chat
nest generate service chat
nest generate controller chat

Chat Schema:

Create Chat Schema (src/schemas/chat.schema.ts):

import { Schema, Prop, SchemaFactory } from ‘@nestjs/mongoose‘;
import { Document, Types } from ‘mongoose‘;

export type ChatDocument = Chat & Document;

@Schema()
export class Chat {
@Prop({ type: [{ type: Types.ObjectId, ref: ‘User‘ }], required: true })
participants: Types.ObjectId[];

@Prop({ type: [{ type: Object }] })
messages: { sender: Types.ObjectId; content: string; timestamp: Date }[];
}

export const ChatSchema = SchemaFactory.createForClass(Chat);

Create Chat DTO:

Create DTO for Creating Chat (src/chat/dto/create-chat.dto.ts):

export class CreateChatDto {
participants: string[];
}

Chat Service:

Update Chat Service to Handle Chat Creation (src/chat/chat.service.ts):

import { Injectable } from ‘@nestjs/common‘;
import { InjectModel } from ‘@nestjs/mongoose‘;
import { Model } from ‘mongoose‘;
import { Chat, ChatDocument } from ‘../schemas/chat.schema‘;
import { CreateChatDto } from ‘./dto/create-chat.dto‘;

@Injectable()
export class ChatService {
constructor(@InjectModel(Chat.name) private chatModel: Model<ChatDocument>) {}

async createChat(createChatDto: CreateChatDto): Promise<Chat> {
const newChat = new this.chatModel({
participants: createChatDto.participants,
messages: [],
});
return newChat.save();
}
}

Chat Controller:

Update Chat Controller to Include Chat Creation (src/chat/chat.controller.ts):

import { Controller, Post, Body, UseGuards } from ‘@nestjs/common‘;
import { ChatService } from ‘./chat.service‘;
import { CreateChatDto } from ‘./dto/create-chat.dto‘;
import { JwtAuthGuard } from ‘../auth/jwt-auth.guard‘;
import { Chat } from ‘../schemas/chat.schema‘;

@Controller(‘chats‘)
export class ChatController {
constructor(private readonly chatService: ChatService) {}

@UseGuards(JwtAuthGuard)
@Post()
async createChat(@Body() createChatDto: CreateChatDto): Promise<Chat> {
return this.chatService.createChat(createChatDto);
}
}

JWT Auth Guard (from previous steps).

Frontend Code (Next.js)

API Call for Creating Chat:

Create API Function for Creating Chat (src/services/api.js):

import axios from ‘axios‘;

const API_URL = ‘http://localhost:3000‘;

export const register = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/auth/register`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const login = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/auth/login`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const getProfile = async (token) => {
try {
const response = await axios.get(`${API_URL}/auth/me`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const updateProfile = async (token, userData) => {
try {
const response = await axios.put(`${API_URL}/auth/me`, userData, {
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const createChat = async (token, participants) => {
try {
const response = await axios.post(`${API_URL}/chats`, { participants }, {
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const logout = () => {
localStorage.removeItem(‘token‘);
window.location.href = ‘/login‘; // Redirect to login page
};

Create Chat Form:

Create Chat Form Component (src/components/CreateChatForm.js):

import { useState } from ‘react‘;
import { createChat } from ‘../services/api‘;

export default function CreateChatForm() {
const [participants, setParticipants] = useState(”);
const [message, setMessage] = useState(”);

const handleSubmit = async (e) => {
e.preventDefault();
try {
const token = localStorage.getItem(‘token‘);
const participantIds = participants.split(‘,‘).map(id => id.trim());
const data = await createChat(token, participantIds);
setMessage(‘Chat created successfully‘);
} catch (error) {
setMessage(`Error: ${error.message}`);
}
};

return (
<div className=“max-w-md mx-auto mt-10“>
<h2 className=“text-2xl font-bold mb-5“>Create Chat</h2>
<form onSubmit={handleSubmit}>
<div className=“mb-4“>
<label className=“block text-gray-700“>Participants</label>
<input
type=“text“
value={participants}
onChange={(e) => setParticipants(e.target.value)}
className=“w-full px-3 py-2 border rounded“
placeholder=“Comma-separated user IDs“
/>
</div>
<button type=“submit“ className=“bg-blue-500 text-white px-4 py-2 rounded“>
Create Chat
</button>
</form>
{message && <p className=“mt-4“>{message}</p>}
</div>
);
}

Conclusion

This setup includes the backend implementation for creating a new chat session with NestJS and a simple frontend form for creating a chat with Next.js. The chat creation endpoint is protected with JWT authentication, ensuring only authenticated users can create new chat sessions.

Chat Management: Fetch Chats

Backend Code (NestJS)

Chat Service:

Update Chat Service to Handle Fetching Chats (src/chat/chat.service.ts):

import { Injectable } from ‘@nestjs/common‘;
import { InjectModel } from ‘@nestjs/mongoose‘;
import { Model } from ‘mongoose‘;
import { Chat, ChatDocument } from ‘../schemas/chat.schema‘;
import { User, UserDocument } from ‘../schemas/user.schema‘;

@Injectable()
export class ChatService {
constructor(
@InjectModel(Chat.name) private chatModel: Model<ChatDocument>,
@InjectModel(User.name) private userModel: Model<UserDocument>,
) {}

async createChat(participants: string[]): Promise<Chat> {
const newChat = new this.chatModel({
participants: participants,
messages: [],
});
return newChat.save();
}

async getChats(userId: string): Promise<Chat[]> {
return this.chatModel.find({ participants: userId }).populate(‘participants‘, ‘username‘).exec();
}
}

Chat Controller:

Update Chat Controller to Include Fetching Chats (src/chat/chat.controller.ts):

import { Controller, Post, Get, Body, UseGuards, Request } from ‘@nestjs/common‘;
import { ChatService } from ‘./chat.service‘;
import { CreateChatDto } from ‘./dto/create-chat.dto‘;
import { JwtAuthGuard } from ‘../auth/jwt-auth.guard‘;
import { Chat } from ‘../schemas/chat.schema‘;

@Controller(‘chats‘)
export class ChatController {
constructor(private readonly chatService: ChatService) {}

@UseGuards(JwtAuthGuard)
@Post()
async createChat(@Body() createChatDto: CreateChatDto): Promise<Chat> {
return this.chatService.createChat(createChatDto.participants);
}

@UseGuards(JwtAuthGuard)
@Get()
async getChats(@Request() req): Promise<Chat[]> {
return this.chatService.getChats(req.user.userId);
}
}

Ensure JWT Auth Guard is Applied:

Ensure that JwtAuthGuard is properly set up and imported as shown in previous examples.

Frontend Code (Next.js)

API Call for Fetching Chats:

Create API Function for Fetching Chats (src/services/api.js):

import axios from ‘axios‘;

const API_URL = ‘http://localhost:3000‘;

export const register = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/auth/register`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};

export const login = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/auth/login`, { username, password });
return response.data;
} catch (error) {
throw error.response.data;
}
};