# How to use platform library in ReactJS

#### Install cube-platform npm package.

```javascript
npm install cubeforall
```

#### Import cube-platform into ReactJS application.

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

#### Initialize the platform instance.

```javascript
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:

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

#### login handler of click event for login button.

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

#### Call check subscription handler to get subscription data.

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

#### logout handler of click event for logout button.

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

#### Create login button in your html page.

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

#### Create logout button in your html page.

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

#### Send Request

```javascript
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.

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

#### Initialize the platform instance.

```javascript
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:

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

#### Create login button in your html page.

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

#### Create logout button in your html page.

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

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

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

#### Call check subscription handler to get subscription data.

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

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

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

#### Send Request

```javascript
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!**