Selected locale is not taking into accoun in keycloak.v3 account theme

[jrpedrianes]

Before reporting an issue

• I have searched existing issues
• I have reproduced the issue with the latest nightly release

Area

account/ui

Describe the bug

When account3 feature and the declarative-user-profile feature is enabled, the keycloak.v3 account theme is configured and a locale attribute is created, if the user changes the "select locale" field, the UI remains in English instead of being rendered in the selected language as it is when using the keycloak.v2 account theme.

Version

22.0.4

Expected behavior

The UI pages must be rendered in the selected user locale.

Actual behavior

Always the page is rendered in English

How to Reproduce?

1. Start a keycloak server with declarative-user-profile and account3 enabled.
2. In a Realm, turn on 'User Profile Enabled` setting
3. Select the keycloak.v3 as Account theme for the selected Realm.
4. Create the following User attributes in the selected realm.

{
  "attributes": [
    {
      "displayName": "${username}",
      "name": "username",
      "permissions": {
        "edit": [
          "admin"
        ],
        "view": [
          "admin"
        ]
      },
      "validations": {
        "length": {
          "max": "255",
          "min": "3"
        },
        "up-username-not-idn-homograph": {},
        "username-prohibited-characters": {}
      }
    },
    {
      "displayName": "${email}",
      "name": "email",
      "permissions": {
        "edit": [
          "admin",
          "user"
        ],
        "view": [
          "admin",
          "user"
        ]
      },
      "required": {
        "roles": [
          "user"
        ]
      },
      "validations": {
        "email": {},
        "length": {
          "max": "255"
        }
      }
    },
    {
      "displayName": "${firstName}",
      "name": "firstName",
      "permissions": {
        "edit": [
          "admin",
          "user"
        ],
        "view": [
          "admin",
          "user"
        ]
      },
      "required": {
        "roles": [
          "user"
        ]
      },
      "validations": {
        "length": {
          "max": "255"
        },
        "person-name-prohibited-characters": {}
      }
    },
    {
      "displayName": "${lastName}",
      "name": "lastName",
      "permissions": {
        "edit": [
          "admin",
          "user"
        ],
        "view": [
          "admin",
          "user"
        ]
      },
      "required": {
        "roles": [
          "user"
        ]
      },
      "validations": {
        "length": {
          "max": "255"
        },
        "person-name-prohibited-characters": {}
      }
    },
    {
      "displayName": "${locale}",
      "name": "locale",
      "permissions": {
        "edit": [
          "admin",
          "user"
        ],
        "view": [
          "admin",
          "user"
        ]
      }
    }
  ]
}

5. Go to the realm account, ie: http://localhost:9080/realms/master/account
6. Try to change the locale. The locale is changed but the UI remains in English.

Anything else?

Reviewing the code a possible solution could be:

1. Create an 18next language detector to use the document language: https://github.com/keycloak/keycloak/blob/main/js/apps/account-ui/src/i18n.ts#L14

export const keycloakLanguageDetector: LanguageDetectorModule = {
  type: "languageDetector",

  detect(): string | undefined {
    return document.documentElement.lang;
  },
};

2. Register 'keycloakLanguageDetector' in 18n: https://github.com/keycloak/keycloak/blob/main/js/apps/account-ui/src/i18n.ts#L28

i18n.use(keycloakLanguageDetector);

3. Reload the UI if the locale is changed: https://github.com/keycloak/keycloak/blob/main/js/apps/account-ui/src/personal-info/PersonalInfo.tsx#L60

      const userLocale = user.attributes["locale"] && user.attributes["locale"][0];
      const currentLocale = keycloakLanguageDetector.detect();
      if (userLocale !== currentLocale) {
        setTimeout(() => window.location.reload(), 100);
      }

4. Modify the index.ftl to use the user locale: https://github.com/keycloak/keycloak/blob/main/js/apps/account-ui/pom.xml#L67

<replacement>
  <token>lang="en"</token>
  <value>lang="${locale}"</value>
</replacement>

With these changes, when the UI is loaded the HTML language is set as the user locale. Then this value is fetched by the i18next to load the corresponding files. If a user changes the default locale, then the UI is reloaded to detect the changes.

Another option could be use the KEYCLOAK_LOCALE cookie, but it is marked as httpOnly so we can't use it.

[ssilvert]

This is closely related to #23699. Assigning to @jonkoops.