Support My Video: "Why Customize Keycloak Themes with Keycloakify?" 🎥🚀

[nima70]

I hope you're all doing well. I've recently created a YouTube video showcasing the power of Keycloakify for customizing Keycloak themes, and I’d love to get your support in sharing it with others who could benefit from this amazing tool!

🔑 What’s the Video About? In the video, I cover why using Keycloakify makes customizing Keycloak themes faster and easier, compared to manual approaches with Freemaker and CSS. I believe this video can be a helpful resource for those just getting started with Keycloakify or looking for a more efficient way to handle their custom themes.

🎨 Video Link:
https://youtu.be/xmQ5ULhF1Dk

✨ How You Can Help: I’d be super grateful if you could:

Watch the video and share your thoughts! Any feedback is appreciated.
Share the video with others who might find it helpful.
Give it a like or leave a comment if you think it could help the community grow.
📚 Check Out My MindMeister Map: I’ve also created a MindMeister mindmap to summarize the concepts covered in the video. You can check it out here:
https://www.mindmeister.com/3420207844/keycloakify-security-by-nima-shokouhfar

👨‍💻 About Me:
I’m an active developer and Keycloakify enthusiast, currently working as a freelancer specializing in Keycloak, React, and Storybook. If anyone needs help with customization or has any questions about Keycloakify, feel free to reach out to me on Upwork:
https://www.upwork.com/freelancers/nimas12

Thanks in advance for your support! Together, we can make the Keycloakify community even stronger. 🙌

Looking forward to hearing your thoughts!

Best regards,
Nima Shokouhfar

[garronej]

That's great, @nima70!

Thanks a lot for sharing. I'll definitely share the video.
However, I suggest—if it's possible for you—to perform some editing by cutting the parts where your computer is loading, for example. You can easily do that using YouTube Studio or VN, a free and user-friendly video editing tool. It's the one I personally use for my videos.

The video is clear and well-documented. You say a lot of good things about the projects, and I really appreciate that.

One last recommendation—this isn't specific to your current video, but something to consider in general: I suggest using Vite instead of Webpack. Vite is much faster, you won't experience such long loading times with it. Additionally, Webpack’s setup tends to be more cumbersome.

The reason we support Webpack is to help existing projects integrate Keycloakify without having to migrate to Vite. But for new projects, Vite is the preferred option. Vite also provides a post-build option, which power users like yourself might want to leverage. Unfortunately, there's no equivalent for Webpack at the moment.

Anyway, thanks again for sharing this! Let me know your thoughts.

[nima70]

Nice ideas, thank you!
I will definitely give Vite a try.

By the way, I’ve added several new Storybooks to the starter kit and increased the test coverage. If you’re interested, I’d be happy to contribute them to the main repository. What do you think?

[garronej]

Absolutely, yes!
This is exactly the kind of contribution I’ve been hoping for.
My initial stories are far from ideal because I haven't had the time to dive into Keycloak and properly review the KcContext.

I’m forwarding you a message I prepared for another contributor who expressed interest but didn’t follow up:

--

Thank you for expressing your interest in contributing! I have a task in Keycloakify that is relatively straightforward but can make a big impact: improving the KcContext mocks and the default stories.

Currently, in the project’s Storybook, the community and I have created some stories to showcase components in different configurations. Here’s an example of the code behind one of the stories:

keycloakify/stories/login/pages/Register.stories.tsx

Lines 52 to 81 in 5502a74

	export const WithRestrictedToMITStudents: Story = {
	render: () => (
	<KcPageStory
	kcContext={{
	profile: {
	attributesByName: {
	email: {
	validators: {
	pattern: {
	pattern: "^[^@]+@([^.]+\\.)*((mit\\.edu)|(berkeley\\.edu))$",
	"error-message": "${profile.attributes.email.pattern.error}"
	}
	},
	annotations: {
	inputHelperTextBefore: "${profile.attributes.email.inputHelperTextBefore}"
	}
	}
	}
	},
	"x-keycloakify": {
	messages: {
	"profile.attributes.email.inputHelperTextBefore": "Please use your MIT or Berkeley email.",
	"profile.attributes.email.pattern.error":
	"This is not an MIT (<strong>@mit.edu</strong>) nor a Berkeley (<strong>@berkeley.edu</strong>) email."
	}
	}
	}}
	/>
	)
	};

