max-remotes-helper 1.0.0

package/README.md

@@ -0,0 +1,123 @@
+# 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
+
+```bash
+npm install bo-remotes-helper
+```
+
+## Usage
+
+### Basic Setup
+
+```tsx
+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
+
+```javascript
+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.
+
+#### `useRemoteConfig()`
+Get standard Module Federation configuration.
+
+### 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
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Watch mode
+npm run dev
+
+# Test
+npm run test
+```
+
+## 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`.

package/dist/components/RemoteWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AuthProviderProps } from '../types';
+/**
+ * Wrapper component that provides authentication context to remote components
+ * This is the main component that remote applications should use
+ */
+export declare const RemoteWrapper: React.FC<AuthProviderProps>;

package/dist/components/Secured.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SecuredProps } from '../types';
+/**
+ * Secured component for conditional rendering based on permissions
+ * Compatible with Module Federation
+ */
+export declare const Secured: React.FC<SecuredProps>;

package/dist/context/RemoteAuthContext.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { RemoteAuthContextValue } from '../types';
+interface RemoteAuthProviderProps {
+    children: ReactNode;
+    initialToken?: string;
+}
+export declare const RemoteAuthProvider: React.FC<RemoteAuthProviderProps>;
+export declare const useRemoteAuth: () => RemoteAuthContextValue;
+export {};

package/dist/hooks/useRemoteConfig.d.ts

