{
  "id": 17506682,
  "title": "Getting Started with Keycloak - Building a Simple Login Page with Docker",
  "url": "https://urgent.news/2026/11/01/getting-started-with-keycloak-building-a-simple-login-page-with-docker",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-01T01:06:42.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/kawasaki031677/getting-started-with-keycloak-building-a-simple-login-page-with-docker-5hn3"
  },
  "original_language": "en",
  "account": "Keycloak has become quite popular lately. Following the example of a colleague, I decided to try it out and assess its capabilities. Here's how I got started with Keycloak and built a basic login page using Docker:\n\n1. Begin by pulling the Keycloak Docker image and initiate the container with the command:\n```\ndocker run --rm -p 8080:8080 \\\n-e KEYCLOAK_ADMIN=admin \\\n-e KEYCLOAK_ADMIN_PASSWORD=admin \\\nquay.io/keycloak/keycloak:24.0.3 start-dev\n```\n\n2. Access the Keycloak admin console by visiting the URL: http://localhost:8080. You'll be greeted with the Keycloak login page.\n\n3. Log in to the admin console using the default username and password: admin/admin. Upon successful login, you'll have access to the Keycloak interface.\n\n4. To create a test user, navigate to the left menu and select Users > Add user. Create a new user named \"test\" for testing purposes.\n\n5. Next, create a test client by going to Clients > Create client in the admin console. Enter the following details:\n- Client ID: my-html-client\n- Home URL: / (where you'll host your HTML file)\n- Valid redirect URIs: http://localhost:8000 (this is where your HTML page will reside)\n- Web origins: http://localhost:8000\n\n6. Now, create a simple login page using HTML. Create a file named \"index.html\" with the following code:\n```html\n<!DOCTYPE html>\nhtml>\n<head>\n<title>Keycloak Demo</title>\n<script src=\"https://cdn.jsdelivr.net/npm/keycloak-js@24.0.3/dist/keycloak.min.js\"></script>\n</head>\n<body>\n<h1>Keycloak Test Page</h1>\n<button onclick=\"login()\">Login</button>\n<pre id=\"output\"></pre>\n<script>\nconst keycloak = new Keycloak({\nurl: \"http://localhost:8080/\",\nrealm: \"master\",\nclientId: \"my-html-client\"\n});\n\nfunction login() {\nkeycloak.init({ onLoad: \"login-required\" }).then(authenticated => {\ndocument.getElementById(\"output\").textContent =\nauthenticated ? \"Authenticated\\n\" + JSON.stringify(keycloak.tokenParsed, null, 2) : \"Not Authenticated\";\n});\n}\n</script>\n</body>\n</html>\n```\n\n7. To view your login page, start a simple web server. Navigate to the folder containing your \"index.html\" file and run the command:\n```\npython -m http.server 8000\n```\n\n8. Open your web browser and visit http://localhost:8000. You'll see the Keycloak test page with a login button.\n\n9. Click the \"Login\" button. You'll be redirected to the Keycloak authentication screen. Enter the credentials: username: test, password: password. Upon successful authentication, you'll be redirected back to the login page, indicating a successful login process.\n\nThroughout the setup, Keycloak's configuration can be conveniently managed via the user-friendly GUI, making it approachable for beginners. The authentication flow was verified quickly, demonstrating its potential usefulness for future development projects. As you become more familiar with Keycloak, you can delve into more advanced configuration settings and explore its additional features.",
  "summary": "Introduction Recently, it seems Keycloak is being used quite frequently. (According to my colleague) I hadn't tried it yet myself, so I decided to give it a simple try to see what it's all about. Getting Started with Keycloak 1. Pull the Docker image and start Keycloak docker run --rm -p 8080:8080 \\ -e KEYCLOAK_ADMIN = admin \\ -e KEYCLOAK_ADMIN_PASSWORD = admin \\ quay.io/keycloak/keycloak:24.0.3…",
  "key_points": [
    "Pull Keycloak Docker image and start container with docker run command",
    "Access Keycloak admin console at http://localhost:8080 with default login",
    "Create test user and client in admin console for demo purposes"
  ],
  "editors_take": "Leveraging Docker and a user-friendly interface simplifies the initial setup of Keycloak, lowering the barrier for developers looking to integrate robust authentication flows into their projects.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}