Skip to content

Files

Latest commit

 

History

History
84 lines (66 loc) · 2.5 KB

README.md

File metadata and controls

84 lines (66 loc) · 2.5 KB

bluedot-keycloak-theme

This is a component-based Keycloak login theme built with Tailwind CSS and Alpine.js. It's a fork of Keywind.

Screenshot of styled login page

We're taking a 'good enough' approach to theming here. Notably:

  • We have not set up custom fonts
  • We are not using our React component library (because Keycloak wants weird ftl templates)
    • We decided not to use Keycloakify as this looked far more complex, and more work to edit from than Keywind
List of styled pages
  • Error
  • Login
  • Login Config TOTP
  • Login IDP Link Confirm
  • Login OAuth Grant
  • Login OTP
  • Login Page Expired
  • Login Password
  • Login Recovery Authn Code Config
  • Login Recovery Authn Code Input
  • Login Reset Password
  • Login Update Password
  • Login Update Profile
  • Login Username
  • Login X.509 Info
  • Logout Confirm
  • Register
  • Select Authenticator
  • Terms and Conditions
  • WebAuthn Authenticate
  • WebAuthn Error
  • WebAuthn Register

Installation

  1. Download the jar from the releases page.
  2. Copy it into your providers folder.
  3. In Keycloak, navigate to 'Realm settings > Themes', and set the 'Login theme' to 'bluedot-keycloak-theme'.
Example production Dockerfile
FROM quay.io/keycloak/keycloak:latest as base

### Build
FROM base as builder
WORKDIR /opt/keycloak
ENV KC_DB=postgres
COPY ./src/bluedot-keycloak-theme.jar /opt/keycloak/providers
RUN /opt/keycloak/bin/kc.sh build

### Final image
FROM base
COPY --from=builder /opt/keycloak/ /opt/keycloak/
ENV KEYCLOAK_ADMIN=admin
ENTRYPOINT ["/opt/keycloak/bin/kc.sh"]
CMD [ "start", "--optimized" ]

Contributing

  1. Clone the repository
  2. Install Node.js
  3. Install dependencies with npm install
  4. Edit files - usually in the theme folder, in particular the components subfolder
  5. Run npm run build to create dist/bluedot-keycloak-theme.jar which can be installed as above

Releases

Versions follow the semantic versioning spec.

To release:

  1. Use npm version <major | minor | patch> to bump the version
  2. Run git push --follow-tags to push with tags
  3. Wait for GitHub Actions to publish to GitHub releases.