@tgtone/auth-sdk 1.0.0

package/docs/SDK_FINAL_STATUS.md

@@ -0,0 +1,88 @@
+# ✅ SDK Organizado - Resumen Final
+
+## 📁 Estructura Actual
+
+```
+sdk/
+├── README.md                   # ✅ Guía principal (simplificado, 70 líneas)
+├── package.json                # ✅ Actualizado (v1.0.2, incluye docs/)
+├── tsconfig.json
+├── index.ts                    # Entry point
+├── tgtone-auth-client.ts       # ✅ SDK (limpio, sin cookies)
+├── react-hook.tsx              # Hook React
+├── .npmignore
+├── dist/                       # Archivos compilados
+└── docs/
+    ├── README.md               # ✅ Índice de documentación
+    ├── LOVABLE_QUICK_START.md  # ✅ Guía para Lovable
+    ├── INTEGRATION_EXAMPLES.md # Ejemplos otros frameworks
+    ├── CHANGELOG.md            # Historial versiones
+    ├── ORGANIZATION_SUMMARY.md # Este resumen
+    └── README_OLD.md           # Archivo (referencia)
+```
+
+---
+
+## ✅ Cambios Completados
+
+### 1. Código SDK
+- ✅ Eliminado `credentials: 'include'` (ya no usamos cookies)
+- ✅ Solo Bearer Token en Authorization header
+- ✅ localStorage para guardar tokens
+
+### 2. Documentación
+- ✅ README.md simplificado (70 líneas vs 391)
+- ✅ Creada carpeta `docs/` con toda la doc organizada
+- ✅ `LOVABLE_QUICK_START.md` - Guía específica para Lovable
+- ✅ `docs/README.md` - Índice completo
+- ✅ README antiguo archivado como referencia
+
+### 3. Package.json
+- ✅ Versión actualizada: `1.0.1` → `1.0.2`
+- ✅ Descripción actualizada: "JWT + Bearer Token"
+- ✅ Files incluye carpeta `docs/`
+
+---
+
+## 📖 Guía de Uso
+
+### Para desarrollar en Lovable
+1. Leer: `docs/LOVABLE_QUICK_START.md`
+2. Copiar: `tgtone-auth-client.ts` a tu proyecto
+3. Usar código de ejemplo
+
+### Para instalar vía NPM
+```bash
+npm install tgtone-auth-client
+```
+
+Ver: `README.md`
+
+### Para otros frameworks
+Ver: `docs/INTEGRATION_EXAMPLES.md`
+
+---
+
+## 🎯 Documentación por Necesidad
+
+| Necesitas... | Archivo |
+|--------------|---------|
+| Setup rápido | `README.md` |
+| Lovable/React | `docs/LOVABLE_QUICK_START.md` |
+| Vue/Next/Angular | `docs/INTEGRATION_EXAMPLES.md` |
+| API completa | `README.md` + `docs/README_OLD.md` |
+| Ver cambios | `docs/CHANGELOG.md` |
+
+---
+
+## 🚀 Listo para Usar
+
+El SDK está completamente organizado y listo para:
+- ✅ Copiar archivo directamente a Lovable
+- ✅ Instalar vía NPM (si está publicado)
+- ✅ Integrar en cualquier framework
+- ✅ Testing con tokens manuales
+
+---
+
+**Última actualización:** 2025-10-16

package/docs/SDK_INTEGRATION_RULES.md

@@ -0,0 +1,433 @@
+# 🔐 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

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

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@tgtone/auth-sdk",
+  "version": "1.0.0",
+  "description": "SDK de autenticación JWT + Bearer Token para el ecosistema TGT One",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "sso",
+    "authentication",
+    "tgtone",
+    "jwt",
+    "oauth",
+    "identity"
+  ],
+  "author": "TGT Technology",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tgt-technology/tgtone-console.git",
+    "directory": "packages/auth-sdk"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "dependencies": {
+    "jwt-decode": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "typescript": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
+}