Custom Text Components
Customizing text components
The Frontegg components have text throughout. The text is for all types of things, like titles, labels, input placeholders, alerts, and more.
This guide teaches you how to customize the text content of your Frontegg components.
Getting Started
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.
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.
Admin Portal and Login Box Options
You have many places in the Frontegg components where you can customize text. So you can see it for yourself, Frontegg exposes the localization code interface. To help jumpstart your understanding of the code interface, this section explains how use the code interface to write your localizations
object.
In your installed Frontegg package, look in frontegg/types/Localizations
. It is a folder containing subfolders and files.
Localizations In The Code Editor
Your code editor might show all the options with captions explaining what each is for.
The structure of the folders and files are organized to mirror the structure of the localizations
object. The outermost key in the localizations
object is localizations
, and the name of the outermost folder is Localizations.
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 are 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.
In frontegg/types/Localizations/LoginBoxLocalizations/login.d.ts
is an object with a key of login
. Inside the login
object in the login file are your options for customizing text on the login page.
Here is an excerpt from the the login file:
export interface LoginLocalization {
/**
* strings in login page
*/
login: {
// Login page localizations listed here
};
}
In your localizations
object inside the loginBox
object, use the same login
key the you found in the login file and include any custom text using the keys you found in the login file's login
object:
const localizations = {
en: {
loginBox: {
login: {
// Your customizations here
},
},
},
};
To build on this example, add another key to the loginBox
. In frontegg/types/Localizations/LoginBoxLocalizations/signup.d.ts
is an object with a key of signup
. Inside the signup
object in the signup file are your options for customizing text on the signup page.
Here is an excerpt from the the signup file:
export interface LoginLocalization {
/**
* strings in signup page
*/
signup: {
// Signup page localizations listed here
};
}
In your 'localizationsobject, to customize text on both the login and signup pages, use the
login key and the 'signup
key. Include any custom text using the keys you found in the login file's login
object and the signup file's signup
object.
const localizations = {
en: {
loginBox: {
login: {
// Your customizations here
},
signup: {
// Your customizations here
},
},
},
};
You can follow the same approach to customize any of the options in the frontegg/types/Localizations
folder.
Object Integration
When integrating the Frontegg Provider, pass localizations
as an initialization attribute. The value for localizations
needs to be an object containing your custom content.
You do not need to provide values for all localizations
options. You can include in your localizations
object values for only the places you want to customize.
Here is a simple example:
const localizations = {
en: {
adminPortal: {
profile: {
informationTitle: "Acme",
},
},
loginBox: {
signup: {
nameInputPlaceholder: "Your Acme username",
emailInputLabel: "Acme Email",
emailInputPlaceholder: "Your Acme email",
},
},
},
};
<FronteggProvider contextOptions={contextOptions} localizations={localizations}>
<App />
</FronteggProvider>
In the example above, the code sets custom text in the Admin Portal and the Login Box. Specifically, in the Admin Portal's profile section, the code sets the information title. In the Login Box on the signup page, the code sets two placeholders and a label.
Examples
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 if rendering inside login section
* Ex: 'Continue with {{providerName}}'
*/
loginButtonText: "Login with Acme",
/**
* Text to be display in socialLogin buttons if rendering inside signup section
* Ex: 'Login with {{providerName}}'
*/
signupButtonText: "Signup with Acme",
/**
* Text to be display in socialLogin buttons if rendering inside activation section
* Ex: 'Sign up with {{providerName}}'
*/
activationButtonText: "Signup with Acme",
/**
* Error title if social login callback is invalid
*/
failedInvalidCallbackUrl: "Please try again.",
/**
* Back to login button text in social login invalid section
*/
failedBackToLogin: "Login with Acme",
},
},
},
};
The code above
The code sample above is from
frontegg/types/Localizations/LoginBoxLocalizations/socialLogins.d.ts
.
Here is what the code above looks like:
Submit Button Text
Set the text of your 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
*/
login: "Acme Login",
/**
* Login page submit button if passwordless, sso or magicLink is enabled
*/
continue: "Acme Login ->",
},
signup: {
/**
* Signup page submit button
*/
signupButtonText: "Signup",
},
},
},
};
The code above
The code in the sample above is from
frontegg/types/Localizations/LoginBoxLocalizations/login.d.ts
andfrontegg/types/Localizations/LoginBoxLocalizations/signup.d.ts
.Review those and other files within
frontegg/types/Localizations/LoginBoxLocalizations/
for more options. Searching for the wordbutton
in a file will help you find relevant results for buttons.
Here is what the code above looks like on the login page:
Login Label Texts
Set the text of the labels in your Login Box. In the loginBox
section of your localizations
object, you can set custom text for the input labels.
You have several options based on the context.
Here is an example of label options with explanations for both the login
and signup` sections.
const localizations = {
en: {
loginBox: {
login: {
/**
* Login email input label
*/
emailInputLabel: "Please enter your email",
/**
* Login password input label
*/
passwordInputLabel: "Please enter your password",
/**
* Login with MFA six digits input label If MFA is enabled
*/
mfaInputLabel: "Please enter your 6 digits",
/**
* Otc input label
*/
otcInputLabel: "OTC Login Here",
/**
* Force MFA section input label
*/
forceMfaInputLabel: "Force MFA Here",
},
signup: {
/**
* Signup name input label
*/
nameInputLabel: "Please enter your name",
/**
* Signup email input label
*/
emailInputLabel: "Please enter your email",
/**
* Signup password input label
*/
passwordInputLabel: "Please enter your password",
/**
* Signup company name input label
* this input is optional
*/
companyNameInputLabel: "Please enter your company name",
},
},
},
};
The code above
The code in the sample above is from
frontegg/types/Localizations/LoginBoxLocalizations/login.d.ts
andfrontegg/types/Localizations/LoginBoxLocalizations/signup.d.ts
.Review those and other files within
frontegg/types/Localizations/LoginBoxLocalizations/
for more options. Searching for the wordlabel
in a file will help you find relevant results.
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: {
/**
* 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!",
},
},
},
};
The code above
The code in the sample above is from
frontegg/types/Localizations/LoginBoxLocalizations/login.d.ts
andfrontegg/types/Localizations/LoginBoxLocalizations/signup.d.ts
.
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",
},
signup: {
/**
* Signup name input placeholder
*/
nameInputPlaceholder: "Your name for Acme account",
/**
* Signup email input placeholder
*/
emailInputPlaceholder: "Your email for Acme login",
/**
* Signup password input placeholder
*/
passwordInputPlaceholder: "A secure password for Acme login",
/**
* Signup company name input placeholder
* this input is optional
*/
companyNameInputPlaceholder: "Your company name with Acme",
},
},
},
};
The code above
The code sample above is from files within
frontegg/types/Localizations/LoginBoxLocalizations/
. Searching for the wordplaceholder
in the files will help you find relevant properties.
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:
Change the text of the navigation items in the sidebar. Your options for customizing navigation text are in frontegg/types/Localizations/AdminPortalLocalizations/navigation.d.ts
.
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 Subsections
Customize the text within the different subsections 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 subsection.
Generally, each subsection has its own file in frontegg/types/Localizations/AdminPortalLocalizations/
with a filename that corresponds to the section name. For instance, find the Privacy & Security text settings in the privacy.js
file and the Users text settings in the users.js
file.
In each file is an object containing the name of the subsection key and the options available for customizing. In the adminPortal
section of your localizations
object, add the subsection key with an object containing your custom text.
For instance, on the Users page, you can customize the names of the labels in the users table. Here is a simple example.
Here are the default table titles on the Users page:
To change the titles in the table, here is sample code:
const localizations = {
en: {
adminPortal: {
users: {
userHeader: "Acme User",
rolesHeader: "Acme Roles",
joinedHeader: "Joined Acme",
lastSeenHeader: "Visited Acme",
},
},
},
};
The code above
The code sample above is from
frontegg/types/Localizations/AdminPortalLocalizations/users.d.ts
. Review it to see what else you can customize about the Users page.
Here is the Admin Portal Users page with the table titles updated:
Updated 3 months ago