bo-remotes-helper

Helper library for Module Federation remotes in the BO ecosystem.

Purpose

bo-remotes-helper provides common functionality for remote modules in the BO system, specifically designed to work with Module Federation without the heavy Node.js dependencies that bo-library has.

Features

• 🔐 Lightweight Authentication Context - No Node.js polyfills required
• 🛡️ Secured Component - Permission-based conditional rendering
• 🔧 Remote Utilities - Common functions for remote modules
• 📦 Module Federation Ready - Pre-configured shared dependencies
• 💾 Token Management - Browser-compatible token handling

Installation

npm install bo-remotes-helper

Usage

Basic Setup

import { RemoteWrapper, useRemoteAuth, Secured } from "bo-remotes-helper";

// Wrap your remote component
export const MyRemoteComponent = ({ token }) => {
  return (
    <RemoteWrapper token={token}>
      <MyContent />
    </RemoteWrapper>
  );
};

// Use authentication context
const MyContent = () => {
  const { state, hasPermission } = useRemoteAuth();

  return (
    <div>
      <h1>Welcome {state.user?.name}</h1>

      <Secured permission="edit">
        <button>Edit Content</button>
      </Secured>
    </div>
  );
};

Module Federation Configuration

import { useRemoteConfig } from "bo-remotes-helper";

const { getWebpackConfig } = useRemoteConfig();

const config = getWebpackConfig("my-remote", {
  "./MyComponent": "./src/MyComponent",
});

API Reference

Components

RemoteWrapper

Main wrapper component that provides authentication context.

Secured

Conditional rendering component based on permissions.

Hooks

useRemoteAuth()

Access authentication state and methods.

📖 Ver documentación completa de useRemoteAuth

const { state, hasPermission, setToken, clearAuth } = useRemoteAuth();

// Verificar autenticación
if (state.isAuthenticated) {
  console.log("User:", state.user?.name);
  console.log("Permissions:", state.permissions);
}

// Verificar permisos específicos
if (hasPermission("users:write")) {
  // Usuario puede editar
}

useRemoteConfig()

Get standard Module Federation configuration.

Components

<Secured />

Conditional rendering based on permissions.

📖 Ver documentación completa de Secured

<Secured permission="admin:all" fallback={<div>No autorizado</div>}>
  <AdminPanel />
</Secured>

Utils

Token utilities

• decodeToken(token) - Decode JWT safely
• isTokenExpired(token) - Check token expiration
• tokenStorage - Browser storage utilities

Module utilities

• loadRemoteModule() - Dynamic remote loading
• isRemoteAvailable() - Check remote availability

Differences from bo-library

| Feature | bo-library | bo-remotes-helper | | -------------- | ----------------------- | ----------------------- | | Authentication | Full JWT verification | Client-side decode only | | Node.js APIs | Required (crypto, etc.) | Browser-only | | Bundle size | Large | Lightweight | | Use case | Host applications | Remote modules |

Development

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run dev

# Test
npm run test

Documentation

📚 Documentación Completa - Guías, tutoriales y referencia completa

Quick Links

• 🔐 Hook useRemoteAuth - Autenticación y permisos
• 🛡️ Componente Secured - Renderizado condicional
• 🚀 Quick Start Guide - Comenzar en 5 minutos
• 🧪 Testing Guide - Probar componentes
• ❓ FAQ - Preguntas frecuentes

Integration with bo-module-react-template

This library is designed to be the standard authentication solution for all remote modules created from bo-module-react-template.