Authentication Interface

Relevant source files

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

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

The Authentication Interface of the NEXUS system provides a secure gateway for users to manage their digital accounts and trial tracking. It implements a modern, cyberpunk-themed front-end coupled with a robust JSON Web Token (JWT) based backend. This interface serves as the primary entry point, ensuring that all user data related to accounts, emails, and trials remains isolated and protected.

The system utilizes a "cyberpunk-meets-luxury" aesthetic, featuring glassmorphism, particle animations, and electric blue gradients. It handles core security tasks including user registration, password hashing via bcrypt, and session management through persistent storage of access tokens.

System Architecture

The authentication system is split between a React-based frontend and a FastAPI-based backend. The frontend manages the state of the authenticated user and handles routing, while the backend provides the logic for token generation, validation, and user persistence.

Authentication Flow

The following diagram illustrates the sequence of actions during a successful user login.

Key Components

Component	Description	Source File
AuthProvider	React Context Provider that manages user state, tokens, and auth methods (login, register, logout).	frontend/src/App.js:10-85
Login Component	The visual interface containing the login/register toggle and input forms.	frontend/src/App.js:154-219
ProtectedRoute	A wrapper component that redirects unauthenticated users to the /login route.	frontend/src/App.js:770-785
ParticleBackground	A canvas-based visual effect component that renders the cyberpunk aesthetic.	frontend/src/App.js:93-152

Backend Authentication Logic

The backend uses JWT for stateless authentication. Passwords are never stored in plain text; instead, they are processed using the bcrypt hashing algorithm.

Data Models

The system defines several Pydantic models to validate authentication requests and responses.

Model	Fields	Description
UserCreate	username, email, password	Schema for new user registration.
UserLogin	username, password	Schema for authentication requests.
Token	access_token, token_type	Schema for the JWT response.
User	id, username, email, hashed_password, created_at, is_active	The internal representation of a user in the database.

Sources: backend/server.py:84-110

Security Implementation

The backend exposes specific endpoints for identity management:

• POST /api/register: Hashes the provided password using bcrypt.hashpw and stores the user in MongoDB.
• POST /api/login: Verifies the password using bcrypt.checkpw and returns a JWT with a 30-minute expiration.
• GET /api/me: A protected route that returns the current user's profile based on the decoded JWT sub (subject) claim.

Sources: backend/server.py:202-234, backend/server.py:53-55

Frontend Visual Design

The interface is styled using a "cyberpunk" aesthetic defined in App.css. This includes specific color variables and glassmorphism effects.

Cyberpunk Aesthetic Variables

:root {
  --bg-primary: #0A0A0B;
  --electric-blue: #00D4FF;
  --vibrant-purple: #9D4EDD;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --gradient-primary: linear-gradient(135deg, var(--electric-blue), var(--vibrant-purple));
}

Sources: frontend/src/App.css:5-24

Implementation Features

1. Glassmorphism: The login form uses backdrop-filter: blur(20px) and a thin border to create a "glass" effect.
2. Particle Animation: A custom Particle class in App.js manages 50 floating dots on a canvas, moving with random velocities and reflecting off screen edges.
3. Responsive Form: The auth-form is capped at a max-width: 450px for desktop and adjusts to 1.5rem padding for mobile devices.

Sources: frontend/src/App.css:88-105, frontend/src/App.js:106-136, frontend/src/App.css:738-750

Testing and Verification

The authentication system is verified via a comprehensive Python testing suite (backend_test.py) and tracked in the test_result.md log.

Test Coverage

The NEXUSAPITester class validates the following scenarios:

1. User Registration: Confirms status code 201/200 and presence of a valid JWT token.
2. User Login: Ensures valid credentials yield a token.
3. Protected Access: Validates that the /me endpoint correctly identifies the user from the Bearer token.
4. Invalid Token Handling: Confirms the system rejects malformed or invalid tokens with a 401 Unauthorized status.

Sources: backend_test.py:69-122

Current Status

According to the latest testing data, the backend authentication system has passed 4/4 critical tests. However, the frontend has a documented routing issue where the app does not automatically redirect from the /login page to the dashboard after a successful API response.

Sources: test_result.md:104-123, test_result.md:145-154

Summary

The NEXUS Authentication Interface provides a secure, visually striking entry point to the system. By leveraging JWT for stateless security and bcrypt for password protection, it ensures robust user isolation. While the backend and visual components are fully operational, the current implementation requires a fix in the React routing logic to complete the transition from the authentication phase to the management dashboard.