🔩Keycloakify in my App

Setting up Keycloakify in your Web App

Vite

If you are starting a new project, the best approach is to fork the starter repo, read its readme and start from here.

GitHub - keycloakify/keycloakify-starter: 🔑 Starter/demo project for KeycloakifyGitHub

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.

Create React App (Webpack)

GitHub - keycloakify/keycloakify-starter-cra: Starter/demo project for Keycloakify - CRA versionGitHub

Create React App version of the starter

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 this thread.

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.

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.