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: