Customizing the login box and self-service (admin) portal in your application

Frontegg allows you to fully customize both the login box and the self-service (admin) portal to align with your product’s branding, localization, and user experience.

Whether you're embedding these components using Frontegg’s SDKs or leveraging the hosted versions, customization is available through flexible integration paths that let you define exactly what users see and how it behaves.

Embedded login (SDK-based)

If you are embedding Frontegg into your application (React, Next.js, Vue, Angular), you can programmatically customize your login box and self-service (admin) portal through the themeOptions and localizations props passed to the <FronteggProvider>.

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.

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;
}

Hosted login (SDK and API-based)

If you're using the hosted login box or hosted self-service (admin) portal, customizations are applied via a remote configuration endpoint. Frontegg fetches your styling and localization overrides using the metadataOverrides URL you provide.

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"
          }
        }
      }
    }
  })
);