🚀 A starter/demo project for Keycloakify v8 🚀
Authenticated React SPA
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!
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}
- 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
.
yarn
yarn storybook
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