Volver al inicio

Ejemplos de Uso

Aprende a conectar tu frontend con cualquier backend usando el BFF de Humalight

Los ejemplos funcionan con Strapi, APIs REST custom y más

Nota Importante

Los ejemplos a continuación son ilustrativos. Adapta las rutas y estructuras de datos según tu backend. Si usas Strapi, reemplaza tu-content-type con el nombre de tus content types reales.

1

Obtener Datos (GET)

Desde el Frontend:

// Llamar al BFF desde tu aplicación cliente
const response = await fetch('/api/strapi/tu-content-type');
const data = await response.json();
console.log(data.data);

Desde un Server Component:

import { httpClient } from '@/lib/http';

async function getData() {
  const response = await httpClient.get('/api/tu-endpoint');
  return response.data;
}

Con parámetros (ej: Strapi populate):

const response = await httpClient.get(
  '/api/tu-content-type?populate=*'
);
2

Crear Datos (POST)

const response = await fetch('/api/strapi/tu-content-type', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    data: {
      title: 'Nuevo elemento',
      description: 'Descripción del elemento'
    }
  })
});
const data = await response.json();
3

Actualizar Datos (PUT)

const response = await fetch('/api/strapi/tu-content-type/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    data: {
      title: 'Título actualizado'
    }
  })
});
const data = await response.json();
4

Eliminar Datos (DELETE)

const response = await fetch('/api/strapi/tu-content-type/1', {
  method: 'DELETE'
});
const data = await response.json();
5

Autenticación - Login

const response = await fetch('/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    identifier: 'user@example.com', // o username
    password: 'password123'
  })
});

const { jwt, user } = await response.json();
// Guardar el token para usar en peticiones futuras
localStorage.setItem('token', jwt);
6

Registro de Usuario

const response = await fetch('/api/auth/register', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    username: 'johndoe',
    email: 'john@example.com',
    password: 'password123'
  })
});

const { jwt, user } = await response.json();
localStorage.setItem('token', jwt);
7

Peticiones Autenticadas

// Obtener datos del usuario actual
const token = localStorage.getItem('token');

const response = await fetch('/api/user/me', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

const { data: userData } = await response.json();
console.log(userData.username, userData.email);
8

Recuperar Contraseña

Paso 1: Solicitar código

await fetch('/api/auth/forgot-password', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    email: 'user@example.com'
  })
});
// El usuario recibirá un email con el código

Paso 2: Restablecer con código

await fetch('/api/auth/reset-password', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    code: 'codigo_del_email',
    password: 'nuevaPassword123',
    passwordConfirmation: 'nuevaPassword123'
  })
});

Endpoints del BFF

🔐 Autenticación

POST/api/auth/login
POST/api/auth/register
GET/api/auth/verify
POST/api/auth/forgot-password
POST/api/auth/reset-password
POST/api/auth/change-password

👤 Usuario

GET/api/user/me
PUT/api/user/update

📡 Proxy Strapi

GET/api/strapi/[tu-content-type]
POST/api/strapi/[tu-content-type]
PUT/api/strapi/[tu-content-type]/[id]
DELETE/api/strapi/[tu-content-type]/[id]

Próximos Pasos

  1. Configura tu backend en .env.local
  2. Si usas Strapi: crea content types y configura permisos
  3. Adapta las rutas de los ejemplos según tu API
  4. Implementa login/registro en tu frontend
  5. Prueba los endpoints con el health check
Verificar Conexión con BackendGuía de Autenticación
Ver Documentación Completa