Adding Support for Extra Languages

There are currenly 30 languages supported by default (see list below). If a language you want to support is not in the list, this section will explain how to manually add it.

ar - Arabic
ca - Catalan
cs - Czech
da - Danish
de - German
el - Greek
en - English
es - Spanish
fa - Persian (Farsi)
fi - Finnish
fr - French
hu - Hungarian
it - Italian
ja - Japanese
ka - Georgian
lt - Lithuanian
lv - Latvian
nl - Dutch
no - Norwegian
pl - Polish
pt-BR - Portuguese (Brazilian)
pt - Portuguese
ru - Russian
sk - Slovak
sv - Swedish
th - Thai
tr - Turkish
uk - Ukrainian
zh-CN - Chinese (Simplified)
zh-TW - Chinese (Traditional)

You're language is not in the list? Let's see how to add it and enable it in the Keycloak Admin UI.

In this example we're going to add Hindi (hi).

To acheive this first step is to create a TypeScript file containing Hindi translation of all the default message keys. I sugest creating this file as src/login/i18n.hi.ts but it can be located anywhere under your src directory.

src/login/i18n.hi.ts

import type { MessageKey_defaultSet } from "keycloakify/login or keycloakify/accont";

const messages: Record<MessageKey_defaultSet, string> = {
    // cspell: disable
    doLogIn: "साइन इन करें",
    doRegister: "रजिस्टर करें",
    doRegisterSecurityKey: "रजिस्टर करें",
    // ... translation for all the other default messages
    // cspell: enable
};

export default messages;

Wait before panicking realizing that there are hundreds of message keys. ChatGPT can do this for you!

Just take the English translation of the message a reference and ask it to translate for you (you'll have to press continue several times).

You can find the English translations in your repo at:

node_modules/keycloakify/src/login/i18n/messages_defaultSet/en.ts

Do not customize the translations messages to fit your usecase!

This is not the place to do it. Theses translation should be as generic as they can be.

Next step is to index the translation file that you have created, edit the src/login/i18n.ts file as follow:

src/login/i18n.ts

import { i18nBuilder } from "keycloakify/login or keycloakify/account";
import type { ThemeName } from "../kc.gen";

/** @see: https://docs.keycloakify.dev/i18n */
const { useI18n, ofTypeI18n } = i18nBuilder
    .withThemeName<ThemeName>()
    .withExtraLanguages({
        hi: {
            // cspell: disable-next-line
            label: "हिन्दी",
            getMessages: () => import("./i18n.hi")
        }
    })
    .build();

type I18n = typeof ofTypeI18n;

export { useI18n, type I18n };

That's it! Now, you should be able to enable Hindi in the Account Console of the Keycloak where your theme is loaded.

Last updated 4 months ago

Was this helpful?

import type { MessageKey_defaultSet } from "keycloakify/login or keycloakify/accont"; const messages: Record<MessageKey_defaultSet, string> = { // cspell: disable doLogIn: "साइन इन करें", doRegister: "रजिस्टर करें", doRegisterSecurityKey: "रजिस्टर करें", // ... translation for all the other default messages // cspell: enable }; export default messages;

import { i18nBuilder } from "keycloakify/login or keycloakify/account"; import type { ThemeName } from "../kc.gen"; /** @see: https://docs.keycloakify.dev/i18n */ const { useI18n, ofTypeI18n } = i18nBuilder .withThemeName<ThemeName>() .withExtraLanguages({ hi: { // cspell: disable-next-line label: "हिन्दी", getMessages: () => import("./i18n.hi") } }) .build(); type I18n = typeof ofTypeI18n; export { useI18n, type I18n };