Client libraries includes methods to use SHIELD, libraries to ease the use of Webpack Module Federation - Promise based loading. It provides the essential packages to facilitate appblocks features across appblocks applications.

As of now, js-sdk contains the following

• shield
• ab-federation-helpers

shield helps to setup authentication for your application. It contains many methods to setup user authentication with shield and obtain tokens across appblocks applications.

ab-federation-helpers contains hooks and methods to facilitate federated Components and Modules

    npm i @appblocks/js-sdk

    import { shield } from '@appblocks/js-sdk/shield'

    import { useFederatedComponent } from '@appblocks/js-sdk/ab-federation-helpers'

js-sdk/shield includes the following elements

1. tokenStore
2. init
3. verifyLogin
4. getAuthUrl
5. logout

Its an object which stores the token, refresh Token, expiry time as private variables along with related functions. It contains the timer id for the token

shield.tokenStore.getToken()

Its used to initialise the tokenstore with values from the shield backend. It takes a parameter clientID which is unique for each application.

await shield.init('#client-id')

It retrieves for the token from the localStorage and validates the token. If the token is not present in the localStorage it redirects to the shield login.

const isLoggedinn = await shield.verifyLogin()

It generates authorization URL with query parameters

const authUrl = shield.getAuthUrl()

It logs out the user by removing the token from localStorage and redirects to shield login.

await shield.logout()

ab-federation-helpers includes the following elements

1. useFederatedComponent
2. useFederatedModule
3. useDynamicScript

used to obtain federated Component .

const system = {
    module: './login',
    scope: 'login',
    url: 'http://localhost:3013/remoteEntry.js',
}
const { Component: FederatedComponent, errorLoading } = useFederatedComponent(
  system?.url,
  system?.scope,
  system?.module,
  React
)
return (
  <React.Suspense fallback={''}>
    {errorLoading
      ? `Error loading module "${module}"`
      : FederatedComponent && <FederatedComponent />}
  </React.Suspense>
)

used to obtain federated Module .

const system = {
    module: './login',
    scope: 'login',
    url: 'http://localhost:3013/remoteEntry.js',
}
const { Component: FederatedModule, errorLoading } = useFederatedModule(
  system?.url,
  system?.scope,
  system?.module,
  React
)

loads script from remote URL.

  const { ready, errorLoading } = useDynamicScript(remoteUrl, React);