Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11
  • Quick Start
  • CSS Customization
  • Testing your Theme
    • Outside of Keycloak
    • Inside of Keycloak
  • Deploying Your Theme
  • Integrating Keycloakify in your Codebase
    • Vite
    • Create-React-App / Webpack
    • yarn/npm/pnpm/bun Workspaces
    • Turborepo
    • Nx
    • Angular Workspace
  • Common Use Case Examples
    • Using a Component Library
    • Custom Fonts
    • Changing the background image
    • Adding your Logo
    • Using Tailwind
    • Dark Mode Persistence
  • Features
    • Internationalization and Translations
      • Basic principles
      • Previewing Your Pages in Different Languages
      • Adding New Translation Messages or Changing the Default Ones
      • Adding Support for Extra Languages
    • Theme Variants
    • Environment Variables
    • Styling a Custom Page Not Included in Base Keycloak
    • Integrating an Existing Theme into Your Keycloakify Project
    • Compiler Options
      • --project
      • keycloakVersionTargets
      • environmentVariables
      • themeName
      • startKeycloakOptions
      • themeVersion
      • accountThemeImplementation
      • postBuild
      • XDG_CACHE_HOME
      • kcContextExclusionsFtl
      • keycloakifyBuildDirPath
      • groupId
      • artifactId
      • Webpack specific options
        • projectBuildDirPath
        • staticDirPathInProjectBuildDirPath
        • publicDirPath
  • Page-Specific Guides
    • Registration Page
    • Terms and Conditions Page
  • Theme types
    • Differences Between Login Themes and Other Types of Themes
    • Account Theme
      • Single-Page
      • Multi-Page
    • Email Theme
    • Admin Theme
Powered by GitBook
On this page
  • Prerequisites
  • Running Keycloak in Docker
  • More Options

Was this helpful?

Edit on GitHub
  1. Testing your Theme

Inside of Keycloak

Last updated 4 months ago

Was this helpful?

Testing your theme in Storybook is helpful, but eventually, you'll need to test it in a real Keycloak instance before deploying it to production.

Prerequisites

  1. Install Docker: Ensure (or just Docker) is installed and running on your computer.

  2. Install Maven: Maven is required to build .jar files locally. Check if it's already installed by running: mvn --version

    If not, follow the instructions below to install Maven.

Using :

brew install maven

On Windows, use the package manager:

choco install openjdk
choco install maven

Or follow the .

sudo apt-get install maven
sudo dnf install maven

Running Keycloak in Docker

Once the prerequisites are set up, you're ready to start Keycloak. Run the following command in your Keycloakify project:

npx keycloakify start-keycloak

You will be prompted to select the Keycloak version to spin up:

Keycloakify will launch the selected Keycloak version in a Docker container.

Once the container is running, you’ll see two links:

Inspecting `window.kcContext`

You can open your browser’s developer tools to inspect the kcContext object on the page. This allows you to create new stories for pages with specific configurations.

More Options

Want to use a custom Keycloak image? Load some extentions? Import a realm configuration? No problem! The start-keycloak command support many options!

Keycloak Admin Console: The Keycloak instance is preconfigured with your theme, a custom realm named myrealm, and a test user (testuser/password123) for quick testing. Changes to the configuration are saved in the .keycloakify directory so that they persist across restarts.

Test Web App: This app redirects to your login theme. Edits to your theme are auto-rebuilt and updated in the Keycloak container. Simply refresh the page to see changes live.

Logging in with the test user redirects you to a page where you can inspect the decoded ID token (JWT) and access your custom and themes (if you implement them).

http://localhost:8080
https://my-theme.keycloakify.dev
Account
Admin
startKeycloakOptions
Docker Desktop
Homebrew
Chocolatey
manual installation guide
Accessing the test web app and signing in with testuser/password123