App Embed - UnifyApps

Please follow the below instructions for installation through NPM/Javascript.

Via NPM

Installation

To install the package, use npm:

npm install @unifyapps/sdk-react

Usage

Rendering an application

Render UAProvider, and pass the necessary props. Then, use the WebApplication component to render the UI.

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>',
};
// Example: { applicationId: 'my_app' }
const App = () => (
  <UAProvider options={options}>
    <WebApplication {...webApplicationProps} />
  </UAProvider>
);
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 token to authenticate the user
  - identityProviderId: Identity provider, required for authentication
WebApplication: Renders application made via UnifyApps platform.
- applicationId: ID of the application. Application ID you can get from application's overview page on UnifyApps platform
- pageId (optional): Page ID of the application. Page ID you can get from application's page settings (Page URL field)
- pageInputs (optional): Page inputs required to render the applications's page, if any.

Via JavaScript

Installation

To use the js snippet to embed your application, copy the following code and paste it in your HTML file.

<script>
    window.unifyAppsSettings = {
        host: '<HOST_NAME>',
        token: '<SESSION_ID>',
        identityProviderId: '<IDP_ID>',
        applicationId: '<APPLICATION_ID>',
        pageId: '<PAGE_ID>',
        pageInputs: '<PAGE_INPUTS>',
        containerEl: '<CONTAINER_ELEMENT>',
    };
    (function() {
        var w = window,
            ua = w.UnifyApps;
        if (typeof ua === 'function') {
            ua('update', w.unifyAppsSettings);
        } else {
            var d = document,
                u = function() {
                    u.c(arguments);
                };
            u.q = [];
            u.c = function(args) {
                u.q.push(args);
            };
            w.UnifyApps = u;
            w.UnifyApps('init');
            var l = function() {
                var s = d.createElement('script');
                s.type = 'text/javascript';
                s.async = true;
                s.src = window.unifyAppsSettings.host + '/lib/delta-matrix/ua-web-sdk.js';
                var x = d.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
            };
            if (document.readyState === 'complete') {
                l();
            } else if (w.attachEvent) {
                w.attachEvent('onload', l);
            } else {
                w.addEventListener('load', l, false);
            }
        }
    })();
</script>

Props

host (required): The base URL of the host application
token (required): The temporary session id to authenticate the user
identityProviderId (required): Identity provider, required for authentication
applicationId (required): Application ID: The unique identifier of the application. Retrieve this from the application's overview page in UnifyApps platform
pageId (optional): Page ID: If a specific page needs to be opened. Retrieve this from inside application's page settings (Page Slug)
pageInputs (optional): Page inputs required to render the application's page
containerEl (optional): The element where the application will be rendered. If not provided, the application will be rendered in the body of the page

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

HOST_NAME
IDP_ID
APPLICATION_ID

Replace these values in the code snippet above.

Authenticating a user

Authentication via Auth Token

Make a request to an endpoint with the required parameters to get the session id.

Example in 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>',
  },
};
// 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(URL, {
      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);

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

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