Yes, in the current version it builds two jar. One for keycloak-22-to-25 and one for all the other version including keycloak 26. See: docs.keycloakify.dev/targeting-specific-keycloak-versions

If you see the video after the 30s mark, he mentions the "all-other-versions" jar file is also for kc 26.

@@tobiasmika7943 Please join the Keycloakify discord server and add more context about your issue like the version of keycloak you are running and the log of the error

@@noroinovideo5596 yes, that’s a good start. You have to eject the UserProfileFormFields.tsx, look toward the end of the video

Hello, This is a very old video, you can watch this one for a more up to date overview: kzbin.info/www/bejne/hpmxdmBpetyqhposi=-LuDM-q-Lpc6Pxvs If you want to have a different layout you have to eject the Template.tsx that is the frame common to every page and implement the desired look. If you go for that I recommend setting doUseDefaultCss to false because otherwise you'll have to fight to much with de default styles: docs.keycloakify.dev/customization-strategies/css-level-customization/removing-the-default-styles

Join the discord :)

Sure just run `yarn build-keycloak-theme` github.com/keycloakify/keycloakify-starter?tab=readme-ov-file#building-the-theme docs.keycloakify.dev/importing-your-theme-in-keycloak

Thanks man!

Thanks. It works with all Keycloak version of the past three years. However, you shouldn't take this video as a standalone thing. If you're looking to make a keycloak account theme check this page first: docs.keycloakify.dev/account-theme If you're not familiar with Keycloakify yet start here: docs.keycloakify.dev/

You mean this page? storybook.keycloakify.dev/?path=/story/login-login-reset-password-ftl--default Or the page you are redirected to when you click on "update" my password? storybook.keycloakify.dev/?path=/story/login-login-update-password-ftl--default Anyway thoses two pages are from the LOGIN theme. You can learn more at: docs.keycloakify.dev/

@@josephgarronegj yeah that worked tried ejecting the page and edited it.

Thank you, I'm glad it worked for you. For reporting bugs the best is to open an issue on Github: github.com/keycloakify/keycloakify/issues/new And feel free to join the discord chanel as well: discord.gg/mJdYJSdcm4

In this video we use `@mui/icons-material` mui.com/material-ui/material-icons/

I think the best overview would be: kzbin.info/www/bejne/hJzSq2SfeZJ7haMsi=vbtzsudQaljKim3p I also have this one for CSS in JS: kzbin.info/www/bejne/rIOznXqLeZJ-rKc But as always the best way by far is to read through this documentation section: docs.keycloakify.dev/customization-strategies/css-level-customization

Hi there! To build the Keycloak theme, simply run the command `yarn build-keycloak-theme`. This will generate a .jar file in the dist_keycloak directory. You can then import this .jar file into Keycloak by following the instructions here: docs.keycloakify.dev/keycloak-configuration/importing-your-theme-in-keycloak. Please note that my videos are intended to complement the Keycloakify documentation and are not standalone tutorials. The most important details are provided as text content on the Keycloakify documentation website: docs.keycloakify.dev/. The videos focus on more advanced topics, which might explain why they seem to lack some key pieces of information.

@@josephgarronegj Thanks man. I will look into the documentation for further information. Yeah I can understand that u can't create videos for every basic stuff. Keep building new stuffs🎉

Thank you for your comment! At this point, I believe the documentation website (docs.keycloakify.dev) covers nearly everything a beginner needs to get started with Keycloakify. Anything beyond that would be more of a general web development tutorial rather than a specific Keycloakify guide. The challenge with creating tutorial videos is that they’re not easily editable once published. Additionally, there are countless ways to create a theme, from CSS level customizations using frameworks like Tailwind, Bootstrap, Sass, or just CSS. Some might even prefer CSS-in-JS solutions like Emotion or tss-react. On top of that, people might want to use component libraries such as MUI, Ant Design, or ShadCN/UI. The possibilities are endless, and it’s impossible to cover every technology out there. That’s precisely the strength of Keycloakify: you can use almost any tool or library you prefer. My focus has been on providing clear instructions on how the tool works, along with some simple examples to help users get started. Beyond that, it’s up to you to create something amazing with it! If you have specific questions, feel free to join our Discord channel: discord.gg/mJdYJSdcm4.

