This project only support out of the box the most common user facing pages of Keycloak login.
To see the complete list of pages that Keycloak provide you can download the base theme with the following command
npx -p keycloakify download-builtin-keycloak-theme
Most Keycloakify component are based on the base theme of Keycloak v11.0.3 (Video demo).
Here are the pages currently implemented by this module.
Keycloakify also enables you to declare custom ftl pages.
Check out how my-extra-page-1.ftl and my-extra-page-2.ftl where added to the demo project.
Main takeaways are:
You must declare your custom pages in the package.json. example
(TS only) You must declare theses page in the type argument of the getter function for the kcContext in order to have the correct typings. example
(TS only) If you use Keycloak plugins that defines non standard .ftl values (Like for example this plugin that define authorizedMailDomains in register.ftl) you should declare theses value to get the type. example
You should provide sample data for all the non standard value if you want to be able to debug the page outside of keycloak. example
process.env.PUBLIC_URL not supported.You won't be able to import things from your public directory in your JavaScript code (it's supported in public/index.html). (This isn't recommended anyway).
@font-face importing fonts from the src/ dirIf you are building the theme with --external-assets this limitation doesn't apply, you can import fonts however you see fit.
We have a fonts/ directory in src/
We import the font like this src: url("/fonts/my-font.woff2") format("woff2"); in a .scss a file.
If it is possible, use Google Fonts or any other font provider.
If you can't or wont move your @font-face statements in the public/index.html, you can still use non relative url, you will need to enable Access-Control-Allow-Origin for your font files, even on the same domain.
As of now Keycloakify only enable you to create a theme that covers the Login pages and the emails. Acount and Admin Console aren't supported yet.
If you are missing this feature open an issue about it.