@nocios/crudify-ui 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocios/crudify-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Biblioteca de componentes UI para Crudify",
   "author": "Nocios",
   "license": "MIT",

package/MIGRATION-GUIDE.md

@@ -1,312 +0,0 @@
-# Migration Guide: Refresh Token Pattern Implementation
-
-## Overview
-
-This guide helps you migrate from the standard JWT authentication to the new **Refresh Token Pattern** implementation in CRUDIFY v1.2.0+.
-
-The Refresh Token Pattern addresses security vulnerabilities by:
-- Using short-lived access tokens (15 minutes)
-- Implementing long-lived refresh tokens (7 days)
-- Automatic token refresh before expiration
-- Secure token storage with encryption
-- Session restoration on page reload
-
-## Prerequisites
-
-Ensure you have the following versions installed:
-- `@nocios/crudify-core` v1.2.0+
-- `@nocios/crudify-ui` v1.2.0+
-
-```bash
-npm update @nocios/crudify-core @nocios/crudify-ui
-```
-
-## Migration Steps
-
-### 1. Update Your Backend (if applicable)
-
-If you're using the CRUDIFY backend, ensure you've deployed the refresh token endpoints. The new login response now includes:
-
-```typescript
-{
-  token: string,           // Access token (short-lived)
-  refreshToken: string,    // Refresh token (long-lived)
-  expiresIn: number,       // Access token expiration
-  refreshExpiresIn: number // Refresh token expiration
-}
-```
-
-### 2. Replace SessionProvider Implementation
-
-**BEFORE (Old implementation):**
-```tsx
-import { CrudifyDataProvider } from '@nocios/crudify-ui';
-
-function App() {
-  return (
-    <CrudifyDataProvider>
-      <YourApp />
-    </CrudifyDataProvider>
-  );
-}
-```
-
-**AFTER (New Refresh Token Pattern):**
-```tsx
-import { SessionProvider } from '@nocios/crudify-ui';
-
-function App() {
-  return (
-    <SessionProvider
-      options={{
-        autoRestore: true,          // Restore session on page reload
-        enableLogging: true,        // Enable debug logs
-        onSessionExpired: () => {   // Handle session expiration
-          console.log('Session expired');
-          // Redirect to login or show modal
-        },
-        onSessionRestored: (tokens) => {
-          console.log('Session restored:', tokens);
-        }
-      }}
-    >
-      <YourApp />
-    </SessionProvider>
-  );
-}
-```
-
-### 3. Update Authentication Logic
-
-**BEFORE (Manual login handling):**
-```tsx
-import { useCrudifyLogin } from '@nocios/crudify-ui';
-
-function LoginForm() {
-  const { login, isLoading } = useCrudifyLogin();
-
-  const handleLogin = async () => {
-    const result = await login(email, password);
-    // Manual token handling
-  };
-}
-```
-
-**AFTER (Automatic session management):**
-```tsx
-import { useSessionContext } from '@nocios/crudify-ui';
-
-function LoginForm() {
-  const { login, isLoading, isAuthenticated, logout } = useSessionContext();
-
-  const handleLogin = async () => {
-    const result = await login(email, password);
-    // Session is managed automatically
-    if (result.success) {
-      // User is now authenticated
-    }
-  };
-}
-```
-
-### 4. Replace Authentication Checks
-
-**BEFORE (Manual token checking):**
-```tsx
-import { getCurrentUserEmail, isTokenExpired } from '@nocios/crudify-ui';
-
-function ProtectedComponent() {
-  const userEmail = getCurrentUserEmail();
-  const tokenExpired = isTokenExpired();
-
-  if (!userEmail || tokenExpired) {
-    return <LoginRequired />;
-  }
-
-  return <ProtectedContent />;
-}
-```
-
-**AFTER (Using ProtectedRoute):**
-```tsx
-import { ProtectedRoute } from '@nocios/crudify-ui';
-
-function ProtectedComponent() {
-  return (
-    <ProtectedRoute fallback={<LoginRequired />}>
-      <ProtectedContent />
-    </ProtectedRoute>
-  );
-}
-```
-
-### 5. Update API Calls
-
-The good news is that your existing CRUDIFY API calls **don't need to change**! The automatic refresh mechanism is built into the core library:
-
-```tsx
-import { crudify } from '@nocios/crudify-ui';
-
-// This automatically handles token refresh if needed
-const result = await crudify.getPermissions();
-```
-
-## New Features Available
-
-### 1. Session Status Component
-
-Display authentication status anywhere in your app:
-
-```tsx
-import { SessionStatus } from '@nocios/crudify-ui';
-
-function AppHeader() {
-  return (
-    <AppBar>
-      <Toolbar>
-        <Typography variant="h6">My App</Typography>
-        <SessionStatus />  {/* Shows auth status */}
-      </Toolbar>
-    </AppBar>
-  );
-}
-```
-
-### 2. Login Component (Optional)
-
-Ready-to-use login component with Material-UI:
-
-```tsx
-import { LoginComponent } from '@nocios/crudify-ui';
-
-function LoginPage() {
-  return <LoginComponent />;
-}
-```
-
-### 3. Session Debug Info
-
-For development, show detailed session information:
-
-```tsx
-import { SessionDebugInfo } from '@nocios/crudify-ui';
-
-function App() {
-  return (
-    <div>
-      <YourApp />
-      {process.env.NODE_ENV === 'development' && (
-        <SessionDebugInfo />
-      )}
-    </div>
-  );
-}
-```
-
-### 4. Session Context Hook
-
-Access session state from any component:
-
-```tsx
-import { useSessionContext } from '@nocios/crudify-ui';
-
-function MyComponent() {
-  const {
-    isAuthenticated,
-    isLoading,
-    tokens,
-    error,
-    login,
-    logout,
-    refreshTokens,
-    isExpiringSoon,
-    expiresIn
-  } = useSessionContext();
-
-  return (
-    <div>
-      {isExpiringSoon && (
-        <Alert>Token expires in {Math.round(expiresIn / 60000)} minutes</Alert>
-      )}
-    </div>
-  );
-}
-```
-
-## Migration Checklist
-
-- [ ] Update package versions to v1.2.0+
-- [ ] Replace `CrudifyDataProvider` with `SessionProvider`
-- [ ] Update login logic to use `useSessionContext`
-- [ ] Replace manual auth checks with `ProtectedRoute`
-- [ ] Test automatic token refresh functionality
-- [ ] Test session restoration on page reload
-- [ ] Update logout logic to use session context
-- [ ] Remove manual token management code
-- [ ] Test error handling for expired refresh tokens
-- [ ] Add session debug info for development
-
-## Troubleshooting
-
-### Issue: "useSessionContext must be used within a SessionProvider"
-**Solution:** Ensure your entire app is wrapped with `SessionProvider`
-
-### Issue: Session not restoring on page reload
-**Solution:** Check that `autoRestore: true` is set in SessionProvider options
-
-### Issue: Automatic refresh not working
-**Solution:** Verify that your backend returns refresh tokens in the login response
-
-### Issue: Tokens not persisting between sessions
-**Solution:** Check browser storage permissions and ensure localStorage is enabled
-
-## Example Complete Implementation
-
-```tsx
-// App.tsx
-import React from 'react';
-import { SessionProvider, ProtectedRoute } from '@nocios/crudify-ui';
-import { LoginPage } from './pages/LoginPage';
-import { Dashboard } from './pages/Dashboard';
-
-function App() {
-  return (
-    <SessionProvider
-      options={{
-        autoRestore: true,
-        enableLogging: process.env.NODE_ENV === 'development',
-        onSessionExpired: () => {
-          console.log('Session expired - redirecting to login');
-        }
-      }}
-    >
-      <AppContent />
-    </SessionProvider>
-  );
-}
-
-function AppContent() {
-  return (
-    <div>
-      <LoginPage />
-
-      <ProtectedRoute fallback={null}>
-        <Dashboard />
-      </ProtectedRoute>
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Need Help?
-
-If you encounter issues during migration:
-
-1. Check the browser console for detailed error messages
-2. Enable logging with `enableLogging: true` in SessionProvider
-3. Use `<SessionDebugInfo />` to inspect session state
-4. Verify your backend is returning refresh tokens properly
-
-The new Refresh Token Pattern provides enhanced security and better user experience with automatic session management.

package/MIGRATION.md

@@ -1,201 +0,0 @@
-# Guía de Migración - useCrudifyUser v1.2.25+
-
-## Cambios Importantes
-
-A partir de la versión 1.2.25, el hook `useCrudifyUser` ha sido completamente reestructurado para ser más simple y claro.
-
-## Antes (❌ Estructura Anterior)
-
-```typescript
-const {
-  userEmail,
-  userId,
-  userIdentifier,
-  userProfile,
-  profileLoading,
-  profileError,
-  extendedData,
-  refreshProfile,
-  clearProfile
-} = useCrudifyUser();
-
-// Acceso a datos
-console.log(extendedData.fullProfile);
-console.log(extendedData.displayData);
-console.log(extendedData.totalFields);
-```
-
-## Ahora (✅ Nueva Estructura)
-
-```typescript
-const {
-  user,
-  loading,
-  error,
-  refreshProfile,
-  clearProfile
-} = useCrudifyUser();
-
-// Acceso a datos
-console.log(user.session); // Datos del JWT token
-console.log(user.data);    // Datos de la base de datos
-```
-
-## Estructura del objeto `user`
-
-```typescript
-interface CrudifyUserData {
-  session: JWTPayload | null;  // Datos del token JWT
-  data: UserProfile | null;    // Datos de la base de datos
-}
-```
-
-### `user.session` (Datos del JWT)
-- `user.session.sub` - User ID
-- `user.session.email` - Email del usuario
-- `user.session.name` - Nombre del usuario
-- `user.session.exp` - Timestamp de expiración
-- `user.session.iat` - Timestamp de emisión
-- Y todos los demás campos del JWT token
-
-### `user.data` (Datos de la Base de Datos)
-- `user.data.id` - ID del perfil en la BD
-- `user.data.email` - Email del perfil
-- `user.data.firstName` - Nombre
-- `user.data.lastName` - Apellido
-- `user.data.role` - Rol del usuario
-- Y todos los demás campos del perfil de usuario
-
-## Migraciones Necesarias
-
-### 1. Cambiar las destructuraciones
-```typescript
-// ❌ Antes
-const { userProfile, profileLoading, profileError } = useCrudifyUser();
-
-// ✅ Ahora
-const { user, loading, error } = useCrudifyUser();
-```
-
-### 2. Actualizar acceso a datos de sesión
-```typescript
-// ❌ Antes
-const email = userEmail;
-const userId = userId;
-
-// ✅ Ahora
-const email = user.session?.email;
-const userId = user.session?.sub;
-```
-
-### 3. Actualizar acceso a datos de perfil
-```typescript
-// ❌ Antes
-const profileData = userProfile;
-const fullName = extendedData.displayData.fullName;
-
-// ✅ Ahora
-const profileData = user.data;
-const fullName = user.data?.fullName;
-```
-
-### 4. Actualizar estados de carga y error
-```typescript
-// ❌ Antes
-if (profileLoading) return <Loading />;
-if (profileError) return <Error message={profileError} />;
-
-// ✅ Ahora
-if (loading) return <Loading />;
-if (error) return <Error message={error} />;
-```
-
-## Beneficios de la Nueva Estructura
-
-1. **Más Simple**: Solo un objeto `user` con `session` y `data`
-2. **Más Claro**: Es obvio qué viene del JWT (`session`) y qué de la DB (`data`)
-3. **Sin Duplicación**: La información no se repite en múltiples lugares
-4. **Mejor TypeScript**: Tipos más precisos y claros
-5. **Más Fácil de Usar**: Los desarrolladores entienden inmediatamente la estructura
-
-## Ejemplo Completo de Migración
-
-### Antes
-```tsx
-function UserProfile() {
-  const {
-    userEmail,
-    userProfile,
-    profileLoading,
-    profileError,
-    extendedData,
-    refreshProfile
-  } = useCrudifyUser();
-
-  if (profileLoading) return <div>Cargando...</div>;
-  if (profileError) return <div>Error: {profileError}</div>;
-
-  return (
-    <div>
-      <h1>Welcome {userProfile?.fullName || userEmail}</h1>
-      <p>Total fields: {extendedData.totalFields}</p>
-      <pre>{JSON.stringify(extendedData.displayData, null, 2)}</pre>
-      <button onClick={refreshProfile}>Refresh</button>
-    </div>
-  );
-}
-```
-
-### Después
-```tsx
-function UserProfile() {
-  const {
-    user,
-    loading,
-    error,
-    refreshProfile
-  } = useCrudifyUser();
-
-  if (loading) return <div>Cargando...</div>;
-  if (error) return <div>Error: {error}</div>;
-
-  return (
-    <div>
-      <h1>Welcome {user.data?.fullName || user.session?.email}</h1>
-      <h2>Datos de Sesión:</h2>
-      <pre>{JSON.stringify(user.session, null, 2)}</pre>
-      <h2>Datos de Perfil:</h2>
-      <pre>{JSON.stringify(user.data, null, 2)}</pre>
-      <button onClick={refreshProfile}>Refresh</button>
-    </div>
-  );
-}
-```
-
-## Retrocompatibilidad
-
-Para mantener compatibilidad temporal, puedes crear un wrapper:
-
-```typescript
-// wrapper temporal para compatibilidad
-export const useLegacyUserProfile = () => {
-  const { user, loading, error, refreshProfile, clearProfile } = useCrudifyUser();
-
-  return {
-    userEmail: user.session?.email || null,
-    userId: user.session?.sub || null,
-    userProfile: user.data,
-    profileLoading: loading,
-    profileError: error,
-    extendedData: {
-      fullProfile: user.data,
-      displayData: user.data,
-      totalFields: user.data ? Object.keys(user.data).length : 0
-    },
-    refreshProfile,
-    clearProfile
-  };
-};
-```
-
-**Nota**: Este wrapper es solo para facilitar la migración. Se recomienda migrar completamente a la nueva estructura.