Authentication & User Profiles
Relevant source files
The following files were used as context for generating this wiki page:
The Authentication and User Profiles system manages user identity, secure access to API resources, and personalized application settings. It integrates Supabase Auth for credential management and Google OAuth for streamlined sign-in, while maintaining user-specific data through a profile and preferences architecture.
The system encompasses client-side authentication handling within the Chrome extension and server-side validation through middleware on the Express backend. Users manage their accounts through a dedicated dashboard and popup interface, which provides controls for subscription tiers, personal details, and extension behavior.
Sources: README.md:144-159, extension/src/background/auth.ts
Authentication Architecture
The project employs a multi-layered authentication strategy that bridges the Chrome extension and the backend API. The extension's background service worker acts as the primary orchestrator for authentication states, token management, and communication with the Supabase client.
Authentication Flow
The extension utilizes chrome.identity for Google OAuth and the Supabase Auth API for standard email/password flows. Once authenticated, the service worker stores session data and provides access tokens to the API client for secure requests.
This diagram illustrates the login sequence and how the resulting JWT is used for backend authorization.
Sources: extension/src/background/auth.ts:93-110, extension/src/background/api-client.ts:88-105, backend/lib/auth-middleware.ts:9-25
Token Management
The api-client.ts module implements an authFetch wrapper that automatically handles authentication headers. If a request returns a 401 Unauthorized status, the client attempts to refresh the access token via Supabase and retries the request once before failing.
Sources: extension/src/background/api-client.ts:88-120
User Profile System
User profiles store metadata and operational status for every registered account. This data is synchronized between the Supabase profiles table and the extension's local state.
Profile Data Structure
Profiles include identity markers and subscription tier information, which gates specific features like advanced AI personalities or custom PDF exports.
| Field | Description | Source |
|---|---|---|
id | Unique identifier (UUID) | extension/src/background/auth.ts:28 |
display_name | User's chosen name, collected at sign-up | extension/src/popup/index.ts:474-480 |
email | Registered email address | extension/src/background/auth.ts:28 |
tier | Subscription level (free or standard) | extension/src/background/auth.ts:31 |
annotation_count | Total number of annotations created | extension/src/background/index.ts:251 |
Profile Management Actions
Users can perform the following actions related to their profiles:
- Sign Up: Collects email, password, and
displayName. It handles cases where email confirmation is required by caching the name locally until the first login. Sources: extension/src/background/index.ts:365-375 - Update Profile: Allows users to change their
display_namethrough the dashboard or settings page. Sources: backend/routes/user/account.ts - Delete Account: A destructive action that removes the user's Supabase auth record and all associated data from the database. Sources: backend/routes/user/account.ts:16-25
Preferences and Personalization
Preferences govern the behavior and visual style of the extension for each user. These settings are persisted in the database to ensure a consistent experience across different browser installations.
User Preferences Schema
The system merges partial updates into a JSONB structure in the database.
| Preference | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Global extension toggle |
annotation_mode | string | overview | AI processing mode |
depth_personality | string | terry | The active AI persona |
annotation_font | string | fraunces | Font used in popovers |
annotation_font_size | string | default | Text size for annotations |
enabled_sites | string[] | (Seed List) | Domains where Oddity is active |
Sources: extension/src/popup/index.ts:68-76, backend/routes/user/preferences.ts:23-45
Preference Synchronization Flow
When a user changes a setting in the popup UI, the extension performs a local update followed by a background synchronization to the backend.
The flow ensures that settings like "Global Toggle" or "Font Change" apply instantly to all active websites.
Sources: extension/src/background/index.ts:964-1010, extension/src/popup/index.ts:98-115
Backend Security and Middleware
The backend protects user data and AI resources through an authMiddleware that validates incoming requests.
Authentication Middleware
The middleware extracts the Bearer token from the Authorization header and verifies it against Supabase. If the token is valid, it attaches the user object to the request context; otherwise, it returns a 401 error.
Sources: backend/lib/auth-middleware.ts:9-30
Account and Data Protection
Specific routes implement Row Level Security (RLS) or server-side checks to ensure users only access their own data:
- Preferences Route: Only allows fetching or updating the preferences for the authenticated user ID. Sources: backend/routes/user/preferences.ts:10-20
- Account Deletion: Requires a valid session and uses the
serviceRoleclient to clean up the Supabase Auth user record. Sources: backend/routes/user/account.ts:27-40
Conclusion
The Authentication and User Profile system provides a secure foundation for Oddity 1. By combining Supabase Auth with a robust preference synchronization logic, it allows for seamless identity management across the Chrome extension and the backend. The tier-based profile system further enables the project to gate advanced features while ensuring user data remains protected through standardized JWT validation and server-side middleware.
Sources: extension/src/background/auth.ts, backend/lib/auth-middleware.ts, extension/src/popup/index.ts