Links
🔩

Keycloakify in my App

Setting up Keycloakify in your Web App
Vite
Create React App (Webpack)
If you are familiar with how Keycloakify work and you want to set it up in an existing Create React App (Webpack) project here is what you need to do:

Add it to your dependencies

yarn add keycloakify rimraf # Or npm install --save keycloakify rimraf

Register the commands to build your theme

package.json
...
"scripts": {
"start": "copy-keycloak-resources-to-public && react-scripts start",
"storybook": "copy-keycloak-resources-to-public && start-storybook -p 6006",
"build": "react-scripts build && rimraf build/keycloak-resources",
"build-keycloak-theme": "yarn build && keycloakify"
},
...
Monorepos: You can run Keycloakify from the root of your project with:
npx keycloakify --project <path>
<path> would be tipically something like packages/keycloak-theme

Storybook: List the public/ directory as static dir

.storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
// ...
staticDirs: ["../public"]
};
export default config;

Sources directory structure

The acceptable directory hierarchy is the following:
src/
keycloak-theme/
login/
account/
email/
===OR===
src/
foo/
bar/
keycloak-theme/
login/
account/
email/
===OR===
src/
login/
account/
email/
You can have only login for example if you don't implement and account or email theme.
You need, however, to have a src directory. This is not customizable.
If you are starting a new project, the best aproach is to fork the starter repo, read it's readme and start from here.
If you are familiar with how Keycloakify work and you want to set it up in an existing Vite project here is what you need to do:

Add it to your dependencies

yarn add keycloakify # Or npm install --save keycloakify

Enable the Keycloakify's Vite plugin

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { keycloakify } from "keycloakify/vite-plugin";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
keycloakify()
]
})

Register the command to build your theme

package.json
...
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"storybook": "storybook dev -p 6006",
"build-keycloak-theme": "yarn build && keycloakify"
},
...
Monorepos: You can run Keycloakify from the root of your project with:
npx keycloakify --project <path>
<path> would be tipically something like packages/keycloak-theme

Storybook: List the public/ directory as static dir

.storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
// ...
staticDirs: ["../public"]
};
export default config;

Sources directory structure

The acceptable directory hierarchy is the following:
src/
keycloak-theme/
login/
account/
email/
===OR===
src/
foo/
bar/
keycloak-theme/
login/
account/
email/
===OR===
src/
login/
account/
email/
You can have only login for example if you don't implement and account or email theme.
You need, however, to have a src directory. This is not customizable.
Cloud IAM - Keycloak Identity and Access Management as a Service
Feeling overwhelmed? Check out our exclusive sponsor's Cloud IAM consulting services to simplify your experience.