Create-React-App / Webpack

Before You Start:

This documentation section is intended for cases where you already have an existing project and want to add a Keycloak theme as part of its deliverables.

One of Keycloakify’s strengths is its ability to let you reuse components and styles from your main application in your Keycloak theme. However, if you don’t have an existing codebase, it’s easier to fork one of the starter projects and develop your Keycloak theme as a standalone project.

If you have a Webpack/React/TypeScript project you can integrate Keycloakify directly inside it.

In this guide we're going to work with a vanilla Create React App project.

Creating a CRA project. You don't need to do that, just use your existing codebase.

Our codebase before involving Keycloakify

Before anything make sure to commit all your pending changes so you can easily revert changes if need be.

Let's start by installing Keycloakify (and optionally Storybook) to our project:

yarn

yarn add keycloakify
# Installing storybook is optional
yarn add --dev rimraf storybook @storybook/react @storybook/react-vite

pnpm

pnpm add keycloakify
# Installing storybook is optional
pnpm add --dev rimraf storybook @storybook/react @storybook/react-vite

bun

bun add keycloakify
# Installing storybook is optional
bun add --dev rimraf storybook @storybook/react @storybook/react-vite

npm

npm install --save keycloakify
# Installing storybook is optional
npm install --save-dev rimraf storybook @storybook/react @storybook/react-vite

Next we want to repatriate the relevant files from the starter template into our project:

cd my-app
git clone https://github.com/keycloakify/keycloakify-starter-webpack tmp
mv tmp/src src/keycloak-theme

# Note for the following command: If you already have Storybook setup
# in your project you can skip this.
# Only make sure you have `staticDirs: ["../public"]` in your .storybook/main.ts
mv tmp/.storybook .

rm -rf tmp
rm src/keycloak-theme/react-app-env.d.ts
mv src/keycloak-theme/index.tsx src/index.tsx

Sate of your codebase after bringing in Keycloakify's starter boilerplate code

Now you want to modify your entry point so that:

• If the kcContext global is defined, render your Keycloakify theme

• Else, render your App as usual.

Let's say, for example, your src/index.tsx file currently looks like this:

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { MyProvider } from "./MyProvider";
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <MyProvider>
      <App />
    </MyProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

You want to rename this file to src/index.app.tsx (for example) and modify it as follow:

src/index.app.tsx

import './index.css';
import App from './App';
import { MyProvider } from "./MyProvider";
import reportWebVitals from './reportWebVitals';

export default function AppEntrypoint(){
  return (
    <MyProvider>
      <App />
    </MyProvider>
  );
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Then you want to create the following src/index.tsx file, you can copy paste the followint code, it does not need to be adapted:

src/index.tsx

import { createRoot } from "react-dom/client";
import { StrictMode, lazy, Suspense } from "react";
import { KcPage, type KcContext } from "./keycloak-theme/kc.gen";
const AppEntrypoint = lazy(() => import("./index.app"));

// The following block can be uncommented to test a specific page with `yarn dev`
// Don't forget to comment back or your bundle size will increase
/*
import { getKcContextMock } from "./keycloak-theme/login/KcPageStory";

if (import.meta.env.DEV) {
    window.kcContext = getKcContextMock({
        pageId: "register.ftl",
        overrides: {}
    });
}
*/

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        {window.kcContext ? (
            <KcPage kcContext={window.kcContext} />
        ) : (
            <Suspense>
                <AppEntrypoint />
            </Suspense>
        )}
    </StrictMode>
);

declare global {
    interface Window {
        kcContext?: KcContext;
    }
}

Question:

Why do my main application and Keycloak theme share the same entry point?

Answer:

To simplify the build process. If you don't want it to negatively impact the performance of your application, it's essential to understand the following points:

• Different Contexts: The application (App) and Keycloak page (KcPage) are mounted in very different contexts. Avoid sharing providers between the two at the index.tsx file level. The true entry point of your application is the AppEntrypoint component in index.app.tsx, while the entry point for your Keycloak theme is the KcPage component. Be careful about what code is shared between them.

• Responsibility of index.tsx: The index.tsx file should only determine the context (either the application or Keycloak) and mount the appropriate component (AppEntrypoint or KcPage). It should not contain any substantial logic or dependencies.

• Performance Considerations: Keep index.tsx as lightweight as possible to avoid increasing the initial load time of both your main application and login pages. For example, do not load any state management libraries like redux-toolkit at this level.

Finally you want to add some script for Keycloakify in you package.json and also let Keycloakify know about how your Webpack project is configured.

package.json

{
    "name": "my-app",
    "scripts": {
        "prestart": "keycloakify update-kc-gen && keycloakify copy-keycloak-resources-to-public",
        "start": "react-scripts start",
        "prestorybook": "npm run prestart",
        "storybook": "storybook dev -p 6006",
        "prebuild": "keycloakify update-kc-gen",
        "build": "react-scripts build",
        "postbuild": "rimraf build/keycloakify-dev-resources",
        "build-keycloak-theme": "npm run build && keycloakify build",
        "format": "prettier . --write"
        // ...
    },
    "keycloakify": {
        "accountThemeImplementation": "none",
        "projectBuildDirPath": "build",
        "staticDirPathInProjectBuildDirPath": "static",
        "publicDirPath": "public"
    },
    // ...

Leave accountThemeImplementation set to "none" for now. To initialize the account theme refer to this guide.

Keycloakify has many build options that you can use, however projectBuildDirPath, staticDirPathInProjectBuildDirPath and publicDirPath are parameters specific to the use of Keycloakify in a Webpack context.

Theses are not preferences! If you're not using Create React App your Webpack configuration is probably different and you want to update those values to reflect how webpack build your site in your project.

Here you can see that in a CRA project, when we run npm run build the app distribution is generated in a build/ directory, this is why we use "projectBuildDirPath": "build". We can also see that all the assets of the app are gathered under a static/ directory this is why we use "staticDirPathInProjectBuildDirPath": "static". And finally we can see that everything we put in the public/ directory is copied over to the build/ directory when building so we use "publicDirPath": "public".

Last setp is to exclude from your html <head /> things that aren't relevent in the context of Keycloak pages.

Do not blindely copy paste, this is just an example!

You have to figure out what does and does not make sense to be in the <head/> of your Keycloak UI pages.

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/icon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

  <meta name="keycloakify-ignore-start">
  <title>ACME Dashboard</title>
  <script>
    window.ENV = {
      API_ADDRESS: '${API_ADDRESS}',
      SENTRY_DSN: '${SENTRY_DSN}'
    };
  </script>
  <meta name="keycloakify-ignore-end">

  <!-- ... -->

</head>

<!-- ... -->

In the above example we tell keycloakify not to include the <title> because keycloakify will set it dynamically to something like "ACME- Login" or "ACME - Register".

We also exclude a placeholder script for injecting environnement variables at container startup.

That's it, your project is ready to go! 🎉

You can run npm run build-keycloak-theme, the JAR distribution of your Keycloak theme will be generated in build_keycloak (you can change this).

You're now able to use all the Keycloakify commands (npx keycloakify --help) from the root of your project.

If you're currently using keycloak-js or react-oidc-context to manage user authentication in your app you might want to checkout oidc-spa, the alternative from the Keycloakify team.

If you have any issues reach out on Discord! We're here to help!

Testing your Theme