@appblocks/js-sdk v0.0.15
js-sdk
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 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
Installation
npm i @appblocks/js-sdkUsage
import { shield } from '@appblocks/js-sdk'
import { useFederatedComponent } from '@appblocks/js-sdk'shield
js-sdk/shield includes the following elements 1. tokenStore 2. init 3. verifyLogin 4. verifyLoginWithoutRedirect 5. getAuthUrl 6. logout 7. logoutWithoutRedirect 8. validateAccessToken
tokenStore
Description
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
Usage
shield.tokenStore.getToken()init
Description
Its used to initialise the tokenstore with values from the shield backend. It takes a parameter clientID which is unique for each application.
Usage
await shield.init('#client-id')verifyLogin
Description
It retrieves for the token from the localStorage and validates the token. If the token is not valid it redirects to the shield login.
Usage
const isLoggedinn = await shield.verifyLogin()verifyLoginWithoutRedirect
Description
It retrieves for the token from the localStorage and validates the token. If the token is not valid it checks for valid cookie and tries to login, else continues as not logged in and does not redirect.
Usage
const isLoggedinn = await shield.verifyLoginWithoutRedirect()getAuthUrl
Description
It generates authorization URL with query parameters
Usage
const authUrl = shield.getAuthUrl()logout
Description
It logs out the user by removing the token from localStorage and redirects to shield login.
Usage
await shield.logout()logoutWithoutRedirect
Description
It logs out the user by removing the token from localStorage but does not redirect to shield
Usage
await shield.logoutWithoutRedirect()validateAccessToken
Description
It checks the validity of the token.It can be used to check if user is logged in or not.
Usage
await shield.validateAccessToken()ab-federation-helpers
ab-federation-helpers includes the following elements 1. useFederatedComponent 2. useFederatedModule 3. useDynamicScript
useFederatedComponent
Description
used to obtain federated Component .
Usage
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>
)useFederatedModule
Description
used to obtain federated Module .
Usage
const system = {
module: './login',
scope: 'login',
url: 'http://localhost:3013/remoteEntry.js',
}
const { Component: FederatedModule, errorLoading } = useFederatedModule(
system?.url,
system?.scope,
system?.module,
React
)useDynamicScript
Description
loads script from remote URL.
Usage
const { ready, errorLoading } = useDynamicScript(remoteUrl, React);useSuspense
Description
loading a javascript webpack module dyanmically onto a component
Usage
const store = useSuspense(
process.env.EMULATOR_REMOTE_ENTRY_PATH,
'remotes',
'./store',
React
)