React SDK

Overview

Application Embed is used to render specific, custom applications that you have built on the UnifyApps platform. This is ideal for displaying data-driven UIs, forms, or dashboards to your end-users within your product or a third-party platform.

This section provides instructions to embed your application using the UnifyApps SDK React package. This method is ideal for React applications and provides a more modular approach.

Step-by-Step Instructions

Step 1: Install the Package

Run the following command to install the UnifyApps React SDK:

npm install @unifyapps/sdk-react

Step 2: Get Required Parameters

• HOST_NAME

  ---

  The host name is the URL where the platform application is hosted.
  Example: If the platform is hosted at https://platform.unifyapps.com, then the host is:
  

  https://platform.unifyapps.com

• Generate ACCESS_TOKEN (Session ID)

  ---

  Make an authentication request using Node.js:
  

  const SESSION_ENDPOINT = '<HOST_NAME>/auth/createUserExternalLoginSession';
  const AUTH_TOKEN = '<AUTH_TOKEN>';
  
  const data = {
    identityProviderId: '<IDP_ID>',
    formData: {
      username: '<USER_NAME>',
      name: '<NAME>',
      email: '<USER_EMAIL>',
    },
  };
  
  // Example data: {identityProviderId: '123456789', formData: {username: 'user', name: 'Full name', email: 'user@domain.com'}}
  
  // Make a POST request to create a user session
  async function makeRequest(applicationId: string) {
    try {
      const response = await fetch(SESSION_ENDPOINT, {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${AUTH_TOKEN}`,
          'Content-Type': 'application/json',
          'x-ua-app': applicationId,
        },
        body: JSON.stringify(data),
      });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const responseData = await response.json();
      // Example responseData: {"sessionId":"<SESSION_ID>"}
      console.log('Success:', responseData);
      return responseData;
    } catch (error) {
      console.error('Error:', error);
    }
  }
  
  // Pass this sessionId to the UAProvider options in the token field
  const { sessionId: SESSION_ID } = await makeRequest(applicationId);

Step 3: Obtain Credentials

To obtain the required credentials, contact support@unifyapps.com for:

• HOST_NAME

• AUTH_TOKEN

• IDP_ID

• NPM Access Details - A token will be provided to enable you to download the NPM package.

  • Create a .npmrc  file and add this code, and replace <TOKEN> with given token from unifyapps team

@unifyapps:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=<TOKEN>

Step 4: Import and Configure the SDK

Create a React component that renders the application using UAProvider and WebApplication.

import React from 'react';
import ReactDOM from 'react-dom';
import { UAProvider, WebApplication } from '@unifyapps/sdk-react';

const options = {
  host: '<HOST_NAME>',
  token: '<SESSION_ID>',
  identityProviderId: '<IDP_ID>',
};
// Example: {host: 'https://prod.unifyapps.com', token: '123456789', identityProviderId: '123456789'}

const webApplicationProps = {
  applicationId: '<APPLICATION_ID>',
  pageId: '<PAGE_ID>',
  pageInputs: '<PAGE_INPUTS>',
  onPageEvent: 'async ({eventType, eventPayload}) => { return Promise.resolve() }',
};
// Example: {applicationId: 'my_app'}

const App = () => (
  <UAProvider options={options}>
    <WebApplication {...webApplicationProps} />
  </UAProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Step 5: Configure Required Parameters

Replace the placeholders with actual values:

• UAProvider Props:

  • host – The base URL of the host application.

  • token – A temporary session ID for authentication.

  • identityProviderId – The identity provider ID needed for authentication.

• WebApplication Props:

  • applicationId – The unique identifier of the application.
    This can be retrieved from the application's overview page.
    Eg.- applicationId: 'App-xyz',

  • pageId (optional) – The unique identifier for a specific page within the application, used to designate the overview page. This can be retrieved from the application's page.
    Example: pageId: 'Homepage'

  • pageInputs – An object containing the necessary inputs required to render the application's page. Multiple page inputs can be passed at once.
    Example: pageInputs: ‘{ inputA: 1, inputB: 2, inputC: "abc" }’