@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

Events

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

Usage

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

• Server-side or on-page

  Server-side Data inclusion example

  ```html
  <cpx-user>
      <script type="data">
      {
          "name": "Test User",
          "email": "[e-mail]"
      }
      </script>
  </cpx-user>
  ```
  

• 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

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

  JWT Token

  ```html
  <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

  Example:

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

Scripts