Authentication Components

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/front/src/signup/signup.jsx
• frontend/front/src/loginpage.jsx
• frontend/front/src/services/api.js
• BACKEND/src/models/User.model.js
• BACKEND/src/controllers/user.controller.js
• BACKEND/src/routes/user.routes.js

The Authentication Components within this project provide a robust framework for managing user access, identity, and security. This system encompasses user registration, secure login through JSON Web Tokens (JWT), session management via refresh tokens, and profile management.

The architecture follows a client-server model where the React-based frontend interacts with an Express-based backend. Security is enforced through password hashing using bcrypt and protected routes on the backend that verify JWT credentials before allowing access to sensitive resources.

Backend Architecture

The backend authentication logic is built around a MongoDB data model and a controller-based routing system.

User Data Model

The user schema defines the structure of user data and includes middleware for security. It indexes the username and email for optimized lookups and uses a pre-save hook to hash passwords using bcrypt before they are stored in the database.

Field	Type	Description
username	String	Unique, indexed, lowercase identifier.
email	String	Unique, lowercase email address.
fullName	String	User's display name.
password	String	Hashed password string.
refreshToken	String	Token used to generate new access tokens.

Sources: BACKEND/src/models/User.model.js:5-43

Token Management

The system utilizes two types of tokens for authentication:

1. Access Token: Short-lived token containing user identity (_id, email, username, fullName) used for API authorization.
2. Refresh Token: Long-lived token stored in the database and sent via HTTP-only cookies to renew access tokens without requiring re-login.

Sources: BACKEND/src/models/User.model.js:51-78, BACKEND/src/controllers/user.controller.js:145-195

Authentication Flow

The following sequence diagram illustrates the login process and token generation:

Frontend Components

The frontend handles user interaction through React components and manages API communication via an Axios-based service layer.

Service Layer

The api.js service centralizes all authentication requests. It includes a request interceptor that automatically attaches the stored JWT from localStorage to the Authorization header for all outgoing requests.

Function	Endpoint	Method	Purpose
login	/users/login	POST	Authenticates user and returns data.
signup	/users/register	POST	Creates a new user account.
logout	/users/logout	POST	Invalidates session.

Sources: frontend/front/src/services/api.js:14-51

Login and Registration Logic

The LoginPage and SignupPage components manage form state and coordinate with the service layer. Upon a successful login, the application stores the access token in localStorage and navigates the user to the dashboard.

const handleLogin = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      const response = await login(email, password);
      localStorage.setItem("token", response.token);
      localStorage.setItem("user", JSON.stringify(response.user));
      navigate("/dashboard");
    } catch (error) {
      setError("Invalid email or password");
    } finally {
      setLoading(false);
    }
};

Sources: frontend/front/src/loginpage.jsx:13-31

Security Implementation

The system implements several layers of security to protect user data and endpoints.

API Protection

Backend routes are categorized into public and secured routes. Secured routes utilize a verifyJWT middleware (imported but not fully defined in provided snippets) to ensure requests are authenticated.

Route	Method	Security Policy
/register	POST	Rate limited (100 req / 15 min)
/login	POST	Public
/logout	POST	Rate limited + JWT Verification
/changepassword	POST	JWT Verification

Sources: BACKEND/src/routes/user.routes.js:17-36

Rate Limiting

To prevent brute-force attacks and abuse, the project uses express-rate-limit. Both registration and logout endpoints are restricted to 100 requests per 15-minute window per IP address.

Sources: BACKEND/src/routes/user.routes.js:6-15

Conclusion

The Authentication Components provide a full-stack solution for user identity management. By combining bcrypt for password safety, JWT for stateless authorization, and HTTP-only cookies for refresh token security, the system ensures a balance between user experience and technical security. The integration between the frontend service layer and backend controllers allows for seamless navigation and secure data access across the application.