@@ -0,0 +1,13 @@
+import { SharedDependencies } from '../types';
+/**
+ * Hook that provides standard Module Federation configuration for remotes
+ */
+export declare const useRemoteConfig: () => {
+    sharedDependencies: SharedDependencies;
+    getWebpackConfig: (remoteName: string, exposedComponents: Record<string, string>) => {
+        name: string;
+        filename: string;
+        exposes: Record<string, string>;
+        shared: SharedDependencies;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { RemoteAuthProvider, useRemoteAuth } from './context/RemoteAuthContext';
+export { Secured } from './components/Secured';
+export { RemoteWrapper } from './components/RemoteWrapper';
+export { useRemoteConfig } from './hooks/useRemoteConfig';
+export { decodeToken, isTokenExpired, extractPermissions, tokenStorage } from './utils/tokenUtils';
+export { loadRemoteModule, isRemoteAvailable, createRemoteComponentLoader, getRemoteEnvironment } from './utils/moduleUtils';
+export type { RemoteAuthState, RemoteAuthContextValue, AuthProviderProps, SecuredProps, TokenInfo, RemoteConfig, SharedDependencies, } from './types';

package/dist/index.js

@@ -0,0 +1,2 @@
+/*! For license information please see index.js.LICENSE.txt */
+(()=>{var e={20:(e,r,t)=>{"use strict";var o=t(953),n=Symbol.for("react.element"),s=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};r.Fragment=s,r.jsx=function(e,r,t){var o,s={},c=null,d=null;for(o in void 0!==t&&(c=""+t),void 0!==r.key&&(c=""+r.key),void 0!==r.ref&&(d=r.ref),r)a.call(r,o)&&!l.hasOwnProperty(o)&&(s[o]=r[o]);if(e&&e.defaultProps)for(o in r=e.defaultProps)void 0===s[o]&&(s[o]=r[o]);return{$$typeof:n,type:e,key:c,ref:d,props:s,_owner:i.current}}},60:(e,r,t)=>{var o={"./moduleUtils":226,"./moduleUtils.ts":226,"./tokenUtils":433,"./tokenUtils.ts":433};function n(e){return Promise.resolve().then(()=>{if(!t.o(o,e)){var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}return t(o[e])})}n.keys=()=>Object.keys(o),n.id=60,e.exports=n},226:(e,r,t)=>{"use strict";t.r(r),t.d(r,{createRemoteComponentLoader:()=>i,getRemoteEnvironment:()=>l,isRemoteAvailable:()=>a,loadRemoteModule:()=>s});var o=t(953),n=t.n(o);const s=async(e,r)=>{try{return await t(60)(`${e}/${r}`)}catch(t){throw console.error(`Failed to load remote module ${e}/${r}:`,t),t}},a=async e=>{try{const r=window[e];return"function"==typeof r?.get}catch(e){return!1}},i=(e,r,t)=>n().lazy(async()=>{try{return await s(e,r)}catch(o){return console.error(`Remote component loading failed: ${e}/${r}`,o),t?{default:t}:{default:()=>n().createElement("div",{style:{padding:"20px",color:"red"}},`Failed to load remote component: ${e}/${r}`)}}}),l=()=>({isDevelopment:!1,apiBaseUrl:process.env.REACT_APP_API_URL||"",frontUrl:process.env.REACT_APP_FRONT_URL||""})},433:(e,r,t)=>{"use strict";t.r(r),t.d(r,{decodeToken:()=>o,extractPermissions:()=>s,isTokenExpired:()=>n,tokenStorage:()=>a});const o=e=>{try{if(!e)return null;const r=e.split(".");if(3!==r.length)return null;const t=r[1],o=t+"=".repeat((4-t.length%4)%4),n=atob(o);return JSON.parse(n)}catch(e){return console.error("Error decoding token:",e),null}},n=e=>{const r=o(e);if(!r||!r.exp)return!0;const t=Math.floor(Date.now()/1e3);return r.exp<t},s=e=>{if(!e)return[];const r=["permissions","roles","authorities","scope"];for(const t of r){const r=e[t];if(Array.isArray(r))return r;if("string"==typeof r)return r.split(" ").filter(Boolean)}return[]},a={key:"bo-remote-token",save:e=>{try{sessionStorage.setItem(a.key,e)}catch(e){console.error("Error saving token:",e)}},get:()=>{try{return sessionStorage.getItem(a.key)}catch(e){return console.error("Error getting token:",e),null}},remove:()=>{try{sessionStorage.removeItem(a.key)}catch(e){console.error("Error removing token:",e)}},clear:()=>{try{sessionStorage.clear()}catch(e){console.error("Error clearing storage:",e)}}}},848:(e,r,t)=>{"use strict";e.exports=t(20)},953:e=>{"use strict";e.exports=require("react")}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var s=r[o]={exports:{}};return e[o](s,s.exports,t),s.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.e=()=>Promise.resolve(),t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";t.r(o),t.d(o,{RemoteAuthProvider:()=>l,RemoteWrapper:()=>u,Secured:()=>d,createRemoteComponentLoader:()=>p.createRemoteComponentLoader,decodeToken:()=>n.decodeToken,extractPermissions:()=>n.extractPermissions,getRemoteEnvironment:()=>p.getRemoteEnvironment,isRemoteAvailable:()=>p.isRemoteAvailable,isTokenExpired:()=>n.isTokenExpired,loadRemoteModule:()=>p.loadRemoteModule,tokenStorage:()=>n.tokenStorage,useRemoteAuth:()=>c,useRemoteConfig:()=>m});var e=t(848),r=t(953),n=t(433);const s={token:null,isAuthenticated:!1,permissions:[],user:void 0},a=(e,r)=>{switch(r.type){case"SET_TOKEN":const t=(0,n.decodeToken)(r.payload),o=t?(0,n.extractPermissions)(t):[];return{...e,token:r.payload,isAuthenticated:!(0,n.isTokenExpired)(r.payload),permissions:o,user:t?{id:t.sub||"",email:t.email||"",name:t.name||t.email||""}:void 0};case"CLEAR_AUTH":return{...s};case"SET_USER_INFO":return{...e,user:{id:r.payload.sub||"",email:r.payload.email||"",name:r.payload.name||r.payload.email||""}};default:return e}},i=(0,r.createContext)(void 0),l=({children:t,initialToken:o})=>{const[l,c]=(0,r.useReducer)(a,s);(0,r.useEffect)(()=>{const e=n.tokenStorage.get(),r=o||e;r&&!(0,n.isTokenExpired)(r)?c({type:"SET_TOKEN",payload:r}):e&&n.tokenStorage.remove()},[o]);const d={state:l,setToken:e=>{e&&(n.tokenStorage.save(e),c({type:"SET_TOKEN",payload:e}))},clearAuth:()=>{n.tokenStorage.remove(),c({type:"CLEAR_AUTH"})},hasPermission:e=>!!l.isAuthenticated&&l.permissions.includes(e)};return(0,e.jsx)(i.Provider,{value:d,children:t})},c=()=>{const e=(0,r.useContext)(i);if(void 0===e)throw new Error("useRemoteAuth must be used within a RemoteAuthProvider");return e},d=({children:r,permission:t,fallback:o=null})=>{const{hasPermission:n,state:s}=c();return s.isAuthenticated&&n(t)?(0,e.jsx)(e.Fragment,{children:r}):(0,e.jsx)(e.Fragment,{children:o})},u=({children:r,token:t,apiBaseUrl:o,module:n})=>(0,e.jsx)(l,{initialToken:t,children:(0,e.jsx)("div",{"data-remote-module":n,"data-api-base":o,children:r})}),m=()=>{const e=(0,r.useMemo)(()=>({react:{singleton:!0,eager:!1},"react-dom":{singleton:!0,eager:!1},"aurora-web":{singleton:!0,eager:!1},"react-i18next":{singleton:!0,eager:!1},i18next:{singleton:!0,eager:!1}}),[]);return{sharedDependencies:e,getWebpackConfig:(r,t)=>({name:r,filename:"remoteEntry.js",exposes:t,shared:e})}};var p=t(226)})(),module.exports=o})();

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/types/index.d.ts

@@ -0,0 +1,48 @@
+export interface RemoteAuthState {
+    token: string | null;
+    isAuthenticated: boolean;
+    permissions: string[];
+    user?: {
+        id: string;
+        email: string;
+        name: string;
+    };
+}
+export interface RemoteAuthContextValue {
+    state: RemoteAuthState;
+    setToken: (token: string) => void;
+    clearAuth: () => void;
+    hasPermission: (permission: string) => boolean;
+}
+export interface AuthProviderProps {
+    children: React.ReactNode;
+    token?: string;
+    apiBaseUrl?: string;
+    module?: string;
+}
+export interface SecuredProps {
+    children: React.ReactNode;
+    permission: string;
+    fallback?: React.ReactNode;
+}
+export interface TokenInfo {
+    iat?: number;
+    exp?: number;
+    sub?: string;
+    email?: string;
+    name?: string;
+    permissions?: string[];
+    [key: string]: any;
+}
+export interface RemoteConfig {
+    name: string;
+    url: string;
+    module: string;
+}
+export interface SharedDependencies {
+    [key: string]: {
+        singleton?: boolean;
+        requiredVersion?: string;
+        eager?: boolean;
+    };
+}

package/dist/utils/moduleUtils.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * Utilities for Module Federation and remote module management
+ */
+/**
+ * Dynamically imports a remote module
+ */
+export declare const loadRemoteModule: (remoteName: string, moduleName: string) => Promise<any>;
+/**
+ * Checks if a remote module is available
+ */
+export declare const isRemoteAvailable: (remoteName: string) => Promise<boolean>;
+/**
+ * Creates a safe remote component loader with error boundary
+ */
+export declare const createRemoteComponentLoader: (remoteName: string, moduleName: string, fallback?: React.ComponentType) => React.LazyExoticComponent<React.ComponentType<any>>;
+/**
+ * Environment utilities for remotes
+ */
+export declare const getRemoteEnvironment: () => {
+    isDevelopment: boolean;
+    apiBaseUrl: string;
+    frontUrl: string;
+};

package/dist/utils/tokenUtils.d.ts

@@ -0,0 +1,24 @@
+import { TokenInfo } from '../types';
+/**
+ * Safely decodes a JWT token without verification
+ * For production use, tokens should be verified server-side
+ */
+export declare const decodeToken: (token: string) => TokenInfo | null;
+/**
+ * Checks if a token is expired
+ */
+export declare const isTokenExpired: (token: string) => boolean;
+/**
+ * Extracts permissions from a decoded token
+ */
+export declare const extractPermissions: (tokenInfo: TokenInfo) => string[];
+/**
+ * Storage utilities for tokens
+ */
+export declare const tokenStorage: {
+    key: string;
+    save: (token: string) => void;
+    get: () => string | null;
+    remove: () => void;
+    clear: () => void;
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "max-remotes-helper",
+  "version": "1.0.0",
+  "description": "Helper library for Module Federation remotes in BO ecosystem",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "webpack --config webpack.config.js --mode=production",
+    "dev": "webpack --config webpack.config.js --mode=development --watch",
+    "test": "jest",
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "module-federation",
+    "remotes",
+    "react",
+    "bo"
+  ],
+  "author": "BO Team",
+  "license": "ISC",
+  "dependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "eslint": "^8.56.0",
+    "jest": "^29.5.0",
+    "rimraf": "^5.0.0",
+    "ts-loader": "^9.4.3",
+    "typescript": "^5.9.2",
+    "webpack": "^5.87.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}

package/src/components/RemoteWrapper.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { RemoteAuthProvider } from '../context/RemoteAuthContext';
+import { AuthProviderProps } from '../types';
+
+/**
+ * Wrapper component that provides authentication context to remote components
+ * This is the main component that remote applications should use
+ */
+export const RemoteWrapper: React.FC<AuthProviderProps> = ({
+  children,
+  token,
+  apiBaseUrl,
+  module,
+}) => {
+  return (
+    <RemoteAuthProvider initialToken={token}>
+      <div data-remote-module={module} data-api-base={apiBaseUrl}>
+        {children}
+      </div>
+    </RemoteAuthProvider>
+  );
+};

package/src/components/Secured.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SecuredProps } from '../types';
+import { useRemoteAuth } from '../context/RemoteAuthContext';
+
+/**
+ * Secured component for conditional rendering based on permissions
+ * Compatible with Module Federation
+ */
+export const Secured: React.FC<SecuredProps> = ({ 
+  children, 
+  permission, 
+  fallback = null 
+}) => {
+  const { hasPermission, state } = useRemoteAuth();
+
+  // If not authenticated, don't render
+  if (!state.isAuthenticated) {
+    return <>{fallback}</>;
+  }
+
+  // If has permission, render children
+  if (hasPermission(permission)) {
+    return <>{children}</>;
+  }
+
+  // Otherwise render fallback
+  return <>{fallback}</>;
+};

package/src/context/RemoteAuthContext.tsx

@@ -0,0 +1,125 @@
+import React, { createContext, useContext, useReducer, useEffect, ReactNode } from 'react';
+import { RemoteAuthState, RemoteAuthContextValue, TokenInfo } from '../types';
+import { decodeToken, extractPermissions, isTokenExpired, tokenStorage } from '../utils/tokenUtils';
+
+// Action types
+type AuthAction =
+  | { type: 'SET_TOKEN'; payload: string }
+  | { type: 'CLEAR_AUTH' }
+  | { type: 'SET_USER_INFO'; payload: TokenInfo };
+
+// Initial state
+const initialState: RemoteAuthState = {
+  token: null,
+  isAuthenticated: false,
+  permissions: [],
+  user: undefined,
+};
+
+// Reducer
+const authReducer = (state: RemoteAuthState, action: AuthAction): RemoteAuthState => {
+  switch (action.type) {
+    case 'SET_TOKEN':
+      const tokenInfo = decodeToken(action.payload);
+      const permissions = tokenInfo ? extractPermissions(tokenInfo) : [];
+      
+      return {
+        ...state,
+        token: action.payload,
+        isAuthenticated: !isTokenExpired(action.payload),
+        permissions,
+        user: tokenInfo ? {
+          id: tokenInfo.sub || '',
+          email: tokenInfo.email || '',
+          name: tokenInfo.name || tokenInfo.email || '',
+        } : undefined,
+      };
+      
+    case 'CLEAR_AUTH':
+      return {
+        ...initialState,
+      };
+      
+    case 'SET_USER_INFO':
+      return {
+        ...state,
+        user: {
+          id: action.payload.sub || '',
+          email: action.payload.email || '',
+          name: action.payload.name || action.payload.email || '',
+        },
+      };
+      
+    default:
+      return state;
+  }
+};
+
+// Context
+const RemoteAuthContext = createContext<RemoteAuthContextValue | undefined>(undefined);
+
+// Provider props
+interface RemoteAuthProviderProps {
+  children: ReactNode;
+  initialToken?: string;
+}
+
+// Provider component
+export const RemoteAuthProvider: React.FC<RemoteAuthProviderProps> = ({ 
+  children, 
+  initialToken 
+}) => {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+
+  // Initialize with token from storage or props
+  useEffect(() => {
+    const storedToken = tokenStorage.get();
+    const tokenToUse = initialToken || storedToken;
+    
+    if (tokenToUse && !isTokenExpired(tokenToUse)) {
+      dispatch({ type: 'SET_TOKEN', payload: tokenToUse });
+    } else if (storedToken) {
+      // Remove expired token
+      tokenStorage.remove();
+    }
+  }, [initialToken]);
+
+  const setToken = (token: string) => {
+    if (!token) return;
+    
+    tokenStorage.save(token);
+    dispatch({ type: 'SET_TOKEN', payload: token });
+  };
+
+  const clearAuth = () => {
+    tokenStorage.remove();
+    dispatch({ type: 'CLEAR_AUTH' });
+  };
+
+  const hasPermission = (permission: string): boolean => {
+    if (!state.isAuthenticated) return false;
+    return state.permissions.includes(permission);
+  };
+
+  const contextValue: RemoteAuthContextValue = {
+    state,
+    setToken,
+    clearAuth,
+    hasPermission,
+  };
+
+  return (
+    <RemoteAuthContext.Provider value={contextValue}>
+      {children}
+    </RemoteAuthContext.Provider>
+  );
+};
+
+// Hook to use the context
+export const useRemoteAuth = (): RemoteAuthContextValue => {
+  const context = useContext(RemoteAuthContext);
+  if (context === undefined) {
+    throw new Error('useRemoteAuth must be used within a RemoteAuthProvider');
+  }
+  return context;
+};

package/src/hooks/useRemoteConfig.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { SharedDependencies } from '../types';
+
+/**
+ * Hook that provides standard Module Federation configuration for remotes
+ */
+export const useRemoteConfig = () => {
+  const sharedDependencies: SharedDependencies = useMemo(() => ({
+    react: {
+      singleton: true,
+      eager: false,
+    },
+    'react-dom': {
+      singleton: true,
+      eager: false,
+    },
+    'aurora-web': {
+      singleton: true,
+      eager: false,
+    },
+    'react-i18next': {
+      singleton: true,
+      eager: false,
+    },
+    'i18next': {
+      singleton: true,
+      eager: false,
+    },
+  }), []);
+
+  const getWebpackConfig = (remoteName: string, exposedComponents: Record<string, string>) => ({
+    name: remoteName,
+    filename: 'remoteEntry.js',
+    exposes: exposedComponents,
+    shared: sharedDependencies,
+  });
+
+  return {
+    sharedDependencies,
+    getWebpackConfig,
+  };
+};

package/src/index.ts

@@ -0,0 +1,37 @@
+// Main entry point for bo-remotes-helper
+
+// Context and Providers
+export { RemoteAuthProvider, useRemoteAuth } from './context/RemoteAuthContext';
+
+// Components
+export { Secured } from './components/Secured';
+export { RemoteWrapper } from './components/RemoteWrapper';
+
+// Hooks
+export { useRemoteConfig } from './hooks/useRemoteConfig';
+
+// Utils
+export { 
+  decodeToken, 
+  isTokenExpired, 
+  extractPermissions, 
+  tokenStorage 
+} from './utils/tokenUtils';
+
+export { 
+  loadRemoteModule, 
+  isRemoteAvailable, 
+  createRemoteComponentLoader, 
+  getRemoteEnvironment 
+} from './utils/moduleUtils';
+
+// Types
+export type {
+  RemoteAuthState,
+  RemoteAuthContextValue,
+  AuthProviderProps,
+  SecuredProps,
+  TokenInfo,
+  RemoteConfig,
+  SharedDependencies,
+} from './types';

package/src/types/index.ts

@@ -0,0 +1,56 @@
+// Types for bo-remotes-helper
+
+export interface RemoteAuthState {
+  token: string | null;
+  isAuthenticated: boolean;
+  permissions: string[];
+  user?: {
+    id: string;
+    email: string;
+    name: string;
+  };
+}
+
+export interface RemoteAuthContextValue {
+  state: RemoteAuthState;
+  setToken: (token: string) => void;
+  clearAuth: () => void;
+  hasPermission: (permission: string) => boolean;
+}
+
+export interface AuthProviderProps {
+  children: React.ReactNode;
+  token?: string;
+  apiBaseUrl?: string;
+  module?: string;
+}
+
+export interface SecuredProps {
+  children: React.ReactNode;
+  permission: string;
+  fallback?: React.ReactNode;
+}
+
+export interface TokenInfo {
+  iat?: number;
+  exp?: number;
+  sub?: string;
+  email?: string;
+  name?: string;
+  permissions?: string[];
+  [key: string]: any;
+}
+
+export interface RemoteConfig {
+  name: string;
+  url: string;
+  module: string;
+}
+
+export interface SharedDependencies {
+  [key: string]: {
+    singleton?: boolean;
+    requiredVersion?: string;
+    eager?: boolean;
+  };
+}

package/src/utils/moduleUtils.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+
+/**
+ * Utilities for Module Federation and remote module management
+ */
+
+/**
+ * Dynamically imports a remote module
+ */
+export const loadRemoteModule = async (remoteName: string, moduleName: string) => {
+  try {
+    // @ts-ignore - Module Federation dynamic import
+    const module = await import(`${remoteName}/${moduleName}`);
+    return module;
+  } catch (error) {
+    console.error(`Failed to load remote module ${remoteName}/${moduleName}:`, error);
+    throw error;
+  }
+};
+
+/**
+ * Checks if a remote module is available
+ */
+export const isRemoteAvailable = async (remoteName: string): Promise<boolean> => {
+  try {
+    // @ts-ignore - Check if remote is available
+    const container = window[remoteName];
+    return typeof container?.get === 'function';
+  } catch (error) {
+    return false;
+  }
+};
+
+/**
+ * Creates a safe remote component loader with error boundary
+ */
+export const createRemoteComponentLoader = (
+  remoteName: string, 
+  moduleName: string,
+  fallback?: React.ComponentType
+) => {
+  return React.lazy(async () => {
+    try {
+      const module = await loadRemoteModule(remoteName, moduleName);
+      return module;
+    } catch (error) {
+      console.error(`Remote component loading failed: ${remoteName}/${moduleName}`, error);
+      
+      if (fallback) {
+        return { default: fallback };
+      }
+      
+      // Return a default error component
+      return {
+        default: () => React.createElement('div', 
+          { style: { padding: '20px', color: 'red' } },
+          `Failed to load remote component: ${remoteName}/${moduleName}`
+        )
+      };
+    }
+  });
+};
+
+/**
+ * Environment utilities for remotes
+ */
+export const getRemoteEnvironment = () => {
+  return {
+    isDevelopment: process.env.NODE_ENV === 'development',
+    apiBaseUrl: process.env.REACT_APP_API_URL || '',
+    frontUrl: process.env.REACT_APP_FRONT_URL || '',
+  };
+};

package/src/utils/tokenUtils.ts

@@ -0,0 +1,98 @@
+import { TokenInfo } from '../types';
+
+/**
+ * Safely decodes a JWT token without verification
+ * For production use, tokens should be verified server-side
+ */
+export const decodeToken = (token: string): TokenInfo | null => {
+  try {
+    if (!token) return null;
+    
+    const parts = token.split('.');
+    if (parts.length !== 3) return null;
+    
+    const payload = parts[1];
+    // Add padding if needed
+    const paddedPayload = payload + '='.repeat((4 - payload.length % 4) % 4);
+    const decodedPayload = atob(paddedPayload);
+    
+    return JSON.parse(decodedPayload);
+  } catch (error) {
+    console.error('Error decoding token:', error);
+    return null;
+  }
+};
+
+/**
+ * Checks if a token is expired
+ */
+export const isTokenExpired = (token: string): boolean => {
+  const decoded = decodeToken(token);
+  if (!decoded || !decoded.exp) return true;
+  
+  const now = Math.floor(Date.now() / 1000);
+  return decoded.exp < now;
+};
+
+/**
+ * Extracts permissions from a decoded token
+ */
+export const extractPermissions = (tokenInfo: TokenInfo): string[] => {
+  if (!tokenInfo) return [];
+  
+  // Try different possible permission keys
+  const permissionKeys = ['permissions', 'roles', 'authorities', 'scope'];
+  
+  for (const key of permissionKeys) {
+    const permissions = tokenInfo[key];
+    if (Array.isArray(permissions)) {
+      return permissions;
+    }
+    if (typeof permissions === 'string') {
+      // Handle space-separated permissions (like OAuth scope)
+      return permissions.split(' ').filter(Boolean);
+    }
+  }
+  
+  return [];
+};
+
+/**
+ * Storage utilities for tokens
+ */
+export const tokenStorage = {
+  key: 'bo-remote-token',
+  
+  save: (token: string): void => {
+    try {
+      sessionStorage.setItem(tokenStorage.key, token);
+    } catch (error) {
+      console.error('Error saving token:', error);
+    }
+  },
+  
+  get: (): string | null => {
+    try {
+      return sessionStorage.getItem(tokenStorage.key);
+    } catch (error) {
+      console.error('Error getting token:', error);
+      return null;
+    }
+  },
+  
+  remove: (): void => {
+    try {
+      sessionStorage.removeItem(tokenStorage.key);
+    } catch (error) {
+      console.error('Error removing token:', error);
+    }
+  },
+  
+  clear: (): void => {
+    try {
+      sessionStorage.clear();
+    } catch (error) {
+      console.error('Error clearing storage:', error);
+    }
+  }
+};

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES6"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "declaration": true,
+    "outDir": "./dist",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.ts',
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'commonjs2',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: 'tsconfig.json',
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+};