Hello there, What if i have to change the theme of Forgot password page? How can i do it? and how can modify the error messages and display it in custom placements and is it possible to use custom notification library to get that error or success message and use it?

@@mdumar1525 Yes you can use any library that you want with Keycloakify. The page you want to customize is login-reset-password: storybook.keycloakify.dev/?path=/story/login-login-reset-password-ftl--default As to how and when to display the custom notification it will depend on your flow and what you are trying to acheive.

@@josephgarronegj the problem i am facing is when i input my mail and the forget password form is submitted it is redirected to the login page with a success message in the template. I don't want the message to be displayed within the template. Lets say it is shown as an alert below the form. How can i achieve it? How can i stop it from showing in the template and use it somewhere else

@@mdumar1525 You can overwrite the default behavior of the form by implementing a <form onSubmit={()=> ... } >. Here you would manually use fetch() to send the post request and if you get a sucess response HTTP code you can display your message on the page.

Hello, You can refer to the documentation, it is meant as a tutorial: docs.keycloakify.dev/ If you want some video you can checkout: kzbin.info/www/bejne/hJzSq2SfeZJ7haM kzbin.info/www/bejne/hpmxdmBpetyqhpo But I recommend reading through the documentation, these video are just part of the Keycloakify documentation and aren't realy meant to be consumed as standalone content.

There is now a video on how to create an SPA account theme from scratch: kzbin.info/www/bejne/hnSxlWaEqNRko7s

@@josephgarronegj Thanks. Really Appreciate it

Thank you very much! I’m glad you found it understandable!

Thank you for sharing! While I’m not sure about making a full tutorial, a template might be more suitable for this purpose. However, I have a lot of work to do at the framework level before I can dedicate time to creating templates. My main priority is to equip the community with the tools they need to create what they want, rather than focusing on creating the content myself.

Currently implementing something similar and my 2c on this, largely because of this video (and if you are using react + mui): I found doing the initial username page on the react app to be much simpler, since the app itself is already hooked up to the database (therefore, no extra config needed) and then passing the username to keycloak for login as a url param, which autofills the username input box. I havent done it yet but I am pretty confident that replacing the username input box with a text field showing the populated username isnt going to be too hard. The good part here is that, because this page also uses react mui, if there isnt too much customization done to the react components on your app, it is easy to make the 2 pages look kinda identical. As I type this out, i realize this was 2 week ago and you mustve already found a workaround for it so curious as to what you ended up doing!

@@rainman400 Doing the work ahead of the theme and passing the values as query params to be pre-filled is pretty smart. Be carfull though about the possible validation issues. The validation rules are defined on the keycloak server and unless you pull them in your app you might be sending invalid values to be pre filled. There are also things that only keycloak can know and that can't be validated in realtime like "Is there alreader an user with this username?" What I found easyer is to call my API from the theme if I need extra information. For example in this app: code.gouv.fr/sill If you go to "sign in" -> "no account yet" -> "organization" you can see that as you type there is a dynamical autocomplete. Also note that I have made anoter video on the customization of the Register page: kzbin.info/www/bejne/on6yfaWaps6fp6csi=B3E6Y8VQgm5AgM0y There might be interesting information there like for example using attributes groups for implementing multi step registration that can be configured at the Keycloak level and not hard coded into the theme.

@@josephgarronegj Like I said, GOATed. I was not aware that there is already an example for calling an external API, i will surely check it out. I guess it depends on the way registration is done and I should have clarified that. I am doing the registration in my app through our front end and then proceeding to have the backend create a user in keycloak. So the username validation is also done through that endpoint. It is a little bit of duplication of data but also it helps with other things in the app

