[QS] How to use kcContext for custom implementation

First of all thanks a lot for creating this package, it might just be a lifesaver for people like us.

I am trying to make use of keycloakify with custom Material UI login screen.

From the source code, I can see that in the example template, you have created your own login page

I see in this login page you are making use of kcContext, which help maintain the values state.

Is there any documentation on how to use kcContext for any custom implementation. If not can you guide me in the right direction and I will more than happy make it possible.

Appreciate your help.

[mRamzii]

@shubhamdeodia It’s actually very simple to implement, as @garronej mentionned, you are just rendering the page with react, and your context has everything you need to create custom pages.

That is exactly what I did, fully customized React pages for my website, just grab a hold of the {url, login, register …} in the KcContext, and use them to submit forms to interact with Kc, just like Kc does

[mRamzii]

@shubhamdeodia You can set the authentication flow on the realm to require OTP, then add a custom page “login-config-totp.ftl”

You can take the base page here as an example and implement it in React.

Also checkout the part where you need to declare custom pages and additionnal context nodes for types in TS.