@onecx/react-auth

Overview

This document provides an overview of the axiosFactory helper that creates an axios instance which auto-injects authorization headers from window.onecxAuth.

axiosFactory Function

The axiosFactory function creates an axios instance with additional functionality, such as automatically adding authorization headers. It is particularly useful in applications that require authentication for every HTTP request.

export const axiosFactory: (baseURL?: string) => AuthenticatedAxiosInstance = (
  baseURL
) => {
  // Implementation
};

baseURL: An optional parameter specifying the base URL for HTTP requests.
An interceptor calls window.onecxAuth.authServiceProxy.v1.updateTokenIfNeeded() and injects headers from getHeaderValues().
Requests matching the WHITELIST (currently assets) are not attached with tokens.

Example Usage

// Create an axios instance with a base URL
const apiClient = axiosFactory('https://api.example.com');

// Make a GET request
apiClient.get('/data')
  .then(response => {
    console.log('Data received:', response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

// Make a POST request with authorization headers
apiClient.post('/submit', { name: 'John Doe' })
  .then(response => {
    console.log('Submission successful:', response.data);
  })
  .catch(error => {
    console.error('Error submitting data:', error);
  });

Auth Proxy Service

The library exposes the OneCX auth proxy that lives under window.onecxAuth.authServiceProxy. It lets you query auth state, user info, and trigger token refresh when needed.

Note that the auth proxy is only available after the shell has been initialized. To safely access the auth proxy, you should check if it is available before using it.

if (!window.onecxAuth?.authServiceProxy) {
  // handle missing auth proxy (e.g., show fallback or defer logic)
  return;
}

const { authServiceProxy } = window.onecxAuth;

// Ensure token is still valid before a guarded action
await authServiceProxy.v1.updateTokenIfNeeded();

// Read user / permissions (depending on shell implementation)
const user = await authServiceProxy.v1.getUser();
const permissions = await authServiceProxy.v1.getPermissions();

Example usage with axiosFactory:

const apiClient = axiosFactory('/api');

await window.onecxAuth.authServiceProxy.v1.updateTokenIfNeeded();
const response = await apiClient.get('/profile');