When configuring the Okta Sign-in Widget for an org, it is possible to customize the labels of the various on-screen Widget elements. The default strings are stored in a Widget content file named login.properties as i18n entries for each supported language. To change the text of a label, update the Sign In Widget config to set the value for the desired i18n key to the desired text. For example: config.i18n.en["needhelp"] = "My New Need Help Text".

• Okta Identity Engine (OIE)
• Okta Classic Engine
• Okta Sign-in Widget
• Customization

How to modify the default text/labels in the Okta Sign-In Widget?

As described in the widget documentation, it is possible to override any of the properties set in login.properties to modify the text displayed in the widget. These properties can be overridden by specifying new values for them inside an i18n object in the Widget’s config section.

Configure Custom Labels for a Custom Hosted Sign-in Widget

Any label in the Widget can be modified by providing new values.

var config = {
    ...
    i18n: {
        en: {
            // Labels
            'primaryauth.title': 'ExampleApp Login',
            'primaryauth.username.placeholder': 'ExampleApp ID',
            'primaryauth.username.tooltip': 'Enter the ExampleApp ID',
            'primaryauth.password.placeholder': 'Password',
            'primaryauth.password.tooltip': 'Super secret password',
            // Errors
            'error.username.required': 'Please enter an ExampleApp ID',
            'error.password.required': 'Please enter a password',
            'errors.E0000004': 'Sign in failed!'
        }
    }
...
};

Configure Custom Labels for the Okta Hosted Sign-in Widget

Use the form fields on the left side of the page and the HTML editor together or separately to customize the sign-in page.

1. Go to Settings > Customization > Branding.
2. Click the Edit button next to the Sign-in page.
3. (Optional) Select the Okta Sign-In Widget Version on the Settings tab: This option allows leveraging or omitting specific sign-in page capabilities by specifying a particular version of the Okta Sign-In Widget. If unfamiliar with the Okta Sign-In Widget, Okta recommends selecting the highest Major Version and the latest Minor Version (default). For details on the Okta Sign-In Widget capabilities supported by major and minor versions, see this GitHub page.
   1. Click Edit.
   2. Click Save.
   3. Customize the sign-in page on the Page Design tab.

NOTE: Modifying these properties in the Okta-hosted widget modifies the existing Okta configuration (instead of creating a custom version, as would be done with a self-developed embedded custom sign-in page).

To avoid disrupting any other existing customizations on the Labels tab, it is recommended to make modifications as demonstrated below. The key here is the "if" statement, which allows custom code modifications to coexist with customizations from the Labels tab. Otherwise, the Labels tab config would be overwritten by the custom code var config.i18n from the previous example, resulting in only the customizations placed within that statement being applied.

<!--
    "OktaUtil" defines a global OktaUtil object
    that contains methods used to complete the Okta login flow.
-->
{{{OktaUtil}}}
    
var config = OktaUtil.getSignInWidgetConfig();
    
if (config.i18n.en){
    config.i18n.en["needhelp"] = "My New Need Help Text"
}
    
oktaSignIn.renderEl({ el: '#okta-login-container' },
    OktaUtil.completeLogin,
    function(error) {
        // Logs errors that occur when configuring the widget.
        // Remove or replace this with your own custom error handler.
        console.log(error.message, error);
    }
 );

Related References

• Style the sign-in page | Okta Developer
• L10N_ERROR while Customizing the Email Field Label Using the i18n Properties for the Sign Up Page