# 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.

1. ar - Arabic
2. ca - Catalan
3. cs - Czech
4. da - Danish
5. de - German
6. el - Greek
7. en - English
8. es - Spanish
9. fa - Persian (Farsi)
10. fi - Finnish
11. fr - French
12. hu - Hungarian
13. it - Italian
14. ja - Japanese
15. ka - Georgian
16. lt - Lithuanian
17. lv - Latvian
18. nl - Dutch
19. no - Norwegian
20. pl - Polish
21. pt-BR - Portuguese (Brazilian)
22. pt - Portuguese
23. ru - Russian
24. sk - Slovak
25. sv - Swedish
26. th - Thai
27. tr - Turkish
28. uk - Ukrainian
29. zh-CN - Chinese (Simplified)
30. 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).

<figure><img src="https://2643300760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4Ls5iTdfTS2xECgBfw90%2Fuploads%2Fgit-blob-31585221f63c7e0088692f4c0c5a13872a86d90d%2Fimage%20(12).png?alt=media" alt=""><figcaption><p>Hindi appear as a supported locales option in the Keycloak Account UI</p></figcaption></figure>

<figure><img src="https://2643300760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4Ls5iTdfTS2xECgBfw90%2Fuploads%2Fgit-blob-597f8b12035eb4ce1c89b48e25ff10d7a7b67531%2Fimage%20(13).png?alt=media" alt=""><figcaption><p>Hindi appear as an option in the language select dropdown</p></figcaption></figure>

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.

{% code title="src/login/i18n.hi.ts" lineNumbers="true" %}

```typescript
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;
```

{% endcode %}

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**

<figure><img src="https://2643300760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4Ls5iTdfTS2xECgBfw90%2Fuploads%2Fgit-blob-dc8bb1797a4d9881cae9763b0bef4d2a6aec82f8%2Fimage%20(14).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
**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.

This process is just a temporary sollution until Keycloak add support for your language, you should be prepared to to delete the file as soon as it's no longer nessesary.\
For customizing the translation messages and adding your custom messages see [this section](https://docs.keycloakify.dev/features/i18n/adding-new-translation-messages-or-changing-the-default-ones).
{% endhint %}

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

<pre class="language-typescript" data-title="src/login/i18n.ts"><code class="lang-typescript">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&#x3C;ThemeName>()
<strong>    .withExtraLanguages({
</strong><strong>        hi: {
</strong><strong>            // cspell: disable-next-line
</strong><strong>            label: "हिन्दी",
</strong><strong>            getMessages: () => import("./i18n.hi")
</strong><strong>        }
</strong><strong>    })
</strong>    .build();

type I18n = typeof ofTypeI18n;

export { useI18n, type I18n };
</code></pre>

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