User & Account Management

The User & Account Management system handles the complete user lifecycle and commercial foundation of Onlook, from secure authentication and session management to subscription plans and feature access control. This system ensures seamless user onboarding, reliable account security, and flexible monetization through integrated payment processing and feature gating.

Product Specifications

User Experience Flow

A new user arrives at the Onlook website and signs in using their GitHub account, which is the only method of authentication. Once authenticated, they are automatically placed on a free plan with a default set of features. If they require premium capabilities, such as using a custom domain or removing Onlook branding, they can upgrade to a Pro plan. The upgrade process seamlessly redirects them to a Stripe-powered checkout page. After subscribing, they can manage their billing details, view invoices, or cancel their subscription at any time through a secure Stripe customer portal, accessible from their account settings.

Functional Requirements

Feature	End-to-End Business Logic and Rules
Streamlined GitHub Authentication	User Intent: To access the platform quickly and securely using their existing GitHub identity, without creating yet another username and password combination. End-to-End Flow: 1. Frontend - Simple Access Point: Users encounter a single “Sign In with GitHub” button that provides immediate access to the platform without complex registration forms or verification processes. 2. System - Secure Authorization Flow: The system redirects users to GitHub’s official authorization interface where they can review the specific permissions being requested and grant access to their GitHub profile information. 3. System - Automatic Account Provisioning: Upon successful authorization, the system automatically creates a user account if it’s their first visit, or seamlessly logs them into their existing account, using their GitHub profile information to personalize their experience. 4. Frontend - Immediate Platform Access: Users are instantly redirected back to Onlook with full access to the platform, automatically placed on the free tier with immediate access to core features. Key Rules & Constraints: - GitHub serves as the exclusive authentication method to streamline user onboarding and leverage existing developer credentials. - User accounts are automatically provisioned to eliminate friction in the sign-up process. - The system maintains security by using GitHub’s trusted OAuth infrastructure rather than managing passwords directly.
Persistent Session Management	User Intent: To maintain secure, uninterrupted access to the platform across multiple sessions and devices without repeatedly logging in or losing work progress. End-to-End Flow: 1. System - Transparent Security: The system automatically handles all security validation behind the scenes, ensuring users remain logged in while maintaining the highest security standards without any manual intervention required. 2. System - Intelligent Session Refresh: As users work on projects, the system proactively manages session expiration by automatically refreshing authentication tokens before they expire, preventing unexpected logouts during active work sessions. 3. System - Seamless Access Control: The system automatically protects all private areas of the application, ensuring that only authenticated users can access projects, settings, and premium features while providing smooth navigation throughout the platform. 4. Frontend - Uninterrupted Workflow: Users experience continuous access to their projects and tools without authentication interruptions, allowing them to focus entirely on their development work. Key Rules & Constraints: - Session security must be completely transparent to users while maintaining enterprise-grade protection. - The system must prevent any data loss or workflow interruption due to authentication issues. - All security operations must happen automatically without requiring user attention or intervention.
Seamless Subscription Management	User Intent: To easily upgrade to premium features when needed, with a simple and secure payment process that doesn’t disrupt their development workflow. End-to-End Flow: 1. Frontend - Upgrade Discovery: When users encounter premium features or reach free plan limits, the system presents clear, contextual upgrade prompts that explain the benefits and value of Pro features. 2. System - Streamlined Checkout Process: Users are guided through a simple upgrade flow that redirects them to Stripe’s secure, hosted payment interface, eliminating the need for Onlook to handle sensitive payment information directly. 3. System - Automatic Account Upgrade: Once payment is completed, the system automatically updates the user’s account status and immediately unlocks all Pro features without requiring additional steps or manual activation. 4. Frontend - Instant Feature Access: Users are seamlessly returned to their work environment with immediate access to premium capabilities, allowing them to continue their development workflow without interruption. 5. System - Ongoing Subscription Management: Users can access a comprehensive billing portal to manage their subscription, update payment methods, view invoices, and handle account changes through Stripe’s trusted interface. Key Rules & Constraints: - Payment processing must be secure and PCI-compliant through Stripe’s infrastructure. - Account upgrades must be instant and automatic to provide immediate value. - Subscription management must be accessible and user-friendly for ongoing account maintenance.
Intelligent Feature Access Control	User Intent: To have clear visibility into available features and seamless access to premium capabilities based on their subscription level, with helpful guidance for upgrading when needed. End-to-End Flow: 1. System - Dynamic Feature Availability: The interface dynamically adapts to show available features based on the user’s current subscription level, with premium features clearly marked and explained when not accessible. 2. Frontend - Contextual Upgrade Prompts: When free plan users attempt to access premium features (such as custom domains, advanced collaboration, or removing branding), the system provides contextual explanations of the feature’s value and clear paths to upgrade. 3. System - Secure Access Enforcement: All feature access is validated on the backend to ensure security and prevent unauthorized access to premium capabilities, while providing clear feedback about access restrictions. 4. Frontend - Seamless Pro Experience: Pro users experience the full platform without restrictions or upgrade prompts, with all premium features seamlessly integrated into their workflow. Key Rules & Constraints: - Feature restrictions must be clearly communicated to avoid user frustration. - Access control must be secure and cannot be bypassed through frontend manipulation. - Premium features must provide clear value that justifies the subscription cost.
Account Settings and Profile Management	User Intent: To manage their account information, preferences, and subscription details through an intuitive interface that provides full control over their Onlook experience. End-to-End Flow: 1. Frontend - Settings Access: Users can access comprehensive account settings through a dedicated interface that organizes all account management functions in a logical, easy-to-navigate structure. 2. System - Profile Information Management: Users can view and update their profile information, including details imported from GitHub, personal preferences, and account settings that affect their development experience. 3. System - Subscription Control Interface: The settings interface provides direct access to subscription management, including plan details, billing history, payment method updates, and subscription modification or cancellation options. 4. Frontend - Usage Analytics and Insights: Users can view their platform usage statistics, project analytics, and feature utilization to understand their development patterns and optimize their workflow. Key Rules & Constraints: - All account changes must be immediately reflected throughout the platform. - Sensitive operations like subscription cancellation must include appropriate confirmations and explanations. - Profile management must respect user privacy and provide clear control over data sharing and usage.

Technical Solution

Natural Language Technical Solution

The User & Account Management system operates as a secure, frictionless user lifecycle platform that seamlessly integrates authentication, subscription management, and feature access control into a unified experience that prioritizes user convenience while maintaining enterprise-grade security.

The Authentication System leverages GitHub’s trusted OAuth infrastructure to eliminate password management complexity while providing secure access control. This approach reduces user friction by utilizing existing developer credentials and provides robust security through GitHub’s established authentication mechanisms.

The Session Management System operates transparently in the background, maintaining secure user sessions across all platform interactions while automatically handling token refresh and access validation. This ensures users experience uninterrupted access to their projects and tools without authentication-related disruptions.

The Subscription Management System integrates seamlessly with Stripe’s payment infrastructure to provide secure, PCI-compliant payment processing with minimal user friction. The system automatically handles account upgrades, feature unlocking, and ongoing subscription management through trusted third-party interfaces.

The Feature Access Control System dynamically adapts the user interface based on subscription status while maintaining secure backend validation. This creates a personalized experience that clearly communicates available features while providing contextual upgrade paths for premium capabilities.

End-to-end Execution Sequence Diagram (Subscription)

AI Replication & Reference