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:
(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.
Using process.env.PUBLIC_URL is not directly supported (but it will be in the future).
As a temporary workaround we you can do:
import { kcContext as kcLoginThemeContext } from"keycloak-theme/login/kcContext";import { kcContext as kcAccountThemeContext } from"keycloak-theme/login/kcContext";constPUBLIC_URL= (()=>{constkcContext= (()=>{if( kcLoginThemeContext !==undefined ){return kcLoginThemeContext; }if( kcAccountThemeContext !==undefined ){return kcLoginThemeContext }returnundefined; })();return (kcContext ===undefined||process.env.NODE_ENV==="development")?process.env.PUBLIC_URL:`${kcContext.url.resourcesPath}/build`;})();// Assuming you have my-image.png in your public directory // you can get an URL for it that will be correct regardless of the context with: constimageUrl=`${PUBLIC_URL}/my-image.png`;
It's however planned to enable this. Follow the progress in this issue.
Field Names can't be runtime generated
Keycloakify analyze your code to see what field name are used. As a result your field names should be hard coded in your code (If you are using user profile you don't have to worry about it).
// OK ✅messagesPerField.exists("foo-bar")// Not OK 🛑constbar="bar";messagesPerField.exists(`foo-${bar}`);
Feeling overwhelmed? Check out our exclusive sponsor's Cloud IAM consulting services to simplify your experience.
