@frontegg/react

Frontegg React

Frontegg is a web platform where SaaS companies can set up their fully managed, scalable and brand aware - SaaS features and integrate them into their SaaS portals in up to 5 lines of code.

Installation

Use the package manager npm to install frontegg React.JS library.

npm install @frontegg/react

Usage

Frontegg offers multiple components for integration with the Frontegg's scaleable back-end and front end libraries

Configuration

Frontegg react library requires simple one-liner configuration in order to efficiently interact with the Backend's Frontegg middleware

(*) Checkout the @frontegg/client documentation to read on how to configure the Frontegg backend middleware

Initializaing the Frontegg Configuration

On your App.js:

import * as Frontegg from '@frontegg/react'

// This method is mandatory in order to resolve the authorization header token
const resolveToken = async () => {
    const token = await getTokenSilently(); // This sample is based on Auth0 but every authentication provider is supported (Including Frontegg :-))
    return token;
}

// This method allows to append additional query params to the frontegg requests in case you need to use it on your backend in order to resolve contexts
const resolveAdditionalQueryParams = async () => {
    return [{key: 'my-additional-query-param', value: 'my-addition-query-param-value'}]
}

// This method allows to append additional headers to the frontegg requests in case you need to use it on your backend in order to resolve contexts
const resolveAdditionalHeaders = async () => {
    return [{key: 'my-additional-query-param', value: 'my-addition-query-param-value'}]
    return token;
}

const providerOptions = {
  baseUrl: 'http://localhost:9090',                             // You backend base URL (frontegg will direct the requests to it)
  tokenResolver: resolveToken,                                  // The token resolver (this is mandatory)
  additionalQueryParamsResolver: resolveAdditionalQueryParams,  // The query params resolver (this is optional)
  additionalHeadersResolver: resolveAdditionalHeaders,          // The headers resolver (this is optional)
  // requestCredentials: "include"                              // Support sending credentials on the fetch request to the backend (this is optional)
}


// And wrap Frontegg components with the context provider
<Frontegg.ContextProvider value={providerOptions}>
  ...
</Frontegg.ContextProvider>

Audits

Let your customers record the events, activities and changes made to their tenant.

Frontegg’s Managed Audit Logs feature allows a SaaS company to embed an end-to-end working feature in just 5 lines of code.

Embedding the Managed Audits component is a simple one-liner

import * as Frontegg from '@frontegg/react'

const AuditsContainer = () => {

return (
    <div className="App">
      <Frontegg.ContextProvider value={providerOptions}>
        <Frontegg.Audits />
      </Frontegg.ContextProvider>
    </div>
  );

The pagination mode can be controlled by using the paginationMode prop

import * as Frontegg from '@frontegg/react'

const AuditsContainer = () => {

return (
    <div className="App">
      <Frontegg.ContextProvider value={providerOptions}>
        <Frontegg.Audits paginationMode="scroll | pagination" />
      </Frontegg.ContextProvider>
    </div>
  );

Passing predefined filters is also possible (to load a specific contextual audit logs). That will pre-filter the audits and will not show the pre-filtered columns on the table :-)

import * as Frontegg from '@frontegg/react'

const AuditsContainer = () => {

return (
    <div className="App">
      <Frontegg.ContextProvider value={providerOptions}>
        <Frontegg.Audits predefinedFilters={{
          "resource": "dashboard",
          "action": "Accessed"
        }} />
      </Frontegg.ContextProvider>
    </div>
  );