search

p2-inc / keycloak-magic-link

Magic Link Authentication for Keycloak
https://phasetwo.io
Other
245 stars 50 forks source link

EMail OTP page styles not inheriting anything from realm theme #81

Closed liamlows closed 4 months ago

liamlows commented 4 months ago

Hello!

So we are using Phase Two Keycloak with this extension enabled and have run into a dilemma. We use Keycloakify (of which I am a maintainer and happy to look ing a solution to integrate with the project) to style all of our account and login pages on our Keycloak deployment. However, when we implemented the basic EMail OTP authorization flow step as part of our login process for users, we realized the otp-form.ftl was not inheriting the styles that were set in the custom realm theme (bundled in a jar file in the providers directory).

Is there a way to ensure that the styles provided in template.ftl set at the realm level apply on this page? Furthermore is there any way to override otp-form.ftl in the case that we wish to customize it further than just overriding classes?

Please let me know if I can provide anything else to assist. Thanks in advance for any help!

xgp commented 4 months ago

All of the templates use the template.ftl as the layout wrapper. E.g. 

<#import "template.ftl" as layout>

so it should be inheriting styles. Can you show me a theme example where this doesn't work?

If you want to customize the templates further, you can override them by just placing a template with the same name in your custom theme.

liamlows commented 4 months ago

Yea for sure! Just as a reminder we use Keycloakify but that shouldn't change the way that the theme ultimately is provided. Keycloakify will generate a jar file at the end of build which we then use by placing in the providers folder in our keycloak deployment. It will have a template.ftl, css files, and other modified login pages directly.

To show you what im talking about, this is our login page:

image

after progressing past this page, this is the email OTP screen:

image

When inspecting the page and clicking login, the styles are present on login but suddenly disappear when the OTP page loads. It also is not due to classnames being changed as some of the styles are on tags like <body>. Most notably, on the login page the logo that is present in the card is a direct modification of template.ftl which is not present on the OTP page.

xgp commented 4 months ago

Sounds like a general question of why extension .ftl files placed in theme-resources don't work as you expect in Keycloakify. I think this should be a question there. Maybe @garronej has an idea of how to add templates to work with that library.

liamlows commented 4 months ago

sounds good, ill reach out to him and see if we can find a solution

garronej commented 4 months ago

@xgp we found the solution.
We just need to implement the custom extention integraton feature of Keycloakify. https://docs.keycloakify.dev/faq-and-help/integration-with-custom-keycloak-extention

I think @liamlows is willing to write a specific guide for this page on the Keycloakify documentation website.