## 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>`.

| **Login box** | **Self-service portal** |
|  --- | --- |
| - Themes, colors, layout, logos, and backgrounds | - Layout, page mode (modal/fullscreen), and visibility of modules |
| - Input styling, social login buttons, typography | - Labels, field names, section headers, and error messages |
| - Custom components, headers, and footers | - Appearance and behavior of form inputs and table columns |
| - Full i18n and localization support | - Field permissions (edit/view-only/hide) |


#### 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.

br

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

br
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.

| **Login box** | **Self-service portal** |
|  --- | --- |
| - Serve custom themes and translations | - Theme and field appearance |
| - Host overrides on your own server (Node.js, Express, etc.) | - Localization of portal text |
| - Use Frontegg’s metadata API to push changes | - Visibility and behavior of self-service modules |


#### 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](/ciam/api/vendor-service/other/authenticate_vendor).
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:


br

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

br
1. 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
          }
      }
  }
```

br
**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:

br

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