Keycloak Local Setup

Prerequisites

• Docker installed and running
• Realm export file: realm-export.json (pedírselo a un miembro del equipo)

---

1. Run Keycloak and import the realm in one command

docker run -p 8080:8080 \
  -e KC_BOOTSTRAP_ADMIN_USERNAME=admin \
  -e KC_BOOTSTRAP_ADMIN_PASSWORD=admin \
  -v $(pwd)/realm-export.json:/opt/keycloak/data/import/realm.json \
  quay.io/keycloak/keycloak:26.2.5 start-dev --import-realm

On Windows (PowerShell) replace $(pwd) with ${PWD}.

Keycloak will be available at: http://localhost:8080
Admin console: http://localhost:8080/admin — credentials: admin / admin

The import includes: realm config, client (quiz-arena-ui), roles, default groups and seed users.

---

2. What's included in the realm export

Item	Value
Realm	master
Client ID	quiz-arena-ui
Client type	Public (no secret)
Auth flow	Authorization Code + PKCE (S256)
Redirect URI	http://localhost:4200/
Post-logout redirect URI	http://localhost:4200/
Roles	student, teacher
Default group	Students → auto-assigns student role on registration
Registration	Enabled

---

3. Update the app to point to local Keycloak

In src/environments/environment.ts update the issuer:

export const environment = {
  production: false,
  keycloak: {
    issuer: 'http://localhost:8080/realms/master',
    clientId: 'quiz-arena-ui',
  },
};

---

4. Verify

npm start

1. Go to http://localhost:4200 → redirects to /login
2. Click Comenzar → redirects to Keycloak at localhost:8080
3. Log in with a seed user → lands on the main layout
4. Click Sign out → redirects back to /login