🚀 A starter/demo project for Keycloakify v8 🚀



Authenticated React SPA

Introduction

This repo constitutes an easily reusable setup for a standalone Keycloak theme project OR for a SPA React App that generates a Keycloak theme that goes along with it. If you are only looking to create a theme (and not a theme + an App) there are a lot of things that you can remove from this starter: Please read this section of the README.

❗️ WARNING ❗️: Don't waste time trying to port this setup to Vite.
Currently Keycloakify only works collocated with Webpack projects but we are working toward enabling collocation with Vite!

Quick start

git clone https://github.com/keycloakify/keycloakify-starter

cd keycloakify-starter

yarn # install dependencies (it's like npm install)

yarn storybook # Start Storybook
               # This is by far the best way to develop your theme
               # This enable to quickly see your pages in isolation and in different states.  
               # You can create stories even for pages that you haven't explicitly overloaded. See src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx
               # See Keycloakify's storybook for if you need a starting point for your stories: https://github.com/keycloakify/keycloakify/tree/main/stories

yarn start # See the Hello World app
           # Uncomment line 97 of src/keycloak-theme/login/kcContext where it reads: `mockPageId: "login.ftl"`, reload https://localhost:3000
           # You can now develop your Login pages. (Don't forget to comment it back when you're done)

yarn build-keycloak-theme # Actually build the theme
                          # Read the instruction printed on the console to see how to test
                          # your theme on a real Keycloak instance.

npx eject-keycloak-page # Prompt that let you select the pages you want to customize
                        # This CLI tools is not guaranty to work, you can always copy pase pages 
                        # from the Keycloakify repo.

npx initialize-email-theme # For initializing your email theme
                           # Note that Keycloakify does not feature React integration for email yet.

npx download-builtin-keycloak-theme # For downloading the default theme (as a reference)
                                    # Look for the files in build_keycloak/src/main/resources/theme/{base,keycloak}

The CI workflow

• You need to manually allow GitHub Action to push on your repository. For this reason the initial setup will fail. You need to enabled permission and re-run failed job: see video.
• To release don't create a tag manually, the CI do it for you. Just update the package.json's version field and push.
• The .jar files that bundle the Keycloak theme will be attached as an asset with every GitHub release. Example. The permalink to download the latest version is: https://github.com/vymalo/vymalo-keycloak-theme/releases/latest/download/keycloak-theme.jar.

The storybook

yarn
yarn storybook

Docker

Instructions for building and running the react app (src/App) that is collocated with our Keycloak theme.

docker build -f Dockerfile -t keycloakify/keycloakify-starter:main .
docker run -it -dp 8083:80 keycloakify/keycloakify-starter:main
# You can access the app at http://localhost:8083