User Registration & Login

Relevant source files

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

• backend/server.py
• frontend/src/App.js
• backend_test.py
• frontend/src/App.css
• test_result.md

The User Registration & Login system in NEXUS provides a secure, JWT-based authentication layer for the digital account and trial tracking platform. It serves as the primary gateway to the application, ensuring that user data is isolated and protected through industry-standard encryption and token-based session management. The system is designed with a "cyberpunk-meets-luxury" aesthetic, featuring glassmorphism and particle animations to enhance the user experience while maintaining robust security protocols.

Sources: backend/server.py:1-40, frontend/src/App.js:100-150, test_result.md:58-65

Authentication Architecture

NEXUS utilizes a decoupled architecture where a FastAPI backend manages user identity and a React frontend handles user interactions. The core of the system is a JSON Web Token (JWT) implementation that allows for stateless authentication.

Data Flow Overview

The following diagram illustrates the high-level flow of a successful login attempt, from the user interface to the database validation and token return.

Backend Implementation

The backend is built using FastAPI and Motor (async MongoDB driver). It manages user registration, credential verification, and token generation.

Security Components

• Password Hashing: Uses bcrypt with salt generation to store passwords securely.
• JWT Generation: Uses the PyJWT library to create HS256 encoded tokens with an expiration time of 30 minutes.
• Dependency Injection: Utilizes FastAPI's Depends system to protect routes via the get_current_user and verify_token functions.

Sources: backend/server.py:27-30, backend/server.py:136-150

API Endpoints

Endpoint	Method	Description	Payload
/api/register	POST	Creates a new user account and returns a JWT.	UserCreate (username, email, password)
/api/login	POST	Authenticates credentials and returns a JWT.	UserLogin (username, password)
/api/me	GET	Returns the current authenticated user's profile.	N/A (Requires Bearer Token)

Sources: backend/server.py:153-180, backend_test.py:75-120

Frontend Implementation

The frontend implementation is centered around the AuthProvider and AuthContext, which manage the global authentication state across the React application.

State Management

The AuthProvider maintains:

1. User: The current user object returned from the /api/me endpoint.
2. Token: The JWT stored in localStorage.
3. Loading: A boolean flag to prevent rendering protected content before auth status is determined.

Sources: frontend/src/App.js:12-40

Protected Routing

Access to sensitive areas like the "Account Vault" or "Trial Tracker" is controlled by a ProtectedRoute component. If a user is not authenticated, they are automatically redirected to the /login page.

Visual Interface & Aesthetics

The NEXUS login interface is defined by a specific cyberpunk style described as "digital command center" aesthetic.

Styling Features

• Glassmorphism: Cards use backdrop-filter: blur(20px) and semi-transparent backgrounds (rgba(255, 255, 255, 0.05)).
• Particle Background: A custom HTML5 Canvas component renders animated particles behind the login form.
• Electric Blue Accents: Primary brand color #00D4FF is used for titles, input focus, and primary buttons.

Sources: frontend/src/App.css:55-75, frontend/src/App.js:85-130, test_result.md:105-115

Data Models

User Schema (Backend)

The user document stored in MongoDB includes the following fields:

Field	Type	Description
id	str	Unique UUID v4 identifier.
username	str	User's unique handle for login.
email	EmailStr	Validated email address.
hashed_password	str	Bcrypt hashed password string.
created_at	datetime	Timestamp of account creation (UTC).
is_active	bool	Account status flag.

Sources: backend/server.py:73-80

Testing & Validation

The authentication system is verified through a Python-based testing suite (backend_test.py) that performs the following checks:

1. User Registration: Validates that new users can be created and receive a token.
2. User Login: Ensures valid credentials yield a 200 OK response with a token.
3. Protected Route Access: Confirms that the /api/me endpoint returns correct data when presented with a valid Bearer token.
4. Invalid Token Handling: Verifies that requests with malformed or invalid tokens are rejected with a 401 status.

Sources: backend_test.py:75-132, test_result.md:65-72

In summary, the NEXUS Registration & Login system provides a secure, aesthetically pleasing entry point to the application, leveraging JWT for session management and Bcrypt for data protection, ensuring a high standard of security for tracking sensitive digital accounts.