@tgtone/auth-sdk 1.2.0 → 1.2.1

package/docs/SDK_INTEGRATION_RULES.md

@@ -1,433 +0,0 @@
-# 🔐 Reglas de Integración del SDK TGT Auth Client
-
-> **Para Lovable AI**: Este documento especifica EXACTAMENTE cómo integrar `tgtone-auth-client` en Console.
-
----
-
-## ❌ Lo que Lovable NO debe hacer
-
-### 1. NO crear sistema de "Mock Auth"
-```typescript
-// ❌ ELIMINAR ESTO:
-import { checkMockSession, mockLogout } from '@/services/mockAuth.service';
-const isMockMode = import.meta.env.VITE_AUTH_MODE === 'mock';
-```
-
-**Razón**: El SDK ya maneja todo. No necesitas simular autenticación.
-
-### 2. NO crear variables de entorno personalizadas
-```typescript
-// ❌ NO USAR:
-VITE_AUTH_MODE=mock
-VITE_IDENTITY_URL=...
-```
-
-**Razón**: Las URLs están hardcodeadas en el código según ambiente (dev/prod).
-
-### 3. NO inicializar el cliente múltiples veces
-```typescript
-// ❌ MAL - Crear cliente en cada componente
-function MyComponent() {
-  const auth = new TGTAuthClient({ ... });
-}
-
-// ✅ BIEN - Crear UNA VEZ en AuthContext
-let authClient: TGTAuthClient | null = null;
-const getAuthClient = () => {
-  if (!authClient) {
-    authClient = new TGTAuthClient({ ... });
-  }
-  return authClient;
-};
-```
-
-### 4. NO manejar redirecciones manualmente
-```typescript
-// ❌ MAL - Redirigir manualmente al login
-if (!user) {
-  navigate('/login');
-}
-
-// ✅ BIEN - El SDK redirige automáticamente
-if (!user) {
-  return null; // SDK ya está redirigiendo
-}
-```
-
-### 5. NO crear páginas de login
-```typescript
-// ❌ ELIMINAR:
-<Route path="/login" element={<Login />} />
-<Route path="/auth" element={<Auth />} />
-```
-
-**Razón**: El login está en `identity.tgtone.cl`, no en Console.
-
----
-
-## ✅ Implementación Correcta
-
-### 1. AuthContext.tsx (Mínimo Necesario)
-
-```typescript
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-import { TGTAuthClient, TGTUser } from 'tgtone-auth-client';
-
-interface AuthContextType {
-  user: TGTUser | null;
-  loading: boolean;
-  logout: () => Promise<void>;
-  hasRole: (appName: string, roleName: string) => boolean;
-  hasAccessToApp: (appName: string) => boolean;
-  getRoles: (appName: string) => string[];
-}
-
-const AuthContext = createContext<AuthContextType | null>(null);
-
-// Singleton del cliente
-let authClient: TGTAuthClient | null = null;
-
-const getAuthClient = (): TGTAuthClient => {
-  if (!authClient) {
-    authClient = new TGTAuthClient({
-      // ✅ URL unificada con reverse proxy
-      identityUrl: 'https://identity.tgtone.cl',
-      appDomain: window.location.hostname,
-      debug: import.meta.env.DEV
-    });
-  }
-  return authClient;
-};
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<TGTUser | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const initAuth = async () => {
-      try {
-        const auth = getAuthClient();
-        const currentUser = await auth.checkSession();
-        setUser(currentUser);
-      } catch (error) {
-        console.error('Error checking session:', error);
-        setUser(null);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    initAuth();
-  }, []);
-
-  const logout = async () => {
-    const auth = getAuthClient();
-    await auth.logout();
-    setUser(null);
-  };
-
-  const hasRole = (appName: string, roleName: string) => {
-    const auth = getAuthClient();
-    return auth.hasRole(appName, roleName);
-  };
-
-  const hasAccessToApp = (appName: string) => {
-    const auth = getAuthClient();
-    return auth.hasAccessToApp(appName);
-  };
-
-  const getRoles = (appName: string) => {
-    const auth = getAuthClient();
-    return auth.getRoles(appName);
-  };
-
-  return (
-    <AuthContext.Provider value={{ 
-      user, 
-      loading, 
-      logout, 
-      hasRole, 
-      hasAccessToApp, 
-      getRoles 
-    }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth debe usarse dentro de AuthProvider');
-  }
-  return context;
-}
-```
-
-### 2. ProtectedRoute.tsx (Ya está bien implementado)
-
-```typescript
-import { ReactNode } from 'react';
-import { useAuth } from '@/contexts/AuthContext';
-import { Card, CardContent } from '@/components/ui/card';
-
-interface ProtectedRouteProps {
-  children: ReactNode;
-  requiredApp?: string;
-  requiredRole?: string;
-}
-
-export function ProtectedRoute({ 
-  children, 
-  requiredApp, 
-  requiredRole 
-}: ProtectedRouteProps) {
-  const { user, loading, hasRole, hasAccessToApp } = useAuth();
-
-  // Mostrar loading mientras verifica sesión
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="w-full max-w-md">
-          <CardContent className="pt-6">
-            <div className="flex flex-col items-center space-y-4">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
-              <p className="text-muted-foreground">Verificando autenticación...</p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  // Si no hay usuario, el SDK ya está redirigiendo a Identity
-  if (!user) {
-    return null;
-  }
-
-  // Verificar acceso a la app
-  if (requiredApp && !hasAccessToApp(requiredApp)) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="w-full max-w-md">
-          <CardContent className="pt-6">
-            <h2 className="text-xl font-semibold text-destructive">
-              Acceso Denegado
-            </h2>
-            <p className="text-muted-foreground">
-              No tienes permisos para acceder a esta aplicación.
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  // Verificar rol específico
-  if (requiredApp && requiredRole && !hasRole(requiredApp, requiredRole)) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="w-full max-w-md">
-          <CardContent className="pt-6">
-            <h2 className="text-xl font-semibold text-destructive">
-              Permisos Insuficientes
-            </h2>
-            <p className="text-muted-foreground">
-              No tienes el rol necesario para acceder a esta página.
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  return <>{children}</>;
-}
-```
-
-### 3. App.tsx (Sin rutas de login)
-
-```typescript
-import { AuthProvider } from "./contexts/AuthContext";
-import { ProtectedRoute } from "./components/ProtectedRoute";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-
-const App = () => (
-  <BrowserRouter>
-    <AuthProvider>
-      <Routes>
-        {/* Todas las rutas protegidas */}
-        <Route 
-          path="/dashboard" 
-          element={
-            <ProtectedRoute requiredApp="console">
-              <Dashboard />
-            </ProtectedRoute>
-          } 
-        />
-        
-        <Route 
-          path="/dashboard/users" 
-          element={
-            <ProtectedRoute requiredApp="console" requiredRole="admin">
-              <Users />
-            </ProtectedRoute>
-          } 
-        />
-        
-        {/* Más rutas... */}
-      </Routes>
-    </AuthProvider>
-  </BrowserRouter>
-);
-```
-
----
-
-## 🔄 Flujo de Autenticación (Lo que hace el SDK)
-
-```
-1. Usuario entra a console.tgtone.cl
-   ↓
-2. AuthContext se monta → ejecuta auth.checkSession()
-   ↓
-3. SDK busca token en URL (?token=...) o localStorage
-   ↓
-4. Si NO hay token → SDK redirige a identity.tgtone.cl/login?redirect=console.tgtone.cl
-   ↓
-5. Usuario hace login en Identity
-   ↓
-6. Identity redirige a console.tgtone.cl?token=eyJhbGci...
-   ↓
-7. SDK lee token de URL → lo guarda en localStorage
-   ↓
-8. SDK valida token con backend (GET /api/v1/auth/me)
-   ↓
-9. Si válido → setUser(userData) → App se renderiza
-   ↓
-10. Si inválido → SDK redirige a login nuevamente
-```
-
-**Lovable NO debe intervenir en este flujo. Todo lo maneja el SDK.**
-
----
-
-## 🧪 Testing Local (Sin Login)
-
-Para desarrollo rápido sin pasar por el flujo completo:
-
-```typescript
-// En consola del browser o en código temporal
-const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Token de curl
-localStorage.setItem('tgtone_auth_token', testToken);
-window.location.reload();
-```
-
-**Obtener token de prueba:**
-```bash
-curl -X POST https://tgtone-identity-backend-1086175589490.us-central1.run.app/api/v1/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{"email": "console@tgtone.cl", "password": "Tgt123."}'
-```
-
----
-
-## 📦 Dependencias Necesarias
-
-```json
-{
-  "dependencies": {
-    "tgtone-auth-client": "^1.0.2"
-  }
-}
-```
-
-**NO se necesita:**
-- `@supabase/supabase-js`
-- Ningún otro cliente de auth
-
----
-
-## 🎯 Verificación de Roles
-
-```typescript
-// En cualquier componente
-import { useAuth } from '@/contexts/AuthContext';
-
-function MyComponent() {
-  const { user, hasRole, getRoles } = useAuth();
-  
-  // Verificar rol específico
-  if (hasRole('console', 'admin')) {
-    return <AdminPanel />;
-  }
-  
-  // Obtener todos los roles
-  const roles = getRoles('console'); // ['owner', 'admin']
-  
-  // Acceder a datos del usuario
-  console.log(user.email);           // console@tgtone.cl
-  console.log(user.tenant_name);     // Console Only Tenant
-  console.log(user.roles);           // { console: ['owner', 'admin'] }
-}
-```
-
----
-
-## 🚨 Errores Comunes
-
-### Error: "Failed to fetch"
-**Causa**: CORS o backend offline  
-**Solución**: Verificar que backend esté corriendo y CORS permita tu origen
-
-### Error: "No se puede leer token"
-**Causa**: localStorage bloqueado o sesión expirada  
-**Solución**: Limpiar localStorage y volver a hacer login
-
-### Error: "Bucle infinito de redirecciones"
-**Causa**: Token inválido guardado en localStorage  
-**Solución**: 
-```typescript
-localStorage.removeItem('tgtone_auth_token');
-```
-
----
-
-## 📚 Estructura de Archivos
-
-```
-src/
-├── contexts/
-│   └── AuthContext.tsx          ✅ Solo este archivo
-├── components/
-│   └── ProtectedRoute.tsx       ✅ Ya implementado
-└── App.tsx                      ✅ Wrapper con AuthProvider
-
-❌ NO crear:
-├── services/
-│   └── mockAuth.service.ts      ❌ Eliminar
-├── pages/
-│   ├── Login.tsx                ❌ Eliminar
-│   └── Auth.tsx                 ❌ Eliminar
-```
-
----
-
-## 🎯 Resumen para Lovable
-
-**Cuando Lovable necesite implementar autenticación:**
-
-1. ✅ Instalar: `npm install tgtone-auth-client`
-2. ✅ Copiar `AuthContext.tsx` de este documento (sin cambios)
-3. ✅ Usar `ProtectedRoute` para rutas privadas
-4. ✅ Usar `useAuth()` hook en componentes
-5. ❌ NO crear sistema mock
-6. ❌ NO crear páginas de login
-7. ❌ NO agregar variables de entorno personalizadas
-8. ❌ NO manejar tokens manualmente
-
-**El SDK hace TODO el trabajo de autenticación.**
-
----
-
-**Última actualización:** 2025-10-17

package/docs/tgtone-identity-auth.code-workspace

@@ -1,11 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "../.."
-		},
-		{
-			"path": "../../../tgtone-console"
-		}
-	],
-	"settings": {}
-}