Chapeaux Keycloak Component

Usage no npm install needed!

<script type="module">
  import chapeauxCpxKeycloak from 'https://cdn.skypack.dev/@chapeaux/cpx-keycloak';


Chapeaux Keycloak Component

Keycloak Component Purpose

  • Interface with Keycloak
  • Create an HTML-based interface for Keycloak's JS Adapter
  • Provide centralized mechanism for auth that can be distributed and used by a variety of teams


  • token-ready - fires when the .user object data is populated
  • user-update - fires when the .user object is updated


User data is always stored on the .user property once it is available.

  • Server-side or on-page

    Server-side Data inclusion example

        <script type="data">
            "name": "Test User",
            "email": "test123@test123.com"
  • JSON Web Token

    Requires that jwt_decode library be available globally.

    Available component properties:

    • jwt-cookie: sets the cookie to parse for JWT data
    • jwt-token: sets the JWT token to parse for data

    JWT Cookie Example

    <cpx-user jwt-cookie="SOME_JWT_COOKIE_NAME"></cpx-user>

    JWT Token

    <cpx-user jwt-token="SOMEJWTENCODEDSTRING"></cpx-user>
  • Keycloak

    Requires keycloak.js to be available, and the following attributes to be set with the appropriate values:

    • kc-url - the Keycloak server url
    • kc-realm - the Keycloak realm
    • kc-client-id - the Keycloak client ID

    Available component methods:

    • login(): log in using the Keycloak config
    • logout(): log out using the Keycloak config
    • register(): send user to registration screen based on Keycloak config
    • account(): send user to account management screen based on Keycloak config
    • token.createLoginUrl(): creates URL to direct user to login screen
    • token.createLogoutUrl(): creates URL to log user out

    Available component properties:

    • token: the Keycloak object for authenticated users


    <cpx-user kc-url="https://test123.com/auth" kc-realm="your-realm" kc-client-id="your-client-id"></cpx-user>