How to add user authentication to a ccm‐based web component

We'll start with a simple web component ccm.hello.js that simply says "Hello, World!" in it's webpage area:

( () => {
  const component = {
    name: "hello",
    ccm: "https://ccmjs.github.io/ccm/ccm.js",
    config: { name: "World" },
    Instance: function () {
      this.start = async () => {
        this.element.innerHTML = `Hello, ${this.name}!`;
      };
    }
  };
} )();
let b="ccm."+component.name+(component.version?"-"+component.version.join("."):"")+".js";if(window.ccm&&null===window.ccm.files[b])return window.ccm.files[b]=component;(b=window.ccm&&window.ccm.components[component.name])&&b.ccm&&(component.ccm=b.ccm);"string"===typeof component.ccm&&(component.ccm={url:component.ccm});let c=(component.ccm.url.match(/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/)||[""])[0];if(window.ccm&&window.ccm[c])window.ccm[c].component(component);else{var a=document.createElement("script");document.head.appendChild(a);component.ccm.integrity&&a.setAttribute("integrity",component.ccm.integrity);component.ccm.crossorigin&&a.setAttribute("crossorigin",component.ccm.crossorigin);a.onload=function(){(c="latest"?window.ccm:window.ccm[c]).component(component);document.head.removeChild(a)};a.src=component.ccm.url}

Now we add a dependency to the user component in the config:

config: {
  name: "World",
  user: [ "ccm.start", "https://ccmjs.github.io/akless-components/user/ccm.user.js" ]
},

For this tutorial, we give the user component the configuration for authentication with a Digital Makerspace account:

config: {
  name: "World",
  user: [ "ccm.start", "https://ccmjs.github.io/akless-components/user/ccm.user.js", {
    realm: "cloud",
    store: "dms-user",
    url: "https://ccm2.inf.h-brs.de",
    title: "Please login with your Digital Makerspace Account",
    hash: [ "ccm.load", "https://ccmjs.github.io/akless-components/modules/md5.mjs" ]
  } ]
},

Now we give the user component its own webpage area:

this.start = async () => {
  this.element.innerHTML = `
    <div id="user"></div>
    <div>Hello, <span id="name">${this.name}</span>!</div>
  `;
  this.element.querySelector("#user").appendChild(this.user.root);
};

If the user is logged in, the username should be displayed in the output. We define this once in the init:

this.init = async () => {
  if (this.user)
    this.user.onchange = () => {
        this.element.querySelector("#name").innerText = this.user.isLoggedIn() ? this.user.getUsername() : this.name;
    };
};

For conclusion the complete code of the web component:

( () => {
  const component = {
    name: "hello",
    ccm: "https://ccmjs.github.io/ccm/ccm.js",
    config: {
      name: "World",
      user: [ "ccm.start", "https://ccmjs.github.io/akless-components/user/ccm.user.js", {
        realm: "cloud",
        store: "dms-user",
        url: "https://ccm2.inf.h-brs.de",
        title: "Please login with your Digital Makerspace Account",
        hash: [ "ccm.load", "https://ccmjs.github.io/akless-components/modules/md5.mjs" ]
      } ]
    },
    Instance: function () {
      this.init = async () => {
        if (this.user)
          this.user.onchange = () => {
            this.element.querySelector("#name").innerText = this.user.isLoggedIn() ? this.user.getUsername() : this.name;
          };
      };
      this.start = async () => {
        this.element.innerHTML = `
          <div id="user"></div>
          Hello, ${this.name}!</div>
        `;
        this.element.querySelector("#user").appendChild(this.user.root);
      };
    }
  };
  let b="ccm."+component.name+(component.version?"-"+component.version.join("."):"")+".js";if(window.ccm&&null===window.ccm.files[b])return window.ccm.files[b]=component;(b=window.ccm&&window.ccm.components[component.name])&&b.ccm&&(component.ccm=b.ccm);"string"===typeof component.ccm&&(component.ccm={url:component.ccm});let c=(component.ccm.url.match(/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/)||[""])[0];if(window.ccm&&window.ccm[c])window.ccm[c].component(component);else{var a=document.createElement("script");document.head.appendChild(a);component.ccm.integrity&&a.setAttribute("integrity",component.ccm.integrity);component.ccm.crossorigin&&a.setAttribute("crossorigin",component.ccm.crossorigin);a.onload=function(){(c="latest"?window.ccm:window.ccm[c]).component(component);document.head.removeChild(a)};a.src=component.ccm.url}
} )();

Use this HTML code to test:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to add user authentication to a ccm-based web component</title>
    <script src="ccm.hello.js"></script>
  </head>
</html>
<ccm-hello></ccm-hello>