{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":["InteractiveLink","LightboxImage","CodeBlockCustom","CodeItem","Notification"]},"type":"markdown"},"seo":{"title":"Frontegg login and self-service customization options","siteUrl":"https://developers.frontegg.com/","llmstxt":{"title":"Frontegg Developer Documentation","description":"Authentication, authorization, and user management for Customer Identity, plus Agen for SaaS and Agen for Work. Guides, SDKs, and API references.","sections":[{"title":"Customer Identity (CIAM)","description":"Auth, SSO, SCIM, entitlements, and user management — guides, SDKs, and APIs.","includeFiles":["ciam/**/*.md"],"excludeFiles":[]},{"title":"Agen for SaaS","description":"Agentic access and authorization for SaaS products.","includeFiles":["agen-for-saas/**/*.md"],"excludeFiles":[]},{"title":"Agen for Work","description":"Agentic access and authorization for internal and workforce use.","includeFiles":["agen-for-work/**/*.md"],"excludeFiles":[]},{"title":"Platform","description":"Shared platform overview.","includeFiles":["platform/**/*.md"],"excludeFiles":[]}],"excludeFiles":["internal-docs/**","ciam/guides/env-settings/inject-client-ip.md","CLAUDE.md",".claude/**","**/images/**"],"hide":false}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"frontegg-login-and-self-service-customization-options","__idx":0},"children":["Frontegg login and self-service customization options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontegg offers multiple customization options to style and enhance your interface to suit your brand's style guidelines and business needs. You can customize your self-service portal, Login box, and text component (localizations). This topic will give you a general overview of the tree-like architecture of customization in Frontegg through code. Once you have the basics, the sky's the limit in terms of what you can customize."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"InteractiveLink","attributes":{"href":"https://master.dt42w6tmpzzg7.amplifyapp.com/account/login","target":"_blank","justifyContent":"center"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Checkout our interactive Code Editor!"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"general-attributes","__idx":1},"children":["General attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The customization options are split into various attributes that apply to both the Hosted and Embedded Modes and reflect the various customization options (style, configuration, and localization) we've mentioned previously.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Attribute"},"children":["Attribute"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Usage"},"children":["Usage"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["integrations"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Controls the visibility of all integrations"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["self-service portal"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Controls the visibility and enablements of your portal configurations"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["self-service portal"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navigation"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Controls the visibility of all self-service portal components, e.g., SSO, Roles, Groups, etc. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hidden"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["visible"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["byPermission"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["self-service portalself-service portal self-service portal + Login Box"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transitions"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Defines generic behaviors for CSS transitions"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["breakpoints"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Defines breakpoints for different resolutions (CSS media like)"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["direction"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["LeftToRight | RightToLeft"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["components"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Allows to override ALL of the material-ui components styles we are using such as: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MuiAlert"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MuiAutocomplete"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MuiButton"]}," etc."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Customization options for the Login Box (more info [here])"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["adminPortal"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Customization options for the self-service portal (more info [here])"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["typography"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Defines which fonts to use and which fonts families"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customize multiple aspects of your Frontegg default styles and texts either by passing these via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeOptions"]}," for customizing styles or using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localizations"]}," for modifying or translating texts."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"styling-architecture","__idx":2},"children":["Styling architecture"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To know what and how to style, it is important to understand that the Frontegg style architecture is a top-down tree where the levels are merged-up."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The styles at any given level apply unless overridden by a conflicting style below within the same branch."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The image below demonstrates this top-down approach.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/architechture.ad90dda38e3bda0c9024f39acadd20b0288b582e6b40b1992372bf0cfccbd1ee.7ed0131e.png","alt":"architechture"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Frontegg style architecture defines some global customization styles that can be applied both for your login-box and self-service portal, as well as customization styles that you can apply for each separately."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The idea is that you can always reach the level of customization you need within the granularity that your application requires."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This top-down approach makes it easy to customize components that share the same design regardless of where the component appears in your application. But it also allows for the precision you need for uniquely styling specific parts of your application."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["As shown in the snippet above, the topmost level is the global level. A style applied at the global level impacts all Frontegg components unless you explicitly override that style at a lower level.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontegg base components rely on the great ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://mui.com/"},"children":["Material UI"]}," (as we believe that wheels shouldn't be re-invented). Therefore, some of the links you see below will refer to the documentation of Material UI."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"interactive-styling-code-samples","__idx":3},"children":["Interactive styling code samples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We offer an extensive Sandbox environment for your usage, so you can test Frontegg's various styling and customization options."]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/sandbox.91a466099901badb2d2c8ae3544ec153b689b5ffecbbca20a20425f46fd5d152.7ed0131e.png","alt":"sandbox"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/customized-login.e6fb34c56a785a6f6d63de2fbdb937b95ac93556435348da15729982d0f2d3c6.7ed0131e.png","alt":"sandbox"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"themeoptions-object","__idx":4},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeOptions"]}," Object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeOptions"]}," object can contain custom styles for all the available levels."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here is an object containing all levels and their corresponding styling options."]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const themeOptions = {\n  // Global styles \n  palette: ThemePalette;\n  typographyStyleOptions: CSSProperties;\n  spacing: Spacing;\n  shadows: Shadows;\n  transitions: Transitions;\n  breakpoints: Breakpoints;\n  direction: Direction;\n  components: ComponentsOptions;\n  typography: Typography;\n  \n  // Login Box styles \n  loginBox: {\n    // Easier way to load predefined themes\n    themeName: 'classic' | 'modern' | 'vivid' | 'dark';\n    // Specific customization options for the accept invitation page\n    acceptInvitation: AcceptInvitationPageTheme;\n    // Specific customization options for the activate account page\n    activateAccount: ActivateAccountPageTheme;\n    // Specific customization options for the forgot password page\n    forgotPassword: ForgotPasswordPageTheme;\n    // Specific customization options for the reset password page\n    resetPassword: ResetPasswordPageTheme;\n    // Specific customization options for the login page\n    login: LoginPageTheme;\n    // Specific customization options for the signup page\n    signup: SignupPageTheme;\n    // Specific customization options for the social logins section\n    socialLogins: SocialLoginsTheme;\n    // Specific customization options for the loader of the login box\n    loader: LoaderTheme;\n   },\n       \n   // Admin Portal styles \n   adminPortal: {\n     palette?: ThemePalette;\n     typographyStyleOptions?: Partial<CSSProperties>;\n     spacing?: SpacingOptions;\n     shadows?: Shadows;\n     transitions?: TransitionsOptions;\n     breakpoints?: BreakpointsOptions;\n     direction?: Direction;\n     components?: ComponentsOptions;\n     typography?: TypographyOptions;\n     layout: {\n       fullScreenMode: boolean;\n     };\n   }\n};\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You do not need this entire master object in your code. Instead, just include styles for properties where you want to override the default."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Types of custom styles"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you are using typescript, the interface for the style options is exposed and you can easily import it to see what options are available."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["import { FronteggAppOptions } from '@frontegg/types';"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you are not using typescript, look in the frontegg package for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["frontegg/types"]}," folder to see the style options."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"localizations-architecture","__idx":5},"children":["Localizations architecture"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localizations"]}," initiation attribute, you can customize the text that appears in your Frontegg components— you can set custom button text, add custom input placeholders, write your own input labels, display custom error messages, and more. Similar to the other styling customization in Frontegg, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localization"]}," object adheres to the styling structure of our top-down approach."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"auto-translation-for-authentication-screens-and-self-service","__idx":6},"children":["Auto-translation for authentication screens and self-service"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontegg's default language is English, with built-in support for automatic translation across both the authentication (login) experience and the self-service portal."," ","We currently support ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["25"]}," languages, enabling localized user experiences out of the box—no additional configuration required."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["en – English"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["es – Spanish"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["zh – Chinese (Simplified)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["fr – French"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["de – German"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["pt-BR – Portuguese (Brazil)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ja – Japanese"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ko – Korean"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ar – Arabic"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ru – Russian"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["it – Italian"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["nl – Dutch"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["he – Hebrew"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["tr – Turkish"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["hi – Hindi"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["id – Indonesian"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["vi – Vietnamese"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["pl – Polish"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["sv – Swedish"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["nb – Norwegian Bokmål"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["da – Danish"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["th – Thai"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["uk – Ukrainian"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ro – Romanian"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["cs – Czech"]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To enable this functionality, pass the autoTranslate flag to Frontegg:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["JavaScript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"const localization: LocalizationsOverrides = {\n  // defaultLanguage: 'en' The default language is English, but it can be replaced with any of the language from the above list\n  autoTranslate: {\n    enabled: true;\n  }\n};\n","lang":"JavaScript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For applications using Frontegg's hosted login, follow the instructions ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/sdks/customizations/configuration-old#customization-in-the-hosted-mode"},"children":["here"]}," to pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["metadataOverrides"]}," and enable the required flag."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For those implementing embedded login, refer to the prerequisite versions listed below."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Prerequisites","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Note that the following versions are required to use the feature:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["@frontegg/react@7.9.0",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/angular@7.16.0",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/vue@4.8.0",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/nextjs@9.2.6",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/js@7.76.0"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"localizations-object","__idx":7},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localizations"]},"  object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localizations"]}," object is structured in a way that the outermost layer includes the key indicating the language. For example, for English, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["en"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Within the  language key object, you will include your  ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["adminPortal"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]}," objects— and within these objects, you will indicate the customization you need."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use more than one language key to customize the text in multiple languages. Here's an example with two language keys where each key has sections for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["adminPortal"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loginBox"]},"."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const localizations = {\n    en: {\n      adminPortal: {\n        // Your code here,\n      },\n      loginBox: {\n        // Your code here,\n      },\n    },\n    es: {\n      adminPortal: {\n        // Your code here,\n      },\n      loginBox: {\n        // Your code here,\n      },\n    },\n  };\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"hosted-vs-embedded-login-customization","__idx":8},"children":["Hosted vs. embedded login customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Depending on whether you are using the hosted or the embedded method, if you wish to use styles or localizations that are not part of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/guides/login-box/intro"},"children":["Frontegg Builder"]},", you will need to integrate the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeOptions"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localizations"]}," objects into your code."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the hosted method, you will need to use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["metadataOverrides"]}," to setup your server URL where you will be serving the additional styles and text changes so Frontegg could access them and serve on your Hosted login page."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For both Hosted and Embedded methods, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeOptions"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localizations"]}," objects that can be passed, have the same structure. Please see the detailed instructions in ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/sdks/customizations/configuration-old"},"children":["Hosted and Embedded setup guide"]},"."]}]},"headings":[{"value":"Frontegg login and self-service customization options","id":"frontegg-login-and-self-service-customization-options","depth":2},{"value":"General attributes","id":"general-attributes","depth":3},{"value":"Styling architecture","id":"styling-architecture","depth":3},{"value":"Interactive styling code samples","id":"interactive-styling-code-samples","depth":3},{"value":"themeOptions Object","id":"themeoptions-object","depth":4},{"value":"Localizations architecture","id":"localizations-architecture","depth":3},{"value":"Auto-translation for authentication screens and self-service","id":"auto-translation-for-authentication-screens-and-self-service","depth":4},{"value":"localizations object","id":"localizations-object","depth":4},{"value":"Hosted vs. embedded login customization","id":"hosted-vs-embedded-login-customization","depth":2}],"frontmatter":{"excludeFromSearch":true,"seo":{"title":"Frontegg login and self-service customization options"}},"lastModified":"2025-12-03T15:51:17.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ciam/sdks/customizations/overview-old","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}