How to use platform library in ReactJS

Install cube-platform npm package.

npm install cubeforall

Import cube-platform into ReactJS application.

import { init, auth, client, subscription } from 'cubeforall';

Initialize the platform instance.

init('<your-service-id>', '<your-client-id-on-azure-b2c>', '<environment>', '<silent>');

// environment value:
// 'sandbox'
// 'prod'
// if environment value is not specified then default is 'prod'

// silent value:
// true
// false
// if silent value is not specified then default is false

Register your handler after autheticating successfully as below:

auth.handleLoginRedirect((authenticatedAccount) => {
  // your code here
  // console.log(authenticatedAccount);
  // console.log(platform.auth.getActiveAccount());
});

login handler of click event for login button.

const login = () => {
  auth.signIn().catch((error) => {
    console.error(error);
  });
};

Call check subscription handler to get subscription data.

const checkSubscription = () => {
  subscription.checkSubscription().then((response) => {
    // your code here
    // console.log(response);
  });
};

logout handler of click event for logout button.

const logout = () => {
  auth.signOut().then((response) => {
    // your code here
    // setIsSignedIn(false);
    // window.location.reload();
  });
};

Create login button in your html page.

<button id="loginButton" onClick="{login}">Login with CCN</button>

Create logout button in your html page.

<button id="logoutButton" onClick="{logout}">Logout</button>

Send Request

platform.client
  .sendRequestAsync(
    '<target-service-id>',
    '<contract-name>',
    '<contract-version>',
    '<contract-method>',
    new {}() /*request payload*/
  )
  .then((response) => {
    // process response
  })
  .catch((err) => {
    // handle error
  });

How to use platform library with Script Tag

Include script tag into your application.

<script src="https://unpkg.com/cubeforall@<will-be-version-here>/dist/platform.min.js"></script>

Initialize the platform instance.

platform.init('<your-service-id>', '<your-client-id-on-azure-b2c>', '<environment>');

// environment value:
// 'sandbox'
// 'prod'
// if environment value is not specified then default is 'prod'

// silent value:
// true
// false
// if silent value is not specified then default is false

Register your handler after autheticating successfully as below:

platform.auth.handleLoginRedirect((authenticatedAccount) => {
  // your code here
  // console.log(authenticatedAccount);
  // console.log(platform.auth.getActiveAccount());
});

Create login button in your html page.

<button id="loginButton">Login with CCN</button>

Create logout button in your html page.

<button id="logoutButton">Logout</button>

Call platform signIn inside handler of click event for login button.

loginButton.addEventListener('click', () => {
  platform.auth.signIn().catch((error) => {
    console.error(error);
  });
});

Call check subscription handler to get subscription data.

platform.subscription.checkSubscription().then((response) => {
  // your code here
  // console.log(response);
});

Call platform signOut inside handler of click event for logout button.

logoutButton.addEventListener('click', () => {
  platform.auth.signOut().then((response) => {
    window.location.reload();
  });
});

Send Request

platform.client
  .sendRequestAsync(
    '<target-service-id>',
    '<contract-name>',
    '<contract-version>',
    '<contract-method>',
    new {}() /*request payload*/
  )
  .then((response) => {
    // process response
  })
  .catch((err) => {
    // handle error
  });

Thank You!