keycloakify-emails

The extension for keycloakify to build your email theme using JS.

Description

This extension allows you to build email themes using modern JavaScript tooling.

Features:

• Support theme variants. You can produce different templates using the same sourcecode.
• Support i18n. You can use i18n solution of your choice. The extension simply pass a locale to your template function.
• Support override for messages.properties using javascript and i18n solution of your choice.
• Provide type-safe helpers for available template variables, as well helpers to create Freemarker expressions.
• Produce both plain text and html version of email

Framework-agnostic, the extension works with any JS email library. jsx-email is recommended, with dedicated bindings and helpers provided.

How it works

This library generates Freemarker templates using JavaScript, leaving expression placeholders in place. The JavaScript code is executed ahead of time during static generation, not by Keycloak. Therefore, JavaScript functions do not have access to Keycloak variables like userName or realmName during rendering.

Keycloak replaces the Freemarker expressions with their actual values during email rendering

The library includes a set of React components and utilities designed to simplify the process of writing these expressions.

Installation

1npm install --save-dev keycloakify-emails
2# yarn add --dev keycloakify-emails

Usage

Configuration in Vite

Add the extension to your vite.config.ts:

1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react";
3import { keycloakify } from "keycloakify/vite-plugin";
4import themes from "./themes";
5import { buildEmailTheme } from "keycloakify-emails";
6
7export default defineConfig({
8  plugins: [
9    react(),
10    keycloakify({
11      themeName: ["vanilla", "chocolate"],
12      accountThemeImplementation: "none",
13      postBuild: async (buildContext) => {
14        await buildEmailTheme({
15          templatesSrcDirPath: import.meta.dirname + "/emails/templates",
16          themeNames: buildContext.themeNames,
17          keycloakifyBuildDirPath: buildContext.keycloakifyBuildDirPath,
18          locales: ["en", "pl"],
19          cwd: import.meta.dirname,
20          esbuild: {}, // optional esbuild options
21        });
22      },
23    }),
24  ],
25});

Enable email theme in Keycloakify

Create empty ./src/emails folder with command:

1mkdir -p ./src/emails && touch ./src/emails/.gitkeep

This will turn on default email theme support in the Keycloakify.

Creating a Template

To create a custom template, place the template files in the directory specified by templatesSrcDirPath. Any templates you do not define will fall back to the default Keycloak theme.

Example Template:

1// emails/templates/email-test.tsx
2import { GetSubject, GetTemplate } from "keycloakify-emails";
3
4export const getTemplate: GetTemplate = async (props) => {
5  return "<p>This is a test message</p>";
6};
7
8export const getSubject: GetSubject = async (props) => {
9  return "[KEYCLOAK] - SMTP test message";
10};

For more details on the parameters and return types, refer to the GetTemplate and GetSubject type definitions.

Producing Plain Text and HTML version of template

Keycloak sends multipart emails containing both HTML and plain text versions to ensure compatibility with a wide range of email clients. Your theme must provide both versions for every template.

To do so keycloakify-emails will call getTemplate function 2 times, with {plainText: true} and {plainText: false}. You need to return corresponding version accordingly.

When using the jsx-email integration, the plain text version is automatically derived from the JSX component used for the HTML version. This eliminates the need to maintain two separate versions manually. However, ensure that the plain text version is tested and finalized before release.

Check full example in the ./example folder in this repo.

Overriding Messages in the Message Bundle

You can skip this step if you are satisfied with the default translations for requiredAction or linkExpirationFormatter.

