This is the documentation for v9, checkout the latest version

Home GitHubStorybook Discord Keycloak-js Alternative

Keycloakify in my App

Setting up Keycloakify in your Web App

PreviousImporting your theme in Keycloak NextImporting assets and fonts

Last updated 28 days ago

Was this helpful?

Keycloakify in my App

Setting up Keycloakify in your Web App

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.

PreviousImporting your theme in Keycloak NextImporting assets and fonts

Last updated 28 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:

If your project is using Webpack but not Create React App you might want to checkout .

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.