Why are kc_locale and UI lang switch not working?

Question

A test-web application links to the keycloak reset-credentials page:

http://localhost:9990/auth/realms/test/login-actions/reset-credentials?client_id=test-web&kc_locale=en

We use the default keycloak theme and run on the Keycloak docker image 11.0.2.

The UI works fine, but the kc_locale is not respected and also the UI language switch on the keycloak page does not work. The UI switch does update the kc_locale in the URL but the UI keeps showing the same language. There are 2 languages configured for the realm (de and en). No matter which of them I set as default, the UI always shows de.

In the account console the language switch as well as the kc_locale both actually change the language. But on the reset-credentials page it is not working.

After following the link of the email to the update-password page, on this page the UI switch and kc_locale work fine.

http://localhost:9990/auth/realms/test/login-actions/required-action?execution=UPDATE_PASSWORD&client_id=test-web&tab_id=fZIAUd_jiPc

After changing the language via the Account Console or on the update-password page, the reset-credentials page also shows the newly selected language, but the lang-switch on the page itself does not work.

What could be the reason for it?

Answer 1

Seems that there is an issue in keycloak server since version 9: https://keycloak.discourse.group/t/keycloak-11-0-3-does-not-respect-kc-locale-parameter/6529

Which may be caused by changes introduced with https://issues.redhat.com/browse/KEYCLOAK-9632

The locale selection mechanism has been reworked in that cause, however probably breaking the original selection mechanism.

Answer 2

I’ve gone through the versions to find out when this behavior changed. 8.0.2 respects the query parameters, but 9.0.0 till 14.0.0 don’t.

I did a workaround that fixed this issue at template.ftl

<a class="${properties.kcLocaleItemClass!}" href="${l.url}">${l.label} </a>

instead of changing the href to l.locale i added onClick event and then passed a function that sets a cookie for the selected language before changing href to l.url

<li class="kc-dropdown-item"><a tabindex="0" onclick="changeLocale(`${l.label}`, `${l.url}`)">${l.label}</a></li>

function changeLocale(label, url) {
if (label == ‘English’) {
document.cookie = “KEYCLOAK_LOCALE=en”;
} else {
document.cookie = “KEYCLOAK_LOCALE=fr”;
}
window.location.href = url
}