Adding your Logo

Practical example of how to import custom assets in ejected components.

NOTE: You can very well change the logo using only CSS without having to ejecting the template. There's a demo in this video.

Let's say you want to put the logo of your company on every pages of the theme.

First you'd eject the Template:

npx keycloakify eject-page # Select login -> Template.tsx

This will create a src/login/Template.tsx file in your project.

Let's use this placeholder for the demo: logo.png and save it in src/login/assets/logo.png.

Now we can use the asset in our component:

src/login/Template.tsx

import logoPngUrl from "./assets/logo.png";
// ...
<div className={kcClsx("kcLoginClass")}>
    <div id="kc-header" className={kcClsx("kcHeaderClass")}>
        <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
            {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/}
            <img src={logoPngUrl} width={500}/>
        </div>
    </div>
    {/* ... */}

src/login/Template.svelte

<script lang="ts">
  import logoPngUrl from "./assets/logo.png";
  // ...
</script>

<div
  id="kc-header-wrapper"
  class={kcClsx('kcHeaderWrapperClass')}
>
  <!--{ msgStr('loginTitleHtml', realm.displayNameHtml) }-->
  <img src={logoPngUrl} width={500} />
</div>

src/login/template/template.component.ts

import logoPngUrl from '../assets/logo.png';

export class TemplateComponent extends ComponentReference {
  logoPngUrl = logoPngUrl;
  // ...

src/login/template/template.component.html

<img
  [src]="logoPngUrl"
  alt="logo"
  width="500"
/>

Result:

Optional: Updating the logo without re-building the theme

Some pepoles want to be able to "hot swipe" the asset in the Keycloak file system without having to re-build the theme and re-deploy it.

To ensure that the assets are located in a predictible location you would use the public/ directory.

Move the file to public/logo.png.

Then make an absolute import from your component:

It's important that you do not simply harcode src="/img/logo.png", or keycloakify won't be able to patch the URL for Keycloak. Use Vite's builtin import.meta.env.BASE_URL.

src/login/Template.tsx

<div className={kcClsx("kcLoginClass")}>
    <div id="kc-header" className={kcClsx("kcHeaderClass")}>
        <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
            {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/}
            <img src={`${import.meta.env.BASE_URL}img/logo.png`} width={500}/>
        </div>
    </div>
    {/* ... */}

Doing this is a good practice in any Vite project (not specially Keycloakify) since it ensure the correctness of your URLs even if you customize the "base" parameter in the your vite.config.ts. Writing "/img/logo.png" only works when base is "/" (which is the default)

It's important that you do not simply harcode src="/img/logo.png", or keycloakify won't be able to patch the URL for Keycloak. Use Vite's builtin import.meta.env.BASE_URL.

src/login/Template.svelte

<div
  id="kc-header-wrapper"
  class={kcClsx('kcHeaderWrapperClass')}
>
  <!--{ msgStr('loginTitleHtml', realm.displayNameHtml) }-->
  <img src={`${import.meta.env.BASE_URL}img/logo.png`} width={500} />
</div>

src/login/template/template.component.ts

export class TemplateComponent extends ComponentReference {
  BASE_URL = import.meta.env.BASE_URL;

src/login/template/template.component.html

<img
  [src]="BASE_URL + 'img/logo.png'"
  alt="logo"
  width="500"
/>

It's important that you do not simply harcode src="/img/logo.png", or keycloakify won't be able to patch the URL for Keycloak. Use PUBLIC_URL instead.

src/login/Template.tsx

import { PUBLIC_URL } from "keycloakify/PUBLIC_URL";

<div className={kcClsx("kcLoginClass")}>
    <div id="kc-header" className={kcClsx("kcHeaderClass")}>
        <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
            {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/}
            <img src={`${PUBLIC_URL}/img/logo.png`} width={500}/>
        </div>
    </div>
    {/* ... */}

NOTE: You can see PUBLIC_URL as an equivalent of process.env.PUBLIC_URL that will work inside and outside of Keycloak.

If you ever need to SSH into the Keycloak server and hot swipe the image you can find it at

/opt/keycloak/themes/<name of your theme>/login/resources/dist/img/logo.png

Last updated 2 days ago

import logoPngUrl from "./assets/logo.png"; // ... <div className={kcClsx("kcLoginClass")}> <div id="kc-header" className={kcClsx("kcHeaderClass")}> <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}> {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/} <img src={logoPngUrl} width={500}/> </div> </div> {/* ... */}

<script lang="ts"> import logoPngUrl from "./assets/logo.png"; // ... </script> <div id="kc-header-wrapper" class={kcClsx('kcHeaderWrapperClass')} >  <img src={logoPngUrl} width={500} /> </div>

<div className={kcClsx("kcLoginClass")}> <div id="kc-header" className={kcClsx("kcHeaderClass")}> <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}> {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/} <img src={`${import.meta.env.BASE_URL}img/logo.png`} width={500}/> </div> </div> {/* ... */}

import { PUBLIC_URL } from "keycloakify/PUBLIC_URL"; <div className={kcClsx("kcLoginClass")}> <div id="kc-header" className={kcClsx("kcHeaderClass")}> <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}> {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/} <img src={`${PUBLIC_URL}/img/logo.png`} width={500}/> </div> </div> {/* ... */}