@tgtone/auth-sdk 1.0.0

package/docs/INTEGRATION_EXAMPLES.md

@@ -0,0 +1,536 @@
+# 🔧 Ejemplos de Integración por Framework
+
+Guía paso a paso para integrar TGT One Auth en diferentes frameworks.
+
+---
+
+## 📘 React (Vite)
+
+### **1. Copiar archivos**
+
+```bash
+# En tu proyecto React
+mkdir -p src/lib/auth
+cp tgtone-auth-client.ts src/lib/auth/
+cp react-hook.tsx src/lib/auth/
+```
+
+### **2. Crear contexto de autenticación**
+
+```tsx
+// src/contexts/AuthContext.tsx
+import { createContext, useContext } from 'react';
+import { useTGTAuth, UseTGTAuthResult } from '@/lib/auth/react-hook';
+
+const AuthContext = createContext<UseTGTAuthResult | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const auth = useTGTAuth({
+    identityUrl: 'https://identity.tgtone.cl',
+    appDomain: 'zenith.tgtone.cl', // Cambiar según tu app
+    debug: import.meta.env.DEV
+  });
+
+  return (
+    <AuthContext.Provider value={auth}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth debe usarse dentro de AuthProvider');
+  }
+  return context;
+};
+```
+
+### **3. Envolver tu app**
+
+```tsx
+// src/main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { AuthProvider } from './contexts/AuthContext';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AuthProvider>
+      <App />
+    </AuthProvider>
+  </StrictMode>,
+);
+```
+
+### **4. Usar en componentes**
+
+```tsx
+// src/App.tsx
+import { useAuth } from './contexts/AuthContext';
+
+function App() {
+  const { user, loading, logout, hasRole } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    // Ya está redirigiendo al login
+    return null;
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <nav className="flex justify-between items-center mb-8">
+        <h1 className="text-2xl font-bold">Zenith CRM</h1>
+        <div className="flex items-center gap-4">
+          <span>{user.name}</span>
+          <span className="text-sm text-gray-600">{user.tenant_name}</span>
+          <button 
+            onClick={logout}
+            className="px-4 py-2 bg-red-500 text-white rounded"
+          >
+            Cerrar sesión
+          </button>
+        </div>
+      </nav>
+
+      {hasRole('zenith', 'admin') && (
+        <div className="bg-yellow-100 p-4 rounded mb-4">
+          <h2>Panel de Administración</h2>
+        </div>
+      )}
+
+      <main>
+        {/* Tu contenido aquí */}
+      </main>
+    </div>
+  );
+}
+
+export default App;
+```
+
+---
+
+## 📗 Vue 3 (Vite)
+
+### **1. Copiar archivo**
+
+```bash
+mkdir -p src/lib/auth
+cp tgtone-auth-client.ts src/lib/auth/
+```
+
+### **2. Crear composable**
+
+```typescript
+// src/composables/useAuth.ts
+import { ref, onMounted } from 'vue';
+import { TGTAuthClient, type TGTUser } from '@/lib/auth/tgtone-auth-client';
+
+const authClient = new TGTAuthClient({
+  identityUrl: 'https://identity.tgtone.cl',
+  appDomain: 'baco.tgtone.cl', // Cambiar según tu app
+  debug: import.meta.env.DEV
+});
+
+const user = ref<TGTUser | null>(null);
+const loading = ref(true);
+
+export function useAuth() {
+  onMounted(async () => {
+    user.value = await authClient.checkSession();
+    loading.value = false;
+  });
+
+  const logout = async () => {
+    await authClient.logout();
+    user.value = null;
+  };
+
+  const hasRole = (appName: string, roleName: string) => {
+    return authClient.hasRole(appName, roleName);
+  };
+
+  return {
+    user,
+    loading,
+    logout,
+    hasRole,
+    authClient
+  };
+}
+```
+
+### **3. Usar en App.vue**
+
+```vue
+<!-- src/App.vue -->
+<template>
+  <div v-if="loading" class="loading">
+    <div class="spinner"></div>
+  </div>
+  
+  <div v-else-if="user" class="app">
+    <nav class="navbar">
+      <h1>Baco Wine Management</h1>
+      <div class="user-info">
+        <span>{{ user.name }}</span>
+        <span class="tenant">{{ user.tenant_name }}</span>
+        <button @click="logout" class="logout-btn">
+          Cerrar sesión
+        </button>
+      </div>
+    </nav>
+
+    <div v-if="hasRole('baco', 'admin')" class="admin-panel">
+      Panel de Administración
+    </div>
+
+    <main>
+      <!-- Tu contenido aquí -->
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuth } from './composables/useAuth';
+
+const { user, loading, logout, hasRole } = useAuth();
+</script>
+
+<style scoped>
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
+```
+
+---
+
+## 📙 Next.js 14 (App Router)
+
+### **1. Copiar archivo**
+
+```bash
+mkdir -p lib/auth
+cp tgtone-auth-client.ts lib/auth/
+```
+
+### **2. Crear Provider**
+
+```tsx
+// app/providers/auth-provider.tsx
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { TGTAuthClient, type TGTUser } from '@/lib/auth/tgtone-auth-client';
+
+interface AuthContextType {
+  user: TGTUser | null;
+  loading: boolean;
+  logout: () => Promise<void>;
+  hasRole: (appName: string, roleName: string) => boolean;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<TGTUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  
+  const authClient = new TGTAuthClient({
+    identityUrl: 'https://identity.tgtone.cl',
+    appDomain: 'console.tgtone.cl', // Cambiar según tu app
+    debug: process.env.NODE_ENV === 'development'
+  });
+
+  useEffect(() => {
+    async function checkAuth() {
+      const authenticatedUser = await authClient.checkSession();
+      setUser(authenticatedUser);
+      setLoading(false);
+    }
+    checkAuth();
+  }, []);
+
+  const logout = async () => {
+    await authClient.logout();
+    setUser(null);
+  };
+
+  const hasRole = (appName: string, roleName: string) => {
+    return authClient.hasRole(appName, roleName);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, loading, logout, hasRole }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth debe usarse dentro de AuthProvider');
+  }
+  return context;
+};
+```
+
+### **3. Envolver en layout**
+
+```tsx
+// app/layout.tsx
+import { AuthProvider } from './providers/auth-provider';
+import './globals.css';
+
+export const metadata = {
+  title: 'TGT One Console',
+  description: 'Console de administración TGT One',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="es">
+      <body>
+        <AuthProvider>
+          {children}
+        </AuthProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+### **4. Usar en páginas**
+
+```tsx
+// app/page.tsx
+'use client';
+
+import { useAuth } from './providers/auth-provider';
+
+export default function HomePage() {
+  const { user, loading, logout, hasRole } = useAuth();
+
+  if (loading) {
+    return <div className="flex h-screen items-center justify-center">
+      <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
+    </div>;
+  }
+
+  if (!user) {
+    return null; // Redirigiendo
+  }
+
+  return (
+    <div className="container mx-auto p-8">
+      <nav className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold">TGT One Console</h1>
+        <div className="flex items-center gap-4">
+          <div className="text-right">
+            <p className="font-medium">{user.name}</p>
+            <p className="text-sm text-gray-600">{user.tenant_name}</p>
+          </div>
+          <button 
+            onClick={logout}
+            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          >
+            Cerrar sesión
+          </button>
+        </div>
+      </nav>
+
+      {hasRole('console', 'owner') && (
+        <div className="bg-blue-100 p-4 rounded mb-6">
+          <h2 className="font-bold">Configuración de Owner</h2>
+        </div>
+      )}
+
+      <main>
+        {/* Tu contenido */}
+      </main>
+    </div>
+  );
+}
+```
+
+---
+
+## 📕 Angular 17+
+
+### **1. Copiar archivo**
+
+```bash
+mkdir -p src/app/services/auth
+cp tgtone-auth-client.ts src/app/services/auth/
+```
+
+### **2. Crear servicio**
+
+```typescript
+// src/app/services/auth/auth.service.ts
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { TGTAuthClient, TGTUser } from './tgtone-auth-client';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private authClient: TGTAuthClient;
+  private userSubject = new BehaviorSubject<TGTUser | null>(null);
+  private loadingSubject = new BehaviorSubject<boolean>(true);
+
+  public user$: Observable<TGTUser | null> = this.userSubject.asObservable();
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+  constructor() {
+    this.authClient = new TGTAuthClient({
+      identityUrl: 'https://identity.tgtone.cl',
+      appDomain: 'zenith.tgtone.cl', // Cambiar según tu app
+      debug: !environment.production
+    });
+
+    this.checkSession();
+  }
+
+  private async checkSession() {
+    try {
+      const user = await this.authClient.checkSession();
+      this.userSubject.next(user);
+    } catch (error) {
+      console.error('Error checking session:', error);
+      this.userSubject.next(null);
+    } finally {
+      this.loadingSubject.next(false);
+    }
+  }
+
+  async logout() {
+    await this.authClient.logout();
+    this.userSubject.next(null);
+  }
+
+  hasRole(appName: string, roleName: string): boolean {
+    return this.authClient.hasRole(appName, roleName);
+  }
+
+  get currentUser(): TGTUser | null {
+    return this.userSubject.value;
+  }
+}
+```
+
+### **3. Usar en componentes**
+
+```typescript
+// src/app/app.component.ts
+import { Component } from '@angular/core';
+import { AuthService } from './services/auth/auth.service';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div *ngIf="authService.loading$ | async" class="loading">
+      <div class="spinner"></div>
+    </div>
+
+    <div *ngIf="(authService.user$ | async) as user" class="app">
+      <nav class="navbar">
+        <h1>Zenith CRM</h1>
+        <div class="user-info">
+          <span>{{ user.name }}</span>
+          <span class="tenant">{{ user.tenant_name }}</span>
+          <button (click)="logout()" class="logout-btn">
+            Cerrar sesión
+          </button>
+        </div>
+      </nav>
+
+      <div *ngIf="authService.hasRole('zenith', 'admin')" class="admin-panel">
+        Panel de Administración
+      </div>
+
+      <router-outlet></router-outlet>
+    </div>
+  `,
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  constructor(public authService: AuthService) {}
+
+  logout() {
+    this.authService.logout();
+  }
+}
+```
+
+---
+
+## 🔑 Variables de Entorno por App
+
+### **Zenith (CRM)**
+```env
+VITE_APP_DOMAIN=zenith.tgtone.cl
+VITE_IDENTITY_URL=https://identity.tgtone.cl
+```
+
+### **Baco (Wine Management)**
+```env
+VITE_APP_DOMAIN=baco.tgtone.cl
+VITE_IDENTITY_URL=https://identity.tgtone.cl
+```
+
+### **Console (Admin)**
+```env
+VITE_APP_DOMAIN=console.tgtone.cl
+VITE_IDENTITY_URL=https://identity.tgtone.cl
+```
+
+---
+
+## ✅ Checklist de Integración
+
+- [ ] Copiar `tgtone-auth-client.ts` al proyecto
+- [ ] Configurar variables de entorno
+- [ ] Crear wrapper/provider según framework
+- [ ] Implementar UI de loading
+- [ ] Implementar botón de logout
+- [ ] Probar flujo de login/logout
+- [ ] Probar SSO entre apps
+- [ ] Verificar roles y permisos
+- [ ] Manejar estados de error
+- [ ] Documentar para el equipo