Embedded and hosted integrations

Note that in order to customize your login box, self-service portal, or textual elements, you need to pass the customization objects a bit differently if you are a Hosted or an Embedded user. This topic will outline the steps required to do both. To understand the general customization architecture in Frotegg, make sure you check the general Customization overview before you proceed.

While you can implement most of your customizations using the builder, we understand the extent of granularity and control you can accomplish using code. This is where you begin.

Customization in the embedded mode

Style & text properties

In the embedded mode, you can customize your styling or text changes by passing them within the FronteggProvider as themeOptions or localizations properties. For instance, to change the theme name programmatically, simply pass the themeName option in the themeOptions property. contextOptions

import React from "react";
import {FronteggProvider, FronteggThemeOptions} from "@frontegg/react";
import { LocalizationsOverrides } from "@frontegg/types/Localizations"
import contextOptions from './context-options';

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        themeName: 'classic',
    }
}

const localization: LocalizationsOverrides = {
  en: {
    loginBox: {
      login: {
        // Your customizations here
      },
      signup: {
        // Your customizations here
      },
    },
  },
};

const Provider = () => (
    <FronteggProvider contextOptions={contextOptions}
		 themeOptions={themeOptions}
		 localizations={localizations}>
        <div />
    </FronteggProvider>
);

export default Provider;

The FronteggThemeOptions interface is the main interface that controls the customization of your Frontegg application and includes the styling attributes we've outlined before. The LocalizationsOverrides interface contains all of the possible text-customization options available. You can find them all within the @frontegg folder in your node_modules.

export interface FronteggThemeOptions {
    palette?: ThemePaletteOptions;
    typographyStyleOptions?: CSSProperties;
    spacing?: SpacingOptions;
    shadows?: Shadows;
    transitions?: TransitionsOptions;
    breakpoints?: BreakpointsOptions;
    direction?: Direction;
    components?: ComponentsOptions;
    typography?: TypographyOptions;
    adminPortal?: AdminPortalThemeOptions;
    loginBox?: LoginBoxThemeOptions;
}

Customization in the hosted mode

To customize your components in the Hosted mode, you need to add a metadataOverrides object to ensure it is implemented.

Getting started with metadataOverrides

To customize your login box using Frontegg's hosted login, you need to follow these steps:

1. Create a vendor token for your Environment.
2. Send a GET request to <https://api.frontegg.com/metadata?entityName=adminBox> with the vendor JWT you generated in step 1 as the Bearer token. Your response will include a configuration object with rows.
3. Pull all the data stored under the configuration object.
4. Send a POST request to <https://api.frontegg.com/metadata> using your vendor JWT as the bearer. The body must include all the data you previously pulled under configuraiton in the GET request from step 2, and to that you'll add the following metadataOverrides object. See an example of the payload structure below:

{
    "entityName": "adminBox",
    "configuration": {
        "integrations": {},
        "navigation": {
            ////
        },
        "theme": {
            /////
        },
        "themeV2": {
            "loginBox": {
                /////
            },
            "adminPortal": {
                ////
            }
        },
        "localizations": {
            "en": {
                "loginBox": {
                    //////
                }
            }
        },
        "metadataOverrides": {
            "url": "http://[your-server-url]/overrides"
        }
    }
}

5. On the server URL, pass the only the attributes for what you’d like to override in the themeV2 or localizations objects. The below example uses an axios server to split the name field into first name and last name:

app.get("/overrides",  cors(corsOptions), (req, res) =>
  res.send({
    "themeV2": {
      "loginBox": {
          "signup": {
              "splitFullName": true
          }
      }
  }

Object requirements

Note that the object you send in step 4 must include all of the configurations that you previously pulled under configuration in step 2. If only the metadataOverrides object is included, then the styles will resolve to default until you next publish them through the Frontegg builder.

Style & text properties

To customize your Login Box and admin box styling, you will pass the changes under the themeV2 object and for modifying or translating texts, add the localizations object as in the below example:

app.get("/overrides", cors(corsOptions), (req, res) =>
  res.send({
    themeV2: {
      loginBox: {
          signup: {
            splitFullName: true,
          }
        }
    },
    localizations: {
      en: {
        loginBox: {
          signup: {
            disclaimerCheckboxLabel: "Acme",
            termsLinkText: "Terms & Conditions"
          }
        }
      }
    }
  })
);