> ## Documentation Index
> Fetch the complete documentation index at: https://alan-ramirez-dev.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 🌐 HTTP Clients and Interceptors

> Centralized network management, JWT token injection, and session handling.

Given that the HUB is the central point connecting to multiple independent backends (Transactional Engine, Report Generator, ETL Pipeline, Identity Access Management System (IAM)), the network architecture requires strict control over outgoing requests.

To achieve this, the frontend utilizes isolated **Axios** instances for each microservice, centralized in the `lib/` folder.

## 🛡️ Security Interceptors (IAM)

Communication with the Identity Access Management (IAM) microservice and protected routes require constant credential validation. Instead of manually attaching the token to every request, the `iamApi.js` instance utilizes network interceptors (`interceptors.request`).

Before any request leaves the browser, the interceptor automatically injects the JWT token (if it exists) and configures the `Accept-Language` header based on the user's current route to support language switching in server responses.

```javascript theme={null}
// Dynamic injection in lib/iamApi.js
iamApi.interceptors.request.use((config) => {
    const token = localStorage.getItem('jwt_token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }

    const isEnglish = window.location.pathname.startsWith('/en');
    config.headers['Accept-Language'] = isEnglish ? 'en' : 'es';

    return config;
});
```

## ⏱️ Expired Session Handling (401 Unauthorized)

To prevent a user from remaining in a private view if their JWT token has expired or is invalid, the Axios instance implements a response interceptor (`interceptors.response`).

If the server responds with an **HTTP 401** status code, the interceptor automatically clears the credentials from local storage (`localStorage`) and securely redirects the user to the corresponding login screen, respecting the current session language.

```javascript theme={null}
// Global expiration handling in lib/iamApi.js
iamApi.interceptors.response.use(
    (response) => response,
    (error) => {
        if (error.response && error.response.status === 401) {
            localStorage.removeItem('jwt_token');
            localStorage.removeItem('user');
            
            const isEnglish = window.location.pathname.startsWith('/en');
            const loginUrl = isEnglish ? '/en/iam' : '/iam';
            
            if (window.location.pathname !== loginUrl) {
                window.location.replace(loginUrl);
            }
        }
        return Promise.reject(error);
    }
);
```

## 🔌 Decoupled Network Instances

To keep network domains completely isolated and avoid side effects between microservices, the HUB declares independent Axios clients with their own base URLs and timeout settings tailored to the nature of each process.

```javascript theme={null}
// Network configuration for the ETL pipeline in lib/logiflowApi.js
const logiflowApi = axios.create({
    baseURL: import.meta.env.PROD 
        ? '[https://logiflow-api-fx7o.onrender.com/api/v1/etl](https://logiflow-api-fx7o.onrender.com/api/v1/etl)'
        : 'http://localhost:8081/api/v1/etl',
    headers: {
        'Content-Type': 'application/json'
    }
});
```