Authentication UI
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Authentication UI provides the entry point for users to access the TrueLens platform. It encompasses the login and registration interfaces, designed to facilitate secure user onboarding and session management. This system allows users to create accounts or sign in via traditional email/password credentials or third-party OAuth providers such as Google and GitHub.
The UI is built using React and Next.js, leveraging Framer Motion for smooth transitions and Tailwind CSS for styling. It serves as the gateway to protected areas of the application, such as the Dashboard and advanced content analysis tools.
Sources: truelens-app/src/app/login/page.tsx, truelens-app/src/app/register/page.tsx, truelens-app/src/app/layout.tsx
Core Components
Login Interface
The Login page provides a centralized form for existing users to re-authenticate. It features a "Glassmorphism" card design that contains both social authentication options and a manual credential form.
- OAuth Integration: Provides buttons for "Continue with Google" and "Continue with GitHub".
- Credential Form: Includes fields for Email and Password with visual icons (Mail, Lock).
- Navigation: Includes a link to the registration page for new users.
Sources: truelens-app/src/app/login/page.tsx:23-110, truelens-app/src/app/globals.css:81-86
Registration Interface
The Registration page handles new user onboarding. It mirrors the layout of the login interface but includes additional fields necessary for profile creation.
- User Information: Collects "Full Name" in addition to email and password credentials.
- Validation Hints: The password field includes a "Min 8 characters" placeholder to guide user input.
- Redirection: Upon successful form submission, the user is redirected to the
/dashboard.
Sources: truelens-app/src/app/register/page.tsx:14-135
Data Flow and Logic
Authentication Submission Flow
The authentication logic currently handles form submissions by preventing default browser behavior and navigating the user to the internal dashboard. While social buttons are present, they are configured to trigger an immediate redirect for prototype purposes.
Explanation: This flowchart illustrates the user path from initial page load through the various authentication methods available in the UI.
Sources: truelens-app/src/app/login/page.tsx:13-18, truelens-app/src/app/register/page.tsx:15-19
User Data Model
The internal representation of an authenticated user is defined by the User interface, which tracks identity, contact information, and service tier.
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for the user. |
email | string | User's primary email address. |
name | string | User's full name. |
avatar | string (Optional) | URL to the user's profile picture. |
plan | "free" | "pro" | "enterprise" | The subscription tier assigned to the user. |
createdAt | string | ISO timestamp of account creation. |
Sources: truelens-app/src/lib/types.ts:1-8
Design and Styling
Theme Integration
The Authentication UI utilizes the global "Dark" theme defined in the root layout. It uses a custom color palette focused on deep purples and high-contrast text.
- Colors: Primary background
#09090B, Brand Mid (Purple)#7C3AED. - Visual Effects: Uses
glass-cardfor container transparency andgradient-meshfor background depth. - Typography: Implements the 'Inter' sans-serif font for readability and 'JetBrains Mono' for technical identifiers.
Sources: truelens-app/src/app/layout.tsx:34-43, truelens-app/src/app/globals.css:4-53
Form Components
Inputs and buttons are standardized across both Login and Register views using CSS utility classes.
// Example of a standardized input field in the Auth UI
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
className="input-field !pl-11 text-sm"
/>
Sources: truelens-app/src/app/login/page.tsx:82-90, truelens-app/src/app/globals.css:176-193
Summary
The Authentication UI provides a streamlined and visually consistent onboarding experience for TrueLens users. By combining traditional credential-based forms with modern OAuth providers and high-fidelity design tokens, the system ensures that users can securely and efficiently access the platform's content verification features.