🔩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: 🔑 Keycloakify Projects Starter TemplateGitHub

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)

Cloud identity and acces managementcloud-iam.com

Feeling overwhelmed? Check out our exclusive sponsor's Cloud-IAM consulting services to simplify your experience.