Beyond the Redirect — Modernizing Keycloak for the TypeScript Era
Keycloak auth that
frontend developers actually enjoy
Keep Keycloak's battle-tested OIDC architecture. Get the developer experience you fell in love with from modern auth libraries — typed roles, native UI components, and no Freemarker wrestling.
Why these projects exist
Frontend developers want to build features — not fight clunky Freemarker templates, disconnected redirect pages, or a backend security black box they try to avoid.
Modern auth libraries won hearts with magic type inference, native UI control, and zero redirects. But they sacrifice multi-realm isolation, OIDC compliance, and enterprise-grade architecture.
These projects bring that DX to Keycloak — without the trade-offs.
The old enterprise way
- Fighting Freemarker just to change a CSS style
- Hard to integrate into your application
- Default themes that feel like 2005
What developers want
- Typed roles and permissions in the IDE
- Login forms as standard app components
- Frameworks they already know — React, Vue, Svelte
Open source projects
Four tools that cover the full frontend auth stack with Keycloak.
Backend-for-Frontend
A Keycloak realm resource provider that keeps tokens server-side, issues BFF_SESSION cookies, and proxies backend calls.
- ✓ BFF_SESSION HttpOnly cookie — browser never holds access or refresh tokens
- ✓ Login, OTP, session check, logout, and backend proxy endpoints
- ✓ CSRF validation on browser POST routes via Origin/Referer checks
- ✓ Automatic token refresh before downstream API calls
- ✓ Demo stack with docker compose
login-ui-base
A reusable foundation for customizing Keycloak login UIs with client-side rendering or Quarkus Qute server-side templates.
- ✓ FreeMarker base theme serializes context to JSON for Vue, Alpine, plain HTML/JS
- ✓ Quarkus Qute theme for fully server-rendered login pages
- ✓ QuteLoginFormsProvider SPI — set templateEngine=qute on any theme
- ✓ CLI scaffolds child themes with live reload
- ✓ Embedded HTML templates or custom js/main.js entry points
keycloak-react
React components for Keycloak with SSR support — built on Auth.js so tokens stay server-side and never reach the browser.
- ✓ SSR-first authentication using Auth.js with Keycloak provider
- ✓ Pre-built UI components — user avatar, sign-in/out buttons, user menu
- ✓ SignedIn, SignedOut, and Protect conditional rendering components
- ✓ Server-side session and token management with automatic refresh
- ✓ Role-based access control via useHasRole and Protect
keycloak-headless
Lit web components and framework helpers for React, Vue, Svelte, and Solid — native UI control without redirects.
- ✓ Web components and framework bindings (React, Vue, Svelte, Solid)
- ✓ Shared auth state via Lit context — no prop drilling
- ✓ Typed realm roles with Vite plugin code generation
- ✓ CLI scaffolds a working SPA with local Keycloak
- ✓ Built on oidc-spa for standards-compliant OIDC flows
Ready to modernize your Keycloak frontend?
Pick the layer you need — SPA components, React SSR, login themes, or a secure BFF — and keep the identity platform you already trust.