Platform Embed - UnifyApps

Installation

To install the package, use npm:

npm install @unifyapps/platform-react

Usage

Rendering a module

Render UAProvider, and pass the necessary props. Then, use the ConnectionManager, AutomationManager, or Connectors component to render the UI.

import React from 'react';
import ReactDOM from 'react-dom';
import { UAProvider, ConnectionManager } from '@unifyapps/platform-react';
// Configuration options for the platform connection
const options = {
  host: '<HOST_NAME>',
  token: '<IDP_ID>/<SESSION_ID>',
};
// Example: { host: 'https://platform.unifyapps.com', token: '123456789/123456789' }
// Full size style for the connection manager component
const FULL_SIZE = { width: '100%', height: '100%' };
// Main App component
const App = () => (
  <UAProvider options={options}>
    <ConnectionManager style={FULL_SIZE} />
  </UAProvider>
);
// Render the App component to the root element
ReactDOM.render(<App />, document.getElementById('root'));

Props

UAProvider:
- options: An object containing configuration options for the provider.
  - host: The base URL of the host application.
  - token: The temporary session id to authenticate the user
UI Components:
- ConnectionManager
- AutomationManager
- Connectors
UI Components Props:
- id (optional): to load specific entity.
- style (optional): Inline styles for the container.
- className (optional): CSS class name for the container.

How to get the HOST_NAME?

Host name is the same as the URL of the platform application. For example, if the platform application is hosted at `https://platform.unifyapps.com`, then the host would be `https://platform.unifyapps.com`.

How to get the ACCESS_TOKEN?

Using NodeJS

const URL = '<HOST_NAME>/auth/createUserExternalLoginSession';
const AUTH_TOKEN = '<AUTH_TOKEN>';
const data = {
  identityProviderId: '<IDP_ID>',
  formData: {
    username: '<USER_NAME>',
    name: '<NAME>',
    email: '<USER_EMAIL>',
  },
};
// Make a POST request to create a user session
async function makeRequest() {
  try {
    const response = await fetch(URL, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${AUTH_TOKEN}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const responseData = await response.json();
    // Sample responseData: {"redirectUrl":"<HOST_NAME>/auth/external/login?sessionId=<SESSION_ID>&identityProviderId=<IDP_ID>","sessionId":"..."}
    console.log('Success:', responseData);
    return responseData;
  } catch (error) {
    console.error('Error:', error);
  }
}
// Pass this sessionId to the UAProvider options
const { sessionId } = await makeRequest();

How to get the required parameters. Contact support@unifyapps.com

1. HOST_NAME

2. AUTH_TOKEN

3. IDP_ID

4. NPM details: To access the package, you need to have these npm package details, since it's a private repo.