However, if you want to customize these messages or implement additional integrations based on a message bundle (messages_x.properties, you can define your own translations by creating an /emails/i18n.ts file with the following content:

1import { GetMessages } from "keycloakify-emails";
2
3export const getMessages: GetMessages = (props) => {
4  // All properties are optional. If you omit them, they will fall back to the base theme defaults.
5  if (props.locale === "en") {
6    return {
7      "requiredAction.CONFIGURE_TOTP": "Configure OTP",
8      "requiredAction.TERMS_AND_CONDITIONS": "Terms and Conditions",
9      "linkExpirationFormatter.timePeriodUnit.minutes":
10        "{0,choice,0#minutes|1#minute|1<minutes}",
11    };
12  } else {
13    return {};
14  }
15};

Once you have defined your translations, include the file in the configuration:

1await buildEmailTheme({
2  // Other configurations
3  i18nSourceFile: import.meta.dirname + "/emails/i18n.ts",
4});

Reference Implementation

Below is a reference implementation showcasing all available messages that can be customized.

1import { GetMessages } from "keycloakify-emails";
2
3export const getMessages: GetMessages = (props) => {
4  // Default properties are optional. If omitted, they will fall back to the base theme defaults.
5  return {
6    "requiredAction.CONFIGURE_TOTP": "Configure OTP",
7    "requiredAction.TERMS_AND_CONDITIONS": "Terms and Conditions",
8    "requiredAction.UPDATE_PASSWORD": "Update Password",
9    "requiredAction.UPDATE_PROFILE": "Update Profile",
10    "requiredAction.VERIFY_EMAIL": "Verify Email",
11    "requiredAction.CONFIGURE_RECOVERY_AUTHN_CODES": "Generate Recovery Codes",
12
13    // Units for link expiration timeout formatting
14    // For languages with plural forms based on the value (e.g., Czech), use the Java choice format.
15    // Documentation:
16    // https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/text/MessageFormat.html
17    // https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/text/ChoiceFormat.html
18    "linkExpirationFormatter.timePeriodUnit.seconds":
19      "{0,choice,0#seconds|1#second|1<seconds}",
20    "linkExpirationFormatter.timePeriodUnit.minutes":
21      "{0,choice,0#minutes|1#minute|1<minutes}",
22    "linkExpirationFormatter.timePeriodUnit.hours":
23      "{0,choice,0#hours|1#hour|1<hours}",
24    "linkExpirationFormatter.timePeriodUnit.days":
25      "{0,choice,0#days|1#day|1<days}",
26  };
27};

The library will use this file to generate resource message bundle for specified locales.

Integrating with jsx-email

Follow their quick-start guide to set up jsx-email in your project.

Then you will be able to create templates using jsx-email components:

1import { GetSubject, GetTemplate, GetTemplateProps } from "keycloakify-emails";
2import { createVariablesHelper } from "keycloakify-emails/variables";
3import {
4  Text,
5  Body,
6  Container,
7  Section,
8  Preview,
9  Html,
10  Head,
11  render,
12} from "jsx-email";
13
14interface TemplateProps extends Omit<GetTemplateProps, "plainText"> {}
15
16const main = {
17  backgroundColor: "#f6f9fc",
18  fontFamily:
19    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
20};
21
22const container = {
23  backgroundColor: "#ffffff",
24  margin: "0 auto",
25  marginBottom: "64px",
26  padding: "20px 0 48px",
27};
28
29const box = {
30  padding: "0 48px",
31};
32const paragraph = {
33  color: "#777",
34  fontSize: "16px",
35  lineHeight: "24px",
36  textAlign: "left" as const,
37};
38
39// used by Preview App of jsx-email
40export const previewProps: TemplateProps = {
41  locale: "en",
42  themeName: "vanilla",
43};
44
45export const templateName = "Email Verification";
46
47const { exp } = createVariablesHelper("email-verification.ftl");
48
49export const Template = ({ locale }: TemplateProps) => (
50  <Html lang={locale}>
51    <Head />
52    <Preview>Verification link from {exp("realmName")}</Preview>
53    <Body style={main}>
54      <Container style={container}>
55        <Section style={box}>
56          <Text style={paragraph}>
57            Someone has created a {exp("realmName")} account with this email
58            address. If this was you, click the link below to verify your email
59            address
60          </Text>
61          <Text style={paragraph}>
62            <a href={exp("link")}>Link to e-mail address verification</a>
63          </Text>
64          <Text style={paragraph}>
65            This link will expire within{" "}
66            {exp("linkExpirationFormatter(linkExpiration)")}.
67          </Text>
68          <Text style={paragraph}>
69            If you didn't create this account, just ignore this message.
70          </Text>
71        </Section>
72      </Container>
73    </Body>
74  </Html>
75);
76
77export const getTemplate: GetTemplate = async (props) => {
78  return await render(<Template {...props} />, { plainText: props.plainText });
79};
80
81export const getSubject: GetSubject = async (props) => {
82  return "Verify email";
83};

Adding an Image to an Email Theme

The ideal approach for managing assets in an email theme is to store them externally, such as in an S3 bucket or a CDN. This setup ensures assets are globally accessible and independent of the Keycloak instance. However, if external storage is not an option, assets can be stored within Keycloak itself.

It’s important to remember that email assets must remain unchanged once the email is sent. These assets should never be deleted or altered, except to replace them with files of identical dimensions. Emails can reside in a recipient’s mailbox indefinitely, and links to assets within these emails need to remain functional. Deleting or modifying these assets could render the email broken, as it is impossible to retroactively update the links or resend the email with corrected references.

To store assets in the Keycloak instance, configure the directory where these files will reside. The recommended directory is /emails/templates/assets, as this location is compatible with the JSX-Email preview server. Here's an example configuration:

1await buildEmailTheme({
2  // Other configurations
3  assetsDirPath: import.meta.dirname + "/emails/templates/assets",
4});

Once the directory is set up, add your assets to this location. For instance, if you place an image at emails/templates/assets/kc-logo.png, you can reference it in your email template using the following snippet:

1const baseUrl = import.meta.isJsxEmailPreview
2  ? "/assets"
3  : "${url.resourcesUrl}";
4
5<Img src={`${baseUrl}/kc-logo.png`} width="83" height="75" />;

This approach ensures compatibility with both Keycloak and the JSX-Email preview server.

Freemarker helpers

createVariablesHelper("email-verification.ftl")

This function provides a type-safe way to write expressions for templates.

1import { createVariablesHelper } from "keycloakify-emails/variables";
2const { exp } = createVariablesHelper("email-verification.ftl");
3
4<Text style={paragraph}>
5  Someone has created a {exp("realmName")} account with this email address. If
6  this was you, click the link below to verify your email address.
7</Text>;

The exp("realmName") argument is type-checked, ensuring that only valid template variables are available and accessible for the specified template.

Extending default type definition

You can extend the default variable definitions using typescript declaration merging.

1declare module "keycloakify-emails/variables" {
2  interface ProfileBean {
3    foo: string;
4  }
5}
6
7exp("user.foo");

You can find all available interfaces to extend in this repo in src/kc-email-vars.ts file.

Condition

Facilitates writing if/elseif/else expressions for Freemarker templates.

1import * as Fm from "keycloakify-emails/jsx-email";
2
3<Fm.If condition="firstName?? && lastName??">
4  <Fm.Then>
5    Hello {exp("firstName")} {exp("lastName")}
6  </Fm.Then>
7  <Fm.ElseIf condition="firstName??">Hello {exp("firstName")}</Fm.ElseIf>
8  <Fm.Else>Hello Guest!</Fm.Else>
9</Fm.If>;

For simpler cases, you can use If without the Then case:

1<Fm.If condition="firstName?? && lastName??">
2  Hello {exp("firstName")} {exp("lastName")}
3</Fm.If>

Keycloak email templates reference

License

This package is licensed under MIT.