Note: Some of the information regarding developing themes past the 2:00 mark is now inaccurate. Check out the information at keycloakify's documentation site instead.
Thank you, @the UI Dawg, for this fantastic video introduction! It's wonderful that you demonstrate to people how to create a Keycloakify Docker image that bundles a theme. This was much needed, as instructions were previously only available for Helm. I'd like to highlight that after bunlding the theme (2:46), you are provided with a single command that you can run to spin up a dockerized Keycloak with the theme preloaded (and hot reload enabled). This would be the most straightforward method to test the theme in an actual Keycloak instance. Once again, thank you for the informative video. I'll be sure to include it in the landing page and documentation.
Oh wow. Maybe a little embarassing, but I had no idea that command existed. I was going to add an annotation with this updated information, but apparently annotations don't exist anymore.
First of all, thank you for your initial response. While registering, I needed to determine the user's (Customer, Company, ...) type, and then I added this using 'user.properties', which worked. However, to work dynamically, I need to load these property values (Client or Realm) into the properties and pass them when the Register page loads. Do you have any information on this?@@theuidawg3274
This may be more involved than you were hoping, but the way we accomplish something similar by extending the FreemarkerLoginFormsProvider implementation that ships with keycloak. From there, we were able to inject additional properties into the kcContext object available in keycloakify. Unfortunately, I can't share the source code, but if you have follow on questions I can try to answer.
Only login and account themes are currently supported out of the box with working sets of components. But you can use the extraPages config to implement any pages that keycloakify doesn't support yet: docs.keycloakify.dev/build-options#extrapages
I cloned the keycloakify starter template in this video, that's about as simple as the react application can be for this use case. That's the easiest place to get started: github.com/keycloakify/keycloakify-starter
Hi! I've seen your blog about this video, and I followed, but its not working now. docker error message is bellow. E: Unable to locate package openjdk-11-jdk Error response from daemon: The command '/bin/sh -c apt-get update && apt-get install -y openjdk-11-jdk && apt-get install -y maven;' returned a non-zero code: 100 Failed to deploy ' Dockerfile: Dockerfile': Can't retrieve image ID from build stream
node:18 is bookworm linux, and it is not support openjdk11 anymore So I successed change base image and install command. FROM node:alpine3.18 as keycloakify_jar_builder RUN apk update RUN apk add openjdk11 RUN apk add maven
Im doing everything as mentioned in the video but the keycloakify-starter theme is not available from the theme options (only "base" and "keycloak" are available)
Sorry, I don't check my notifications often. Guessing you may have already got this figured out, but if you can post any additional information that would be helpful. The keycloakify GitHub discussions section is also a good place to get help.
This was actually super helpful. Is the best way to incorporate themes to add keycloakify to an existing UI project? Or run the starter project and transfer the .jar file?
I'm glad it was helpful! It's possible to integrate into an existing UI project, but I find it easier to clone the starter project, and start ripping out the stuff you don't need.
Yes, I agree with Dawg, I mean at the moment you can only collocate Keycloakify in a project that bundles with web pack. If you're using something else than create-react-app you are probably out of luck. We are working on improving this though.
Great awesome video. but as of now I can see the login button page with react and vite logo as initial page but you have shown in the video like it will open react app with custom keycloakify theme that's i can't see in this current "keycloakify.starter" Could you please make a details video on it. or just you can share you repository code might be that will really helpful
@@josephgarronegj Awesome thank you. Also if you can share or if possible like login screen split into two screens 1 for email and another one for password is that possible?
Awesome video!! Please i'm wondering how do i change the primary blue color globally to match my App's primary color? Where can i find the global cofig file to change the color? Secondly, after applying the theme, i started getting CORS error, but when i switched back to Keycloak default theme, the error was gone. Is there something that needs to be done? PS: I have an existing Angular project, i'm just using Keycloak for Authentication purpose. I currently have * in my CORS setting in Keycloak so i'm sure the error isn't from Keycloak configuration and the fact that the error disappears after switching back to Keycloak default theme signifies there's something i'm missing with Keycloakify theme. Thanks in anticipation.
Thx for the video but why i get this error when i want to start again? yarn run v1.22.21 $ copy-keycloak-resources-to-public && start-storybook -p 6006 node:internal/errors:865 const err = new Error(message); ^ Error: Command failed: npm run build at checkExecSyncError (node:child_process:885:11) at Object.execSync (node:child_process:957:15) at D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:160:63 at step (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:57:23) at Object.next (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:38:53) at D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:32:71 at new Promise () at __awaiter (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:28:12) at Object.action (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:91:44) { status: 1, signal: null, output: [ null, null, null ], pid: 1520, stdout: null, stderr: null } thxx for the help
No worries, just wanted to make sure I understood. It might be worth trying to run "docker system prune" before rerunning the command. If that doesn't work, I recommend to open an issue or discussion on the keycloakify repo.
Note: Some of the information regarding developing themes past the 2:00 mark is now inaccurate. Check out the information at keycloakify's documentation site instead.
You can not believe how happy I am that I don't have to get into that crazy ftl format too much.
Big thanks to every one of you!
Thank you for your nice feedback 😊
Thank you, @the UI Dawg, for this fantastic video introduction! It's wonderful that you demonstrate to people how to create a Keycloakify Docker image that bundles a theme. This was much needed, as instructions were previously only available for Helm.
I'd like to highlight that after bunlding the theme (2:46), you are provided with a single command that you can run to spin up a dockerized Keycloak with the theme preloaded (and hot reload enabled). This would be the most straightforward method to test the theme in an actual Keycloak instance.
Once again, thank you for the informative video. I'll be sure to include it in the landing page and documentation.
Oh wow. Maybe a little embarassing, but I had no idea that command existed.
I was going to add an annotation with this updated information, but apparently annotations don't exist anymore.
This was really helpful man thanks for everything
Thanks a lot for this video ❤❤❤
I created a custom theme by keycloakify . Can I send the user role from the register page?
I don't know for sure, but I don't think keycloak will support that out of the box. You might need a custom flow within keycloak to make that work.
First of all, thank you for your initial response. While registering, I needed to determine the user's (Customer, Company, ...) type, and then I added this using 'user.properties', which worked. However, to work dynamically, I need to load these property values (Client or Realm) into the properties and pass them when the Register page loads. Do you have any information on this?@@theuidawg3274
This may be more involved than you were hoping, but the way we accomplish something similar by extending the FreemarkerLoginFormsProvider implementation that ships with keycloak. From there, we were able to inject additional properties into the kcContext object available in keycloakify.
Unfortunately, I can't share the source code, but if you have follow on questions I can try to answer.
Can I customize the admin console themes using this ?
Only login and account themes are currently supported out of the box with working sets of components. But you can use the extraPages config to implement any pages that keycloakify doesn't support yet: docs.keycloakify.dev/build-options#extrapages
ok thanks for the info
@@theuidawg3274
does css libraries like tailwind work
@theuidawg
I'd like your help with my simple example.
If I'd a simple example of react app, what the steps should I need to do?
Thanks 🙏
I cloned the keycloakify starter template in this video, that's about as simple as the react application can be for this use case. That's the easiest place to get started: github.com/keycloakify/keycloakify-starter
Hi! I've seen your blog about this video, and I followed, but its not working now.
docker error message is bellow.
E: Unable to locate package openjdk-11-jdk
Error response from daemon: The command '/bin/sh -c apt-get update && apt-get install -y openjdk-11-jdk && apt-get install -y maven;' returned a non-zero code: 100
Failed to deploy ' Dockerfile: Dockerfile': Can't retrieve image ID from build stream
node:18 is bookworm linux, and it is not support openjdk11 anymore
So I successed change base image and install command.
FROM node:alpine3.18 as keycloakify_jar_builder
RUN apk update
RUN apk add openjdk11
RUN apk add maven
@@coding-gorilla to what base you changed ?
@@winstonlowel1286 alpine3.18
Im doing everything as mentioned in the video but the keycloakify-starter theme is not available from the theme options (only "base" and "keycloak" are available)
Sorry, I don't check my notifications often. Guessing you may have already got this figured out, but if you can post any additional information that would be helpful. The keycloakify GitHub discussions section is also a good place to get help.
same thing
With your Dockerfile I get "mvn not found" error.
Check out the attached blog post. It has an updated docker file that installs maven
Great content
This was actually super helpful. Is the best way to incorporate themes to add keycloakify to an existing UI project? Or run the starter project and transfer the .jar file?
I'm glad it was helpful! It's possible to integrate into an existing UI project, but I find it easier to clone the starter project, and start ripping out the stuff you don't need.
Yes, I agree with Dawg, I mean at the moment you can only collocate Keycloakify in a project that bundles with web pack. If you're using something else than create-react-app you are probably out of luck. We are working on improving this though.
Great awesome video. but as of now I can see the login button page with react and vite logo as initial page but you have shown in the video like it will open react app with custom keycloakify theme that's i can't see in this current "keycloakify.starter" Could you please make a details video on it. or just you can share you repository code might be that will really helpful
I'll do a video tutorial soon
@@josephgarronegj
Awesome thank you. Also if you can share or if possible like login screen split into two screens 1 for email and another one for password is that possible?
@@rohit87k You have an example of what you're thinking about?
@@josephgarronegj Yes. I have shared with you linkedin chat. I can't share it here because url not allowed to share in the comment
Awesome video!! Please i'm wondering how do i change the primary blue color globally to match my App's primary color? Where can i find the global cofig file to change the color?
Secondly, after applying the theme, i started getting CORS error, but when i switched back to Keycloak default theme, the error was gone. Is there something that needs to be done? PS: I have an existing Angular project, i'm just using Keycloak for Authentication purpose. I currently have * in my CORS setting in Keycloak so i'm sure the error isn't from Keycloak configuration and the fact that the error disappears after switching back to Keycloak default theme signifies there's something i'm missing with Keycloakify theme.
Thanks in anticipation.
Thx for the video but why i get this error when i want to start again?
yarn run v1.22.21
$ copy-keycloak-resources-to-public && start-storybook -p 6006
node:internal/errors:865
const err = new Error(message);
^
Error: Command failed: npm run build
at checkExecSyncError (node:child_process:885:11)
at Object.execSync (node:child_process:957:15)
at D:\keycloakify\keycloakify-starter
ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:160:63
at step (D:\keycloakify\keycloakify-starter
ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:57:23)
at Object.next (D:\keycloakify\keycloakify-starter
ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:38:53)
at D:\keycloakify\keycloakify-starter
ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:32:71
at new Promise ()
at __awaiter (D:\keycloakify\keycloakify-starter
ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:28:12)
at Object.action (D:\keycloakify\keycloakify-starter
ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:91:44) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 1520,
stdout: null,
stderr: null
}
thxx for the help
Are you saying it worked and started up once, and then hasn't worked since?
@@theuidawg3274 after i terminated and i want to start again. The npm start give me the error output. Sorry for my bad English
No worries, just wanted to make sure I understood. It might be worth trying to run "docker system prune" before rerunning the command. If that doesn't work, I recommend to open an issue or discussion on the keycloakify repo.