docs.keycloakify.dev/environment-variables@@rainman400 The code is here if you want to check it out: github.com/codegouvfr/sill/blob/85bc1ef65195299071700aa7f7d7550901d2632a/web/src/keycloak-theme/login/pages/shared/UserProfileFormFields.tsx#L43-L70 It's still using an older Keycloakify version though. If you are consuming an API there are two way to provide the url to the API (assuming you don't want to hardcode it): The first one is to define it as an environement variable: docs.keycloakify.dev/environment-variables And the second one is to pass it as url query parameter when you redirect to your login page: docs.keycloakify.dev/passing-url-parameters-when-redirecting-to-your-theme But be aware if you use this approach that if it's not your app that is sending you the user you won't have the API URL. Also, you should persiste the query url in the session storage or it will be lost navigating from the login to the register page for example.

Thank you very much!

Merci, avec plaisir!

Hello. What do you mean in system? You can configure the file that declares your variables

@@josephgarronegj for instance, when you use azure app service, it will make all the env variabkes and configs available as env variables, then any process can read it. Can I do thesame in vite?

@@josephgarronegj I think what he means (because I have the same question) is in the actual environment (cotnainer env) not in a file. I think the answer is @03:00, so it simply works, but you also have to define the variables in .env file?

@@complexxl9 yes otherwise it would be a massive security vulnerability. You don’t want to risk accidentally exposing sensitive env variables to the world

@complexxl9 Yes, you need to declare the variable in the `.env` file for three key reasons: 1) **Security**: You want to avoid exposing potentially sensitive environment variables from your container to the public. Explicitly declaring which environment variables should be bundled with your website ensures better security. 2) **Default Values**: Declaring variables allows you to set default values in case some variables are not defined on the server. 3) **TypeScript Support**: By declaring the variables, TypeScript can recognize them in `import.meta.env`, providing autocompletion and throwing errors if you try to use an undeclared variable.

what if people use it to make phishing websites?

​@@5igi06 Scammers typically don’t go through the trouble of fully recreating a web app. Instead, they copy an existing website and make minimal changes to text and links, as it requires far less effort.

Sure! The all point of keycloakify is to enable you to dev your Keycloak theme like you would any other React App. So of course you can use tailwind or whatever you see fit. To get started just clone the starter repo and start adding the lib of your stack. Don’t hesitate to reach out to us on Discord if you need further assistance

Congratulation! What's your gammer tag?

The probmem is tutorial video is that they become legacy very quicly. I want to be able to makes changes on the project without having to worry about having to re-shoot the video. I made this short one for two reason: - It's UI related, when you have to navigate a GUI it's better to show than tell. - I want pepoles to see that it actually works and that the project is actually about what they think it's about. But please suggest your favourites tech youtuber to make a Keycloakify tutorial video. I thik there is potential to make a substential amount of views.

Hi, There is no video but there is comprehensive documentation and examples. keycloakify.dev

But please suggest your favourites tech youtuber to make a Keycloakify tutorial video. I thik there is the potential to make a substential amount of views.

@@josephgarronegj I think the OP is asking how to build the project. You start by running "./build_keycloak/start_keycloak_testing_container.sh" but there's no explanation on how to build that directory and file.

For anyone wondering, you need to run "yarn build-keycloak-theme" before following this video

@@roristumpf9373 Ok I get it. All the commands are listed in the Readme of the starter project: github.com/keycloakify/keycloakify-starter?tab=readme-ov-file#quick-start By the way this video was more like a demo of the Account theme feature but it's not meant at being a starting point. Best is to follow the instructions in the README of the starter.

As I said in the pinned comment and the description, I recorded this video very earl on, if you want to learn how to use Keycloakify heads over to the official website www.keycloakify.dev/

But the official docs also not clear, i don’t understand Where i install react App inside a keycloack container and then i run keycloakify ?

Please what’s the steps to install it ?

@@rohb6552 Keycloakify generates a .jar file. That's your theme. You just ned to load it in Keycloak. There are instructions printed on the console on how to proceed after you run 'yarn keycloak'. If you don't understand the doc itself you can try playing around with the starter project. GitHub.com/garronej/keycloakify-starter Please read the README. If after reading the instructions you still have issues feel free to open a support ticket on GitHub I'll be happy to help.