React client package helping with authorization using Eccomix API.

1. Configuration
2. Provider
3. Hook
   1. Methods and Properties

Configuration

Import EccomixAuthProvider provider from package, and apply valid settings.

Settings structure:

| Property | Type | Description | Example | | ------------------------ | -------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------- | | src | string | The base URL of the application. | https://example.app.com | | usersUrl | string | The Eccomix API endpoint for user-related operations. | https://example-api.example.com | | postMessageUrl | string | The URL to redirect to after a successful Eccomix login. | https://example.app.com | | applicationDefinitions | Record<string, IAppDefinition> | A mapping of app identifiers to their definitions for toolbar generation. | { "calendar": { name: "Calendar", ... } } |

interface IAppDefinition {
  name: string;
  iconBase64?: string;
  icon: string;
  label: string;
  shortLabel?: string;
  color?: string;
}

Provider

Import EccomixAuthProvider provider from package.

import { EccomixAuthProvider } from "eccomix-react-auth";

Add configured EccomixAuthProvider to your React app, wrapping component in which package hook will be used.

Below example shows how app ExampleApp available under https://example.app.com would authenticate with Eccomix Instance https://example-api.example.com.

<EccomixAuthProvider
  settings={{
    src: "https://example.app.com",
    usersUrl: "https://example-api.example.com",
    postMessageSrc: "https://example.app.com",
    applicationDefinitions: {
      ExampleApp: {
        label: "ExampleApp label",
        shortLabel: "ExampleApp short label",
        theme: "blue",
        icon: "ExampleApp",
        color: "#2096F3",
      },
    },
  }}
>
  <App />
</EccomixAuthProvider>

Hook

Import useEccomixAuth hook from package. Hook works only inside provider context.

import { useEccomixAuth } from "eccomix-react-auth";

Methods and Properties

| Name | Description | Parameters | Returns | | ---------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | token | Current authentication token. | – | string \| undefined | | userId | Current user ID. | – | string \| undefined | | reload | Re-initializes the client, optionally with a forced user. | forceUser?: { userId: string; token: string } | Promise<IAppInitConfig> | | login | Logs in with username and password. | { username: string; password: string } | Promise<AxiosResponse<string>> | | loginSocial | Logs in using a social provider. | { type: string; accessToken: string } | Promise<any> | | register | Registers a new user. | { username: string; password: string; firstName: string; lastName: string } | Promise<AxiosResponse<Omit<IRegisterUserParams, 'password'> & { id: string }>> | | resetPassword | Initiates password reset for a username. | { username: string } | Promise<any> | | recoverPassword | Completes password recovery with token. | { username: string; token: string; password: string } | Promise<any> | | verifyToken | Verifies a token and returns user info. | { token: string } | Promise<AxiosResponse<IUserInfoResponse>> | | logout | Logs out the current user. | – | Promise<AxiosResponse<void>> | | hasAccess | Checks if the user has access to a given application. | name: string, data: T | Promise<T> | | getToolbarData | Loads toolbar data for the current user/session. | { applicationId }?: { applicationId?: string } | Promise<IAppToolbarData> | | showLoader | Shows a loading overlay. | elementId?: string | void | | hideLoader | Hides the loading overlay. | elementId?: string | void | | renderAppSuspended | Renders a suspended app message. | replaceElement: string, options: Partial<{ ... }> | HTMLDivElement | | goToLogin | Redirects to the login page. | state?: object | void | | goToPortal | Redirects to the portal (main app) page. | – | void |