@cosmos-sincoerp/auth

Capa de autenticación de Cosmos. Encapsula la integración con WorkOS AuthKit y expone:

• <CosmosProvider> — provider raíz (envuelve a AuthKitProvider)
• <AuthGuard> — bloquea el árbol hasta que la sesión está resuelta
• useSession() — hook con { user, tenant, getAccessToken, logout }
• useAttachHttpClient(client) — inyecta getAccessToken en tu cliente HTTP

Los sub-fronts no necesitan importar @workos-inc/authkit-react directamente.

Instalación

bun add @cosmos-sincoerp/auth
# o
pnpm add @cosmos-sincoerp/auth

Requiere como peer: react, react-dom, @mui/material, @emotion/react, @emotion/styled.

Configuración

1. Variables de entorno

Cada front debe definir su propio VITE_WORKOS_CLIENT_ID en su .env:

VITE_WORKOS_CLIENT_ID=client_01XXXXXXXXXXXXXXXXX

Y exponerlo en shared/config/env.ts:

export const WORKOS_CLIENT_ID =
  import.meta.env.VITE_WORKOS_CLIENT_ID ?? '';

2. Envolver el árbol con <CosmosProvider>

En src/main.tsx (antes del <QueryClientProvider>, <ThemeProvider>, etc.):

import { CosmosProvider } from '@cosmos-sincoerp/auth';
import { WORKOS_CLIENT_ID } from '@/shared/config';

const redirect = `${window.location.origin}${VITE_APP_BASE}`;

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <CosmosProvider clientId={WORKOS_CLIENT_ID} redirectUri={redirect}>
      {/* tu árbol */}
    </CosmosProvider>
  </StrictMode>,
);

3. Proteger las rutas con <AuthGuard>

En tu ProtectedRoute.tsx (o equivalente):

import { AuthGuard, useAttachHttpClient } from '@cosmos-sincoerp/auth';
import { httpClient } from '@/shared/api';

export const ProtectedRoute = () => {
  useAttachHttpClient(httpClient);

  return (
    <AuthGuard>
      {/* layout + outlet */}
    </AuthGuard>
  );
};

<AuthGuard> muestra un spinner mientras WorkOS resuelve la sesión y dispara signIn() si no hay usuario.

API

<CosmosProvider>

interface CosmosProviderProps {
  clientId: string;       // requerido — VITE_WORKOS_CLIENT_ID del front
  redirectUri?: string;   // URL de retorno tras login
  children: ReactNode;
}

<AuthGuard>

interface AuthGuardProps {
  children: ReactNode;
  fallback?: ReactNode;   // qué renderizar mientras carga (default: <CircularProgress />)
}

useSession()

function useSession(): {
  user: { id, name, email, avatarUrl? } | null;
  tenant: { id, name } | null;
  tenants: Tenant[];
  getAccessToken: () => Promise<string>;
  logout: () => void;
};

useAttachHttpClient(client)

interface ConfigurableHttpClient {
  configure: (opts: { getAccessToken: () => Promise<string> }) => void;
}

function useAttachHttpClient(client: ConfigurableHttpClient): void;

Llamar dentro del árbol de <CosmosProvider> para que tu httpClient reciba el getAccessToken automáticamente cuando WorkOS lo refresque.

Migración de WorkOS directo

Si hoy importas @workos-inc/authkit-react:

- import { AuthKitProvider, useAuth } from '@workos-inc/authkit-react';
+ import { CosmosProvider, useSession } from '@cosmos-sincoerp/auth';

useSession reemplaza a useAuth. Quita las deps @workos-inc/authkit-react y @workos-inc/widgets de tu package.json — @cosmos-sincoerp/auth las bundlea.

Notas

• WorkOS Logout Redirect: por defecto, logout() redirige a la URL configurada en el dashboard de WorkOS (Authentication → Redirects → Sign-out redirect URI). Configurar ahí la URL correcta para cada entorno.
• Single React copy: en vite.config.ts del consumidor agregar:

  optimizeDeps: { exclude: ['@cosmos-sincoerp/auth'] }

  para evitar que Vite pre-bundlee el paquete e inyecte una segunda copia de React.