This article provides example code for modifying the custom Okta Sign In Widget (self-hosted or Okta-hosted) so that the labels for custom profile attributes in the Profile Enrollment form are translated or localized based on the user's language.

• Okta-Hosted Custom Sign-In Widget (custom domain required)
• Self-Hosted Sign-In Widget
• Profile Enrollment [Okta Identity Engine only]
• Custom profile attributes
• Okta Identity Engine (OIE)

Only the base Okta Profile attributes (for example, Email, First Name, Last Name) are automatically translated in the widget when users are prompted for them during Profile Enrollment. Any custom attributes captured during enrollment will, by default, be labeled with the "Form label" configured in the Profile Enrollment policy, regardless of the end-user's language.

While the widget does not automatically translate these custom attribute labels, registration.parseSchema can be used within custom widget code to accomplish this.

In the sample code below, the label for the "Favorite Ice Cream" attribute will be modified when the widget is loaded in English, French, or Spanish, but similar customizations can be completed for additional attributes or languages with the same approach:

config.registration = {
            parseSchema: (schema, onSuccess) => {
                for (let x=0; x<schema.length;x++){
                    let attribute = schema[x]
                    if (attribute.name == "userProfile.FavoriteIceCream"){
                        switch (config.language){
                            case "en":
                                attribute.label = 'What is your favorite Ice Cream Flavor?'
                                break;
                            case "fr":
                                attribute.label = "Quelle est votre glace préférée?"
                                break;
                            case "es":
                                attribute.label = "¿Cuál es tu helado favorito?"
                                break;
                        }
                    }
                }
                onSuccess(schema);
                }
        }

NOTE: To customize the already localized labels for any of the base profile attributes (for example, Last name, Postal code, Department), set the values for the i18n keys (each of which begins with oie.user.profile. followed by the attribute name, see login.properties  for the full list). Sample code for i18n customizations can be found in the Updates to widget i18n properties documentation.