Creating a Keycloak theme with MUI

[@alinikpey5797]

You are great man , you support and navigate people who are using keycloakify, in a really nice way.

[@josephgarronegj]

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

[@endelight]

Awesome tutorial Thank you so much.

[@rainman400]

The GOAT for sure. Super simple and easy to use

[@josephgarronegj]

Thanks man!

[@rohit87k]

As always with amazing content and appreciate your effort on this you deserve more subs and likes :-) ♥

[@josephgarronegj]

Thank you very much!

[@DamarisManzano-s2s]

Thank you, this was very helpful 🙂

[@josephgarronegj]

Thank you for your comment! Just be aware that if you cloned the starter today there’s a bug in keycloakify that I just fixed. You might want to update to the latest keycloakify version 😄

[@andreshaabu6763]

Thank you, you've been a great help!

[@mdumar1525]

Thats awesome man. Exactly what i was looking for. Great video🎉 Can you make a video on customizing using only css?

[@josephgarronegj]

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

[@hiteshrohilla]

npx keycloakify add-story sh: keycloakify: command not found

[@josephgarronegj]

@@hiteshrohilla impossible. Look the error message again

[@mayoniaise5169]

Merci, super utile !

[@josephgarronegj]

Merci, avec plaisir!

[@ashen_madhusanka]

thanks. very helpful

[@rohit87k]

I am just curious to know have you making a tutorial about the split login screen like - 1screen having only email with verifying the email exist on the database and then 2nd screen having the password screen ? - remember i have shared with you on the linkedin message

[@josephgarronegj]

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.

[@rainman400]

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!

[@josephgarronegj]

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

[@rainman400]

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

[@josephgarronegj]

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.

[@nima.shokouhfar]

Great video...!!!

[@scottamolinari]

Thanks for this. I just have one question. The error text for the password error isn't showing up. Is that just an oversight?

[@josephgarronegj]

Hello, I'm not sure what you're reffering to. Please open a an issue on the GitHub repo including more details.

[@rafalef]

thanks! will watch soon!

[@jschmucke]

nice tutorial, hot to with shadcn/ui and react-icons 😅

[@tobiasmika7943]

Hi, please assist. I created my custom theme then build the .jar file and install it on my keycloak server because on docker when i tested it it was working. But on my production server it gives out a "Internal Server Error Error id d5a7e17c-e6f3-43d0-bc3b-cd341366fd49-7". Thank you

[@josephgarronegj]

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

[@Justin_Roy]

Which Icon Theme Extension Your Are Using?

[@josephgarronegj]

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

[@DanieleKap]

Thank you very much

[@itsabdeeels]

When i run the build-keycloak-theme command, i get an error when trying to build the .jar file: Build jar failed: { "jarFileBasename": "keycloak-theme-for-kc-22-and-above.jar", "keycloakAccountV1Version": null, "keycloakThemeAdditionalInfoExtensionVersion": "1.1.5" } Error: Command failed: mvn install -Dmaven.repo.local="/Users/me/Library/CloudStorage/OneDrive/Desktop/Project/keycloak-theme/node_modules/.cache/keycloakify/maven/keycloak-theme-for-kc-22-and-above/.m2" does anyone know why ?

[@josephgarronegj]

Join the discord :)