Localizations
Overview
The Frontegg components have text throughout. The text is for all types of things, like titles, labels, input placeholders, alerts, and more.
This guide provides examples of how to customize the text content of your Frontegg components.
Note:
If you are using Frontegg hosted login, this guide will be relevant only for changing the texts of your admin portal.
Getting Started
By using the localizations
initiation attribute, you can customize the text that appears in your Frontegg components. For instance, you can set custom button text, add custom input placeholders, write your own input labels, display custom error messages, and more.
Set the values for your custom text by creating a localizations
object containing text content for the parts you want to customize. Pass that object as an attribute into your FronteggProvider
at initialization.
Your localizations object does not need to add values for all available keys. Just the ones you want to customize.
In order to implement language switching, follow the example below, for French:
window.localStorage.setItem('frontegg-language',"fr")
Integration
First, let's integrate the localizations
object into your code.
When integrating the Frontegg Provider, pass themeOptions
as an initialization attribute. The value for localizations
needs to be an object containing your custom content.
Localizations In The Code Editor
If you are using typescript, the interface for the localization options is exposed and you can easily import it to see what options are available.
import { LocalizationsOverrides } from '@frontegg/types';
If you are not using typescript, look in the frontegg package for the
frontegg/types/Localizations
folder to see the style options.
Here is a simple example that sets the text of the login form email input label.
import { FronteggProvider, LocalizationsOverrides } from "@frontegg/react";
const contextOptions = {
baseUrl: "https://your-application.frontegg.com",
};
const localizations: LocalizationsOverrides = {...};
ReactDOM.render(
<FronteggProvider
contextOptions={contextOptions}
localizations={localizations}
>
<App />
</FronteggProvider>,
document.getElementById("root")
);
Read below to find out what options are available and to see some examples.
Localizations Object
The outermost key in the localizations object is for language. For instance, for English the key is en
.
Within each language key is an object with keys for the adminPortal
and loginBox
. Within each of those objects are options to customize text within.
Use more than one language key to customize text in multiple language. Here is an example with two language keys where each key has sections for the adminPortal
and loginBox
.
const localizations = {
en: {
adminPortal: {
// Your code here,
},
loginBox: {
// Your code here,
},
},
es: {
adminPortal: {
// Your code here,
},
loginBox: {
// Your code here,
},
},
};
Many opportunities exist to customize text within your Admin Portal and Login Box. Read below to learn more.
Login Box Options
To help jumpstart your understanding of the code interface, this section explains how use the code interface to write your localizations
object.
The structure of the folders and files are organized to mirror the structure of the localizations
object.
The next level of keys in the object are adminPortal
and loginBox
, and the name of the two subfolders in the Localizations folder are AdminPortalLocalizations
and LoginBoxLocalizations
.
In the LoginBoxLocalizations
and AdminPortalLocalizations
subfolders and files. Each file corresponds to a key in the localizations
object. You can find the name of the key for that file inside the file:
Here is an example of how to customize the login email input label:
In your localizations
object inside the loginBox
object, use the login
key, and find the relevant key describing the text you are looking to change:
const localizations = {
en: {
loginBox: {
login: {
emailInputLabel: "My Email Input"
},
},
},
};
Here is what the code above looks like in login page:

To build on this example, Let's also change the sign up email input label text.
const localizations = {
en: {
loginBox: {
login: {
emailInputLabel: "My Email Input"
},
signup: {
account: {
title: "Welcome to Frontegg!",
}
},
},
},
};
Here is what the code above looks like in sign up page:

Sign up types
Notice that you will be able to localize the account and the user sign-up form separately. Account sign-up is used to create a new tenant, and user sign-up is used for a user that was invited to sign up to a specific tenant by an invite link.
You can follow the same approach to customize any of the options in the frontegg/types/Localizations
folder.
Here are some examples of popular and practical use cases for customizing text.
Social Login Button Text
Set the text of your social login buttons. In localizations
--> loginBox
--> socialLogins
, you can set custom text for the social login buttons.
Here is an example of the options with explanations:
const localizations = {
en: {
loginBox: {
socialLogins: {
/**
* Text to be display in socialLogin buttons prior to the provider name,
* if rendering inside login section and being set to the main social button
* Example: 'Continue with'
*/
socialloginMainButtonTextPrefix: "Sign in with ",
}
},
},
};
Here is what the code above looks like:

You can also remove the text completely by providing it with an empty string.
const localizations = {
en: {
loginBox: {
socialLogins: {
/**
* Text to be display in socialLogin buttons prior to the provider name,
* if rendering inside login section and being set to the main social button
* Example: 'Continue with'
*/
socialloginMainButtonTextPrefix: "",
}
},
},
};

**** form here needs to still update
Submit Button Text
Set the text of you submit buttons. In various subsections within the loginBox
section of your localizations
object, you can set custom text for the submit buttons. You have several options based on the context and subsection.
Here is an example of two options with explanations within the login and signup subsections:
const localizations = {
en: {
loginBox: {
login: {
/**
* Login page submit button if passwordless, sso or magicLink is enabled
*/
continue: "My Submit button",
}
},
},
};
Here is what the code above looks like on the login page:

Login-Signup Text
Set the text in your Login Box where it asks the user to change from the login page to the signup page and vice versa.
In the loginBox
section of your localizations
object, in the login
section you can set custom text on the login page for the signup message and button. In the signup
section, you can set custom text on the signup page for the login message and button.
Here is an example of label options with explanations:
const localizations = {
en: {
loginBox: {
login: {
/**
* Go to signup message in Login page header
*/
signUpMessage: "Do you want to signup for Acme? ",
/**
* Go to signup link button text in Login page header
*/
signUpLink: "Signup free!",
},
signup: {
account: {
/**
* Go to login message in signup page header
*/
loginMessage: "Do you want to login to your Acme account? ",
/**
* Go to login link button text in signup page header
*/
loginLink: "Login here!",
},
},
},
},
};
Here is what the code above looks like on the login page:

Here is what the code above looks like on the signup page:

Input Placeholders
Set the text for your input placeholders in your Admin Portal and Login Box.
In the adminPortal
and loginBox
sections of your localizations
object, you can set custom text for the input placeholders.
Here are just a few examples of customizing input placeholders with explanations:
const localizations = {
en: {
loginBox: {
login: {
/**
* String displayed as placeholder when email field is empty
*/
emailInputPlaceholder: "Your email for Acme login",
/**
* String displayed as placeholder when password field is empty
*/
passwordInputPlaceholder: "Your Acme login password",
/**
* Recover Code input placeholder in MFA recovery section
*/
enterRecoveryCode: "Acme Recovery Code",
/**
* Otc input placeholder
*/
otcInputPlaceholder: "Acme OTC",
/**
* Force MFA section input placeholder
*/
forceMfaInputPlaceholder: "MFA Input Acme",
},
},
},
};
Admin Portal Options
Admin Portal Navigation
Customize the navigation text in your Admin Portal. By default, the navigation looks something like the left sidebar in the image below:

Here is an example that changes the text for Profile, Account Security, and Users:
const localizations = {
en: {
adminPortal: {
navigation: {
/**
* Profile navigation item text
*/
profile: "Acme Profile",
/**
* Privacy navigation item text
*/
privacy: "Acme Security",
/**
* Users navigation item text
*/
users: "My Users",
},
},
},
};
Here is the result:

Admin Portal Pages
Customize the text within the different pages of your Admin Portal. For instance, customize the page or dialog title, column titles in tables, and more.
It is easy to find the options available for customizing text within each Admin Portal pages.
For instance, on the Users page, you can customize the names of the labels in the users table. Here is a simple example.
To change the titles in the table here is a sample code:
const localizations = {
en: {
adminPortal: {
users: {
userHeader: "Acme User",
rolesHeader: "Acme Roles",
joinedHeader: "Joined Acme",
lastSeenHeader: "Visited Acme",
},
},
},
};
Here is the Admin Portal Users page with the table titles updated:

Updated 5 months ago