And how it looks on the Storybook site:
https://storybook.keycloakify.dev/?path=/story/login-register-ftl--with-restricted-to-mit-students

However, there aren't enough stories to showcase all the possible variations of the pages, and many of the current ones use placeholder values.

Here’s what needs to be done:

1. Improve the base kcContext mocks to provide more realistic default values:
   kcContext mocks source

2. Enhance existing stories and add new ones in this directory:
   Story directory

Each story partially overrides the base kcContext mocks. To improve these, the goal is to avoid made-up values and instead spin up a real Keycloak instance. You can access the theme, open the developer tools, and extract the kcContext global object. This will allow you to use real values when creating new stories and improving the base mocks.
More details on how to set this up can be found here:
https://docs.keycloakify.dev/testing-your-theme/in-a-keycloak-docker-container

Feel free to reach out if you have any questions!

[nima70]

Great to hear that!
Adding new stories is not an issue at all.
As for the KcContext, I’ll need to look into it first to verify my understanding, but I think I can manage that.

I’ll most likely try this by next week. If I encounter any issues, I’ll reach out to you. Thanks!

[garronej]

fantastic @nima70, looking forward to reviewing your PR. Any improvement on this front would be very impactfull.

[nima70]

While improving the test coverage, I noticed something a bit strange. I don't believe this is the expected behavior. Should I go ahead and fix it.

Here is the updated storybook:

import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { createKcPageStory } from "../KcPageStory";

const { KcPageStory } = createKcPageStory({ pageId: "code.ftl" });

const meta = {
    title: "login/code.ftl",
    component: KcPageStory
} satisfies Meta<typeof KcPageStory>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
    render: () => <KcPageStory />
};
export const WithErrorCode: Story = {
    render: () => (
        <KcPageStory
            kcContext={{
                code: {
                    success: false,
                    error: "Failed to generate code"
                }
            }}
        />
    )
};
export const WithFrenchLanguage: Story = {
    render: () => (
        <KcPageStory
            kcContext={{
                locale: {
                    currentLanguageTag: "fr"
                },
                code: {
                    success: true,
                    code: "XYZ789"
                }
            }}
        />
    )
};
export const WithHtmlErrorMessage: Story = {
    render: () => (
        <KcPageStory
            kcContext={{
                code: {
                    success: false,
                    error: "Something went wrong. <a href='https://example.com'>Try again</a>"
                }
            }}
        />
    )
};

[nima70]

I think it should render this as HTML and not text:

[garronej]

good catch!

I should be something like:

<p
  id="error"
  dangerouslySetInnerHTML={{
      __html: kcSanitize(code.error)
   }}

[nima70]

Thanks for the feedback. I added this solution to my pull request:

import { getKcClsx } from "keycloakify/login/lib/kcClsx";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";
import { kcSanitize } from "keycloakify/lib/kcSanitize";

export default function Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>, I18n>) {
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

    const { kcClsx } = getKcClsx({
        doUseDefaultCss,
        classes
    });

    const { code } = kcContext;

    const { msg } = i18n;

    return (
        <Template
            kcContext={kcContext}
            i18n={i18n}
            doUseDefaultCss={doUseDefaultCss}
            classes={classes}
            headerNode={code.success ? msg("codeSuccessTitle") : msg("codeErrorTitle", code.error)}
        >
            <div id="kc-code">
                {code.success ? (
                    <>
                        <p>{msg("copyCodeInstruction")}</p>
                        <input id="code" className={kcClsx("kcTextareaClass")} defaultValue={code.code} />
                    </>
                ) : (
                    code.error && (
                        <p
                            id="error"
                            dangerouslySetInnerHTML={{
                                __html: kcSanitize(code.error)
                            }}
                        />
                    )
                )}
            </div>
        </Template>
    );
}