This is the documentation for v9, checkout the latest version
Keycloakify
HomeGitHubStartersStorybookDiscordKeycloak-js Alternative
v9
  • Keycloakify
  • Release Notes & Upgrade Instructions
  • FAQ
v9
  • 👨‍💻Quick start
  • 📥Importing your theme in Keycloak
  • 🔩Keycloakify in my App
  • 🖼️Importing assets and fonts
  • 📧Email customization
  • ✒️Terms and conditions
  • ✅Realtime input validation and custom registration fields
  • ⚠️Limitations
  • 🔧Environment Variables
  • 🌎i18n: msg(...)
  • 📖Build options
  • 💂Email domain acceptlist
  • 🛑Keycloak error in log
  • 🌉Passing values from the App to the theme
  • 💟Contributing
  • 🤔How it works
  • ⬆️Migration guides
    • ⬆️CRA -> Vite
    • ⬆️v8 -> v9
    • ⬆️v7 -> v8
    • ⬆️v6 -> v7
    • ⬆️v6.x -> v6.12
    • ⬆️v5 -> v6
Powered by GitBook
On this page

Was this helpful?

Keycloakify in my App

Setting up Keycloakify in your Web App

PreviousImporting your theme in KeycloakNextImporting assets and fonts

Last updated 27 days ago

Was this helpful?

If you are starting a new project, the best approach is to fork the starter repo, read its 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 typically 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 familiar with how Keycloakify work and you want to set it up in an existing Create React App 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 typically 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 your project is using Webpack but not Create React App you might want to checkout .

🔩
this thread
GitHub - keycloakify/keycloakify-starter: 🔑 Starter/demo project for KeycloakifyGitHub
GitHub - keycloakify/keycloakify-starter-cra: Starter/demo project for Keycloakify - CRA versionGitHub
Create React App version of the starter
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.
Logo
Logo
Logo