GitHub Home Storybook Starter Template Alternative to keycloak-js

Using Keycloakify I18N

Last updated 2 days ago

This documentation explains how i18n works in the Login theme. In the Account Multi-Page theme, everything works the same as in the Login theme. You just need to replace /login/ by /account/ in the import paths.

In the Account Single-Page theme, things works differently. See relevent doc.

If you eject some pages, you'll see in your component how the internationalization is actually implemented:

src/login/Register.tsx

export default function Register(props: RegisterProps) {
    const { i18n } = props;
    
    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;

    return (
        <label htmlFor="username" className={kcClsx("kcLabelClass")}>
            { msg("username")}
        </label>
    );
}

<label
    for="username"
    [kcClass]="'kcLabelClass'"
>
    {{ i18n.msgStr('username') }}
</label>

Displaying messages that contain HTML

If you want to see the base message translations you can navigate to the node_modules/keycloakify/src/login/i18n/messages_defaultSet/ directory. As you can see, the value translation for the key errorTitleHtml in English (en.ts) is:

errorTitleHtml: We are <strong>sorry</strong> ...

How can we display this key while also applying the mark-up?

If you want to display this message you can call msg("errorTitleHtml") This method returns a JSX.Eement. The resulting DOM tree looks like this:

<div data-kc-msg="backToLogin">
    We are <strong>sorry</strong> ...
</div>

The data-kc-msg attribute is only here to help you find the source code that generates this node when inspecting with the browser dev tools. Note also that the text that is going to be rendered is:

We are sorry ... (with sorry in bold)

In Angular you need to use the kcSanitize function and bind the message as an innerHTML to render the element:

    <p
        [innerHTML]="i18n.msgStr('errorTitleHtml') | kcSanitize: 'html'"
    ></p>