A lightweight and interactive Keycloak Playground to experiment with:

• 🔐 Authentication using Keycloak
• 🧠 UMA (User-Managed Access)
• 🧾 Tokens (Access & ID)
• 👥 Roles & Permissions
• ℹ️ User information

The goal of this project is to provide a ready-to-use demo environment to test Keycloak features without complex setup.

• Login / Logout with Keycloak
• View Access & ID tokens (raw and decoded)
• UMA Playground — request protected resources
• Roles & Permissions viewer
• Simple “About” page (version info)
• Docker-ready for quick deployment

Login Page	UMA Playground

You can quickly run the frontend and backend using Docker images published on Docker Hub.

docker run -d \
  -p 8080:80 \
  -e VITE_KEYCLOAK_URL="http://auth.localhost" \
  -e VITE_KEYCLOAK_REALM="test" \
  -e VITE_KEYCLOAK_CLIENT_ID="js-client" \
  -e VITE_API_BASE_URL="http://localhost:3000" \
  antoinecrochet/keycloak-playground:latest

Access the UI at 👉 http://localhost:8080

docker run -d \
  -p 3000:3000 \
  -e KEYCLOAK_URL="http://auth.localhost" \
  -e KEYCLOAK_REALM="test" \
  -e KEYCLOAK_CLIENT_ID="rs-server" \
  -e KEYCLOAK_CLIENT_SECRET="***" \
  -e FRONTEND_URL="http://localhost:8080"
  antoinecrochet/keycloak-playground-backend:latest

The backend is optional — it’s only required for UMA testing.

If you want to modify or extend the playground:

git clone https://github.com/antoinecrochet/keycloak-playground.git
cd keycloak-playground

cd frontend
npm install
npm run dev

Frontend will run by default on http://localhost:5173

cd backend
npm install
npm run dev

Backend will run by default on http://localhost:3000

To use the playground, you need a running Keycloak server.

Minimum configuration:

1. Create a Realm (e.g. test).

2. Create a public client (e.g. js-client)

   • Access Type: public
   • Valid redirect URIs: http://localhost:5173/* (or your deployment URL)
   • Web Origins: +

3. (Optional for UMA) Create a confidential client (e.g. rs-server) with service account enabled.

   • Access Type: confidential
   • Authorization : enabled
   • Configure resources and authorization policies in Keycloak Authorization tab.

Once this is done, set the environment variables accordingly (.env or Docker env vars).

If backend is running, you can:

• Call a protected resource from the UMA Playground tab.
• Keycloak will issue an UMA ticket and the backend will exchange it for an RPT.
• You can configure resources and permissions in Keycloak without modifying your backend code.

Advantages:

• Authorization is centralized in Keycloak.
• Easy to adjust permissions without redeploying your API.

keycloak-playground/
├── frontend/          # React + Vite UI
├── backend/           # Node.js API (UMA + token handling)
├── docs/              # Screenshots & documentation
├── .github/workflows/ # CI/CD pipeline
└── README.md

This project is licensed under the MIT License. See LICENSE for details.

• Keycloak Documentation
• UMA 2.0 Spec
• Docker Hub

👨‍💻 Author: Antoine Crochet ⭐ If you like this project, consider giving it a star on GitHub!