Embedded and Hosted specifics
Note that in order to customize your login box, admin 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.
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:
- Create a vendor token for your Environment.
- 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 aconfiguration
object with rows. - Pull all the data stored under the
configuration
object. - 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 underconfiguraiton
in the GET request from step 2, and to that you'll add the followingmetadataOverrides
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"
}
}
}
- On the server URL, pass the only the attributes for what you’d like to override in the
themeV2
orlocalizations
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 themetadataOverrides
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"
}
}
}
}
})
);
Updated about 2 months ago