Add authentication system for Live Components#57
Merged
MarcosBrendonDePaula merged 8 commits intomainfrom Feb 12, 2026
Merged
Conversation
Introduce a complete authentication infrastructure for Live Components, allowing developers to declaratively protect components and actions with roles and permissions via static properties. Key additions: - LiveAuthProvider interface for pluggable auth strategies (JWT, crypto, session) - LiveAuthManager singleton for provider registration and authorization checks - LiveAuthContext with role/permission helpers available via this.$auth - Static auth config on components (static auth / static actionAuth) - WebSocket AUTH message type + query param token support - Auth checks on component mount, rehydration, and action execution - CryptoAuthLiveProvider adapter bridging existing crypto-auth plugin - Client-side auth support in LiveComponentsProvider (auth prop + authenticate()) - Example LiveProtectedChat demonstrating the auth system https://claude.ai/code/session_0137gRBGeVfVpxJpCS63dVKQ
Tests cover: - AuthenticatedContext and AnonymousContext (role/permission helpers) - LiveAuthManager (provider registration, authentication, authorization) - LiveComponent $auth integration (context injection, static config) - Component mount authorization (required, roles, permissions) - Action-level authorization (per-action roles/permissions) - Room authorization https://claude.ai/code/session_0137gRBGeVfVpxJpCS63dVKQ
- Export LiveAuthOptions from core/client/index.ts
- Add $authenticated to LiveComponentProxy interface and proxy getter
- Add $authenticated to RESERVED_PROPS and ownKeys
- Filter setAuthContext from ExtractActions (defensive guard)
- Wire wsAuthenticated from LiveComponentsProvider into useMemo deps
Client-side devs can now:
component.$authenticated // boolean - typed
useLiveComponents().authenticated // boolean - typed
useLiveComponents().authenticate({ token }) // Promise<boolean> - typed
<LiveComponentsProvider auth={{ token }}> // typed prop
https://claude.ai/code/session_0137gRBGeVfVpxJpCS63dVKQ
…ider) - LiveAdminPanel: server component with static auth, actionAuth, $auth usage - AuthDemo.tsx: client demo showing public vs protected components, dynamic login via authenticate(), $authenticated in proxy - JWTAuthProvider.example.ts: how to create a custom LiveAuthProvider https://claude.ai/code/session_0137gRBGeVfVpxJpCS63dVKQ
- Add DevAuthProvider with simple tokens (admin-token, user-token, mod-token) - Add /auth route with interactive auth demo - Update LiveAuthManager to try all providers (fallback chain) - Fix auth flow to re-mount components after authentication - Add navigation link to Auth demo page 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add authDenied tracking to detect AUTH_DENIED failures - Auto retry mount when wsAuthenticated changes from false to true - Simplify AuthDemo by removing manual key/re-render logic - Fix infinite loop by properly setting mountFailed on all errors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Create LLMD/resources/live-auth.md with complete auth guide - Document static auth, actionAuth, $auth helper - Document client-side authentication flow - Document custom auth providers - Update INDEX.md with Live Auth link - Update live-components.md with related links 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add authentication subsection under Live Components - Show server-side auth config (static auth, actionAuth) - Show client-side authenticate() usage - Add Live Auth to documentation links - Add /auth route to frontend routes table - Update features list with Auth System 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a comprehensive authentication and authorization system for Live Components, enabling developers to protect components and actions with role-based access control (RBAC) and permission-based authorization.
Key Changes
Core Authentication System
core/server/live/auth/LiveAuthContext.ts): Implements authenticated and anonymous contexts with helpers for role/permission checkingcore/server/live/auth/LiveAuthManager.ts): Singleton manager for registering auth providers and authorizing component access and action executioncore/server/live/auth/types.ts): Defines interfaces for credentials, users, providers, and component/action auth configurationsComponent Integration
static auth: LiveComponentAuthdeclares component-level requirements (required, roles, permissions)static actionAuth: LiveActionAuthMapdeclares per-action authorization rulesthis.$authwith methods likehasRole(),hasPermission(), etc.WebSocket & Client Integration
authenticate()method andauthenticatedstate for client-side auth managementExample Implementations
app/server/live/LiveAdminPanel.ts): Demonstrates component-level auth (requires admin role) and action-level auth (deleteUser requires 'users.delete' permission)app/server/live/LiveProtectedChat.ts): Shows basic auth requirement and per-action permissionsapp/client/src/live/AuthDemo.tsx): React client example showing public/protected components and auth flowsapp/server/auth/JWTAuthProvider.example.ts): Example custom provider implementationplugins/crypto-auth/server/CryptoAuthLiveProvider.ts): Adapter integrating crypto-auth plugin with Live ComponentsComprehensive Test Suite
Implementation Details
https://claude.ai/code/session_0137gRBGeVfVpxJpCS63dVKQ