create-fluxstack 1.12.1 → 1.13.0

package/app/client/src/App.tsx

@@ -7,6 +7,7 @@ import { CounterDemo } from './live/CounterDemo'
 import { UploadDemo } from './live/UploadDemo'
 import { ChatDemo } from './live/ChatDemo'
 import { RoomChatDemo } from './live/RoomChatDemo'
+import { AuthDemo } from './live/AuthDemo'
 import { AppLayout } from './components/AppLayout'
 import { DemoPage } from './components/DemoPage'
 import { HomePage } from './pages/HomePage'
@@ -126,6 +127,16 @@ function AppContent() {
             </DemoPage>
           }
         />
+        <Route
+          path="/auth"
+          element={
+            <DemoPage
+              note={<>🔒 Sistema de autenticação declarativo para Live Components com <code className="text-purple-400">$auth</code>!</>}
+            >
+              <AuthDemo />
+            </DemoPage>
+          }
+        />
         <Route path="*" element={<HomePage apiStatus={apiStatus} />} />
       </Route>
     </Routes>

package/app/client/src/components/AppLayout.tsx

@@ -8,6 +8,7 @@ const navItems = [
   { to: '/upload', label: 'Upload' },
   { to: '/chat', label: 'Chat' },
   { to: '/room-chat', label: 'Room Chat' },
+  { to: '/auth', label: 'Auth' },
   { to: '/api-test', label: 'API Test' }
 ]
 

package/app/client/src/live/AuthDemo.tsx

