Chapeaux User Component

Events

• user-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

<cpx-user>
    <script type="data">
    {
        "name": "Test User",
        "email": "[email protected]"
    }
    </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

<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

Keycloak

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

Scripts