Customizing emails with React

[loschinin]

When customizing emails with React will be available?

[garronej]

Hello @loschinin,
It's not in the current priorities of the project but I'm thinking about it.

[loschinin]

@garronej , Hello and good day. Thank you for your work. Developing email templates in React through keycloakify is like giving developers a superpower. Implementing this would greatly benefit our user engagement and satisfaction. It would be great if you could prioritize this direction.

[garronej]

It's definitely a feature that would be nice to have, but there are some points that explain why it's not a priority:

• To support emails, we would need to render React on the server (Keycloak). We can't just ship a JavaScript bundle and render on the client side as we currently do. The server executes FreeMarker templates. While nothing is impossible and there's always a way if there's a will, this definitely presents an engineering challenge. It's interesting, but it means this isn't something I can deliver in a weekend.
• The more HTML and CSS in an email, the more likely it is to end up in the spam folder. Moreover, I believe for emails such as those for resetting passwords or receiving a code, users prefer a simple message like "Here is your code: XXXX" without unnecessary fluff. However, let me know if you think otherwise.
• Emails do not support JavaScript. I'm concerned that users might not understand this and start using things like MUI to build their emails, then blame Keycloakify when it doesn't work as they expected.
• I'm paid to work on Onyxia, not Keycloakify. While I'm free to work on any satellite OSS projects that benefit Onyxia, we don't really need email customization, making it hard for me to justify taking a week to work on this. CloudIAM financially supported the project at one point with around $1500, but they stopped after realizing the links weren't generating any leads. So, until the project gets its own funding, I will prioritize working on features that we need.

Hope this makes sense,

[loschinin]

Thank you for your answer.

[garronej]

https://youtu.be/Y12sGu8-qFE?si=lpbXqbZrLbQ9NpDf&t=135
React-email could help us here, it solves at least some issues mentioned above

[mkreuzmayr]

Also check out https://github.com/shellscape/jsx-email.

[garronej]

@mkreuzmayr thanks.
I think there might be a way to do something here.
If we prerender the template and search replace for replacing kcContext values with FreeMarker expression.