@@ -0,0 +1,332 @@
+// 🔒 AuthDemo - Exemplo completo de autenticação em Live Components
+//
+// Demonstra:
+//  1. Conexão autenticada via LiveComponentsProvider
+//  2. Auth dinâmico via useLiveComponents().authenticate()
+//  3. Componente público (sem auth)
+//  4. Componente protegido (requer auth + role)
+//  5. Actions protegidas por permissão
+//  6. Leitura de $authenticated no proxy
+
+import { useState } from 'react'
+import { Live, useLiveComponents } from '@/core/client'
+import type { LiveAuthOptions } from '@/core/client'
+import { LiveCounter } from '@server/live/LiveCounter'
+import { LiveAdminPanel } from '@server/live/LiveAdminPanel'
+
+// ───────────────────────────────────────
+// 1. Componente público (sem auth)
+//    Funciona para qualquer visitante
+// ───────────────────────────────────────
+
+function PublicSection() {
+  const counter = Live.use(LiveCounter, {
+    room: 'public-counter',
+    initialState: LiveCounter.defaultState,
+    persistState: false,
+  })
+
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+      <h3 className="text-lg font-semibold text-white mb-1">Contador Público</h3>
+      <p className="text-gray-400 text-xs mb-4">Sem autenticação necessária</p>
+
+      <div className="flex items-center gap-4">
+        <button
+          onClick={() => counter.decrement()}
+          className="px-3 py-1 rounded bg-red-500/20 text-red-300 hover:bg-red-500/30"
+        >
+          −
+        </button>
+        <span className="text-3xl font-bold text-white">{counter.$state.count}</span>
+        <button
+          onClick={() => counter.increment()}
+          className="px-3 py-1 rounded bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30"
+        >
+          +
+        </button>
+      </div>
+
+      <div className="mt-3 text-xs text-gray-500">
+        $authenticated: <code className="text-yellow-300">{String(counter.$authenticated)}</code>
+      </div>
+    </div>
+  )
+}
+
+// ───────────────────────────────────────
+// 2. Painel admin (requer auth + role)
+//    Demonstra $auth no servidor
+// ───────────────────────────────────────
+
+function AdminSection() {
+  const [newUserName, setNewUserName] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  const panel = Live.use(LiveAdminPanel, { persistState: false })
+
+  // Se não autenticado ou sem permissão, o mount falha com AUTH_DENIED
+  if (panel.$error?.includes('AUTH_DENIED')) {
+    return (
+      <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-red-300 mb-2">Painel Admin</h3>
+        <p className="text-red-400 text-sm">
+          Acesso negado: {panel.$error}
+        </p>
+        <p className="text-gray-400 text-xs mt-2">
+          Autentique-se com role &quot;admin&quot; para acessar.
+        </p>
+      </div>
+    )
+  }
+
+  if (panel.$status === 'mounting' || panel.$loading) {
+    return (
+      <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+        <div className="flex items-center gap-2 text-gray-400">
+          <div className="w-4 h-4 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+          Montando painel admin...
+        </div>
+      </div>
+    )
+  }
+
+  const handleAddUser = async () => {
+    if (!newUserName.trim()) return
+    try {
+      await panel.addUser({ name: newUserName.trim(), role: 'user' })
+      setNewUserName('')
+      setError(null)
+    } catch (e: any) {
+      setError(e.message)
+    }
+  }
+
+  const handleDeleteUser = async (userId: string) => {
+    try {
+      await panel.deleteUser({ userId })
+      setError(null)
+    } catch (e: any) {
+      // Se AUTH_DENIED, significa que faltou a permissão 'users.delete'
+      setError(e.message)
+    }
+  }
+
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="text-lg font-semibold text-white">Painel Admin</h3>
+          <p className="text-gray-400 text-xs">
+            Requer: <code className="text-purple-300">auth.required + roles: [&apos;admin&apos;]</code>
+          </p>
+        </div>
+        <div className="text-xs text-right">
+          <div className="text-gray-400">
+            User: <span className="text-emerald-300">{panel.$state.currentUser || '...'}</span>
+          </div>
+          <div className="text-gray-400">
+            Roles: <span className="text-yellow-300">{panel.$state.currentRoles.join(', ') || '...'}</span>
+          </div>
+        </div>
+      </div>
+
+      {error && (
+        <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 mb-4 text-red-300 text-sm">
+          {error}
+        </div>
+      )}
+
+      {/* User list */}
+      <div className="space-y-2 mb-4">
+        {panel.$state.users.map(user => (
+          <div key={user.id} className="flex items-center justify-between bg-black/20 rounded-lg px-4 py-2">
+            <div>
+              <span className="text-white font-medium">{user.name}</span>
+              <span className="text-gray-500 text-xs ml-2">({user.role})</span>
+            </div>
+            <button
+              onClick={() => handleDeleteUser(user.id)}
+              className="text-xs px-2 py-1 rounded bg-red-500/20 text-red-300 hover:bg-red-500/30"
+              title="Requer permissão 'users.delete'"
+            >
+              Deletar
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Add user */}
+      <div className="flex gap-2">
+        <input
+          value={newUserName}
+          onChange={e => setNewUserName(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleAddUser()}
+          placeholder="Nome do usuário..."
+          className="flex-1 px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
+        />
+        <button
+          onClick={handleAddUser}
+          className="px-4 py-2 rounded-lg bg-purple-500/20 border border-purple-500/30 text-purple-200 text-sm hover:bg-purple-500/30"
+        >
+          Adicionar
+        </button>
+      </div>
+
+      {/* Audit log */}
+      {panel.$state.audit.length > 0 && (
+        <div className="mt-4 pt-4 border-t border-white/10">
+          <div className="flex items-center justify-between mb-2">
+            <h4 className="text-sm font-semibold text-gray-300">Audit Log</h4>
+            <button
+              onClick={() => panel.clearAudit()}
+              className="text-xs px-2 py-1 rounded bg-gray-500/20 text-gray-400 hover:bg-gray-500/30"
+              title="Requer role 'admin'"
+            >
+              Limpar
+            </button>
+          </div>
+          <div className="space-y-1 max-h-32 overflow-auto">
+            {panel.$state.audit.map((entry, i) => (
+              <div key={i} className="text-xs text-gray-500">
+                <span className="text-gray-400">{new Date(entry.timestamp).toLocaleTimeString()}</span>
+                {' '}<span className="text-blue-300">{entry.action}</span>
+                {' '}by <span className="text-emerald-300">{entry.performedBy}</span>
+                {entry.target && <> on <span className="text-yellow-300">{entry.target}</span></>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ───────────────────────────────────────
+// 3. Controle de autenticação
+//    Simula login/logout via authenticate()
+// ───────────────────────────────────────
+
+function AuthControls() {
+  const { authenticated, authenticate, reconnect } = useLiveComponents()
+  const [token, setToken] = useState('')
+  const [isLoggingIn, setIsLoggingIn] = useState(false)
+
+  const handleLogin = async () => {
+    if (!token.trim()) return
+    setIsLoggingIn(true)
+    await authenticate({ token: token.trim() })
+    setIsLoggingIn(false)
+    // Componentes detectam automaticamente a mudança de auth e remontam
+  }
+
+  const handleLogout = () => {
+    setToken('')
+    // Reconectar sem token = nova conexão anônima
+    reconnect()
+  }
+
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-xl p-6 mb-6">
+      <h3 className="text-lg font-semibold text-white mb-2">Autenticação</h3>
+
+      <div className="flex items-center gap-3 mb-4">
+        <div className={`w-3 h-3 rounded-full ${authenticated ? 'bg-emerald-400' : 'bg-gray-500'}`} />
+        <span className={`text-sm ${authenticated ? 'text-emerald-300' : 'text-gray-400'}`}>
+          {authenticated ? 'Autenticado' : 'Não autenticado'}
+        </span>
+      </div>
+
+      <div className="flex gap-2">
+        <input
+          value={token}
+          onChange={e => setToken(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleLogin()}
+          placeholder="Token (JWT, API key, etc.)"
+          className="flex-1 px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
+        />
+        <button
+          onClick={handleLogin}
+          disabled={isLoggingIn}
+          className="px-4 py-2 rounded-lg bg-emerald-500/20 border border-emerald-500/30 text-emerald-200 text-sm hover:bg-emerald-500/30 disabled:opacity-50"
+        >
+          {isLoggingIn ? 'Autenticando...' : 'Login'}
+        </button>
+        {authenticated && (
+          <button
+            onClick={handleLogout}
+            className="px-4 py-2 rounded-lg bg-red-500/20 border border-red-500/30 text-red-200 text-sm hover:bg-red-500/30"
+          >
+            Logout
+          </button>
+        )}
+      </div>
+
+      <div className="mt-4 p-3 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
+        <p className="text-emerald-300 text-xs font-semibold mb-2">Tokens de teste (dev only):</p>
+        <div className="grid grid-cols-3 gap-2 text-xs">
+          <button
+            onClick={() => { setToken('admin-token'); }}
+            className="px-2 py-1 rounded bg-purple-500/20 text-purple-300 hover:bg-purple-500/30"
+          >
+            admin-token
+          </button>
+          <button
+            onClick={() => { setToken('user-token'); }}
+            className="px-2 py-1 rounded bg-blue-500/20 text-blue-300 hover:bg-blue-500/30"
+          >
+            user-token
+          </button>
+          <button
+            onClick={() => { setToken('mod-token'); }}
+            className="px-2 py-1 rounded bg-yellow-500/20 text-yellow-300 hover:bg-yellow-500/30"
+          >
+            mod-token
+          </button>
+        </div>
+        <p className="text-gray-500 text-xs mt-2">
+          Clique para preencher o campo, depois clique em Login.
+        </p>
+      </div>
+
+      <p className="text-gray-500 text-xs mt-3">
+        Fluxo: <code>authenticate(&#123; token &#125;)</code> envia mensagem <code>AUTH</code> via WebSocket.
+        O servidor valida via <code>LiveAuthProvider</code> registrado.
+      </p>
+    </div>
+  )
+}
+
+// ───────────────────────────────────────
+// 4. Demo principal
+// ───────────────────────────────────────
+
+export function AuthDemo() {
+  return (
+    <div className="space-y-6 w-full max-w-2xl mx-auto">
+      <div className="text-center mb-8">
+        <h2 className="text-3xl font-bold text-white mb-2">Live Components Auth</h2>
+        <p className="text-gray-400">
+          Sistema de autenticação declarativo para componentes real-time
+        </p>
+      </div>
+
+      <AuthControls />
+
+      <div className="grid gap-6">
+        <PublicSection />
+        <AdminSection />
+      </div>
+
+      <div className="bg-white/5 border border-white/10 rounded-xl p-6 text-xs text-gray-500 space-y-2">
+        <h4 className="text-sm font-semibold text-gray-300 mb-3">Como funciona</h4>
+        <p><strong className="text-purple-300">Server:</strong> <code>static auth = &#123; required: true, roles: [&apos;admin&apos;] &#125;</code></p>
+        <p><strong className="text-purple-300">Server:</strong> <code>static actionAuth = &#123; deleteUser: &#123; permissions: [&apos;users.delete&apos;] &#125; &#125;</code></p>
+        <p><strong className="text-purple-300">Server:</strong> <code>this.$auth.hasRole(&apos;admin&apos;)</code> dentro das actions</p>
+        <p><strong className="text-blue-300">Client:</strong> <code>component.$authenticated</code> no proxy</p>
+        <p><strong className="text-blue-300">Client:</strong> <code>useLiveComponents().authenticate(&#123; token &#125;)</code> para login</p>
+        <p><strong className="text-blue-300">Client:</strong> <code>&lt;LiveComponentsProvider auth=&#123;&#123; token &#125;&#125;&gt;</code> para auth na conexão</p>
+      </div>
+    </div>
+  )
+}

package/app/server/auth/AuthManager.ts

@@ -0,0 +1,213 @@
+/**
+ * FluxStack Auth - Auth Manager
+ *
+ * Orquestrador central do sistema de autenticação.
+ * Factory pattern com lazy resolution e cache de guards.
+ *
+ * Inspirado no AuthManager do Laravel:
+ * - Resolve guards por nome (ou default)
+ * - Extensível com extend() para guards customizados
+ * - Resolve providers automaticamente da config
+ *
+ * ```ts
+ * // Usar guard padrão
+ * const user = await auth.guard().user()
+ *
+ * // Usar guard específico
+ * const apiUser = await auth.guard('api').user()
+ *
+ * // Registrar guard customizado
+ * auth.extend('jwt', (name, config, provider) => new JWTGuard(...))
+ * ```
+ */
+
+import type {
+  Guard,
+  UserProvider,
+  GuardConfig,
+  GuardFactory,
+  RequestContext,
+} from './contracts'
+import { SessionGuard } from './guards/SessionGuard'
+import { TokenGuard } from './guards/TokenGuard'
+import { SessionManager } from './sessions/SessionManager'
+import { cacheManager } from '@server/cache'
+
+export interface AuthManagerConfig {
+  defaults: {
+    guard: string
+    provider: string
+  }
+  guards: Record<string, GuardConfig>
+  providers: Record<string, ProviderConfig>
+}
+
+export interface ProviderConfig {
+  driver: string
+  [key: string]: unknown
+}
+
+export class AuthManager {
+  private config: AuthManagerConfig
+  private guards = new Map<string, Guard>()
+  private customGuardFactories = new Map<string, GuardFactory>()
+  private providerInstances = new Map<string, UserProvider>()
+  private customProviderFactories = new Map<string, (config: ProviderConfig) => UserProvider>()
+  private sessionManager: SessionManager
+
+  constructor(config: AuthManagerConfig, sessionManager: SessionManager) {
+    this.config = config
+    this.sessionManager = sessionManager
+  }
+
+  /**
+   * Retorna um guard por nome (ou o default).
+   * Guards são criados uma vez e reutilizados.
+   */
+  guard(name?: string): Guard {
+    const guardName = name ?? this.config.defaults.guard
+
+    if (this.guards.has(guardName)) {
+      return this.guards.get(guardName)!
+    }
+
+    const guard = this.resolve(guardName)
+    this.guards.set(guardName, guard)
+    return guard
+  }
+
+  /**
+   * Inicializa todos os guards com o contexto da request.
+   * Deve ser chamado no middleware, antes de qualquer uso.
+   */
+  setRequest(context: RequestContext): void {
+    for (const guard of this.guards.values()) {
+      guard.setRequest(context)
+    }
+    // Também resetar guards não-instanciados para forçar re-resolve com novo context
+  }
+
+  /**
+   * Cria um guard novo (sem cache) com o context da request.
+   * Útil quando precisa de um guard fresco para cada request.
+   */
+  freshGuard(name?: string, context?: RequestContext): Guard {
+    const guardName = name ?? this.config.defaults.guard
+    const guard = this.resolve(guardName)
+    if (context) {
+      guard.setRequest(context)
+    }
+    return guard
+  }
+
+  /**
+   * Registra um guard driver customizado.
+   *
+   * ```ts
+   * auth.extend('jwt', (name, config, provider) => {
+   *   return new JWTGuard(name, provider, config.secret)
+   * })
+   * ```
+   */
+  extend(driver: string, factory: GuardFactory): void {
+    this.customGuardFactories.set(driver, factory)
+  }
+
+  /**
+   * Registra um provider customizado.
+   *
+   * ```ts
+   * auth.extendProvider('drizzle', (config) => {
+   *   return new DrizzleUserProvider(db, config.table)
+   * })
+   * ```
+   */
+  extendProvider(driver: string, factory: (config: ProviderConfig) => UserProvider): void {
+    this.customProviderFactories.set(driver, factory)
+  }
+
+  /**
+   * Registra uma instância de provider diretamente.
+   */
+  registerProvider(name: string, provider: UserProvider): void {
+    this.providerInstances.set(name, provider)
+  }
+
+  /** Retorna o nome do guard padrão */
+  getDefaultGuardName(): string {
+    return this.config.defaults.guard
+  }
+
+  /** Retorna a config */
+  getConfig(): AuthManagerConfig {
+    return this.config
+  }
+
+  /** Resolve um guard por nome */
+  private resolve(name: string): Guard {
+    const guardConfig = this.config.guards[name]
+    if (!guardConfig) {
+      throw new Error(
+        `Auth guard '${name}' not configured. ` +
+        `Available: ${Object.keys(this.config.guards).join(', ')}`
+      )
+    }
+
+    // Resolver provider
+    const provider = this.resolveProvider(guardConfig.provider)
+
+    // Verificar custom factory primeiro
+    if (this.customGuardFactories.has(guardConfig.driver)) {
+      return this.customGuardFactories.get(guardConfig.driver)!(name, guardConfig, provider)
+    }
+
+    // Built-in drivers
+    switch (guardConfig.driver) {
+      case 'session':
+        return new SessionGuard(name, provider, this.sessionManager)
+
+      case 'token':
+        return new TokenGuard(
+          name,
+          provider,
+          cacheManager.driver(),
+          guardConfig.tokenTtl as number | undefined
+        )
+
+      default:
+        throw new Error(
+          `Auth guard driver '${guardConfig.driver}' not supported. ` +
+          `Use auth.extend('${guardConfig.driver}', factory) to register it.`
+        )
+    }
+  }
+
+  /** Resolve um provider por nome */
+  private resolveProvider(name: string): UserProvider {
+    // Cache de instâncias
+    if (this.providerInstances.has(name)) {
+      return this.providerInstances.get(name)!
+    }
+
+    const providerConfig = this.config.providers[name]
+    if (!providerConfig) {
+      throw new Error(
+        `Auth provider '${name}' not configured. ` +
+        `Available: ${Object.keys(this.config.providers).join(', ')}`
+      )
+    }
+
+    // Custom factory
+    if (this.customProviderFactories.has(providerConfig.driver)) {
+      const provider = this.customProviderFactories.get(providerConfig.driver)!(providerConfig)
+      this.providerInstances.set(name, provider)
+      return provider
+    }
+
+    throw new Error(
+      `Auth provider driver '${providerConfig.driver}' not supported. ` +
+      `Use auth.extendProvider('${providerConfig.driver}', factory) to register it, ` +
+      `or use auth.registerProvider('${name}', providerInstance) to register directly.`
+    )
+  }
+}

package/app/server/auth/DevAuthProvider.ts

@@ -0,0 +1,66 @@
+// 🧪 DevAuthProvider - Provider de desenvolvimento para testes de auth
+//
+// Aceita tokens simples para facilitar testes da demo de autenticação.
+// NÃO USAR EM PRODUÇÃO!
+//
+// Tokens válidos:
+//   - "admin-token" → role: admin, permissions: all
+//   - "user-token"  → role: user, permissions: básicas
+//   - "mod-token"   → role: moderator, permissions: moderação
+
+import type {
+  LiveAuthProvider,
+  LiveAuthCredentials,
+  LiveAuthContext,
+} from '@core/server/live/auth/types'
+import { AuthenticatedContext } from '@core/server/live/auth/LiveAuthContext'
+
+interface DevUser {
+  id: string
+  name: string
+  roles: string[]
+  permissions: string[]
+}
+
+const DEV_USERS: Record<string, DevUser> = {
+  'admin-token': {
+    id: 'admin-1',
+    name: 'Admin User',
+    roles: ['admin', 'user'],
+    permissions: ['users.read', 'users.write', 'users.delete', 'chat.read', 'chat.write', 'chat.admin'],
+  },
+  'user-token': {
+    id: 'user-1',
+    name: 'Regular User',
+    roles: ['user'],
+    permissions: ['chat.read', 'chat.write'],
+  },
+  'mod-token': {
+    id: 'mod-1',
+    name: 'Moderator',
+    roles: ['moderator', 'user'],
+    permissions: ['chat.read', 'chat.write', 'chat.moderate'],
+  },
+}
+
+export class DevAuthProvider implements LiveAuthProvider {
+  readonly name = 'dev'
+
+  async authenticate(credentials: LiveAuthCredentials): Promise<LiveAuthContext | null> {
+    const token = credentials.token as string
+    if (!token) return null
+
+    const user = DEV_USERS[token]
+    if (!user) return null
+
+    return new AuthenticatedContext(
+      {
+        id: user.id,
+        name: user.name,
+        roles: user.roles,
+        permissions: user.permissions,
+      },
+      token
+    )
+  }
+}