How to use the mson/lib/compiler/registrar.client function in mson

componentDidMount() {
    // Allows us to listen to back and forward button clicks
    this.unlisten = this.props.history.listen(this.onLocation);

    if (registrar.client) {
      // Wait for the session to load before loading the initial component so that we can do things
      // like route based on a user's role
      registrar.client.user.awaitSession();
    }

    // Load the correct component based on the initial path
    this.onLocation(this.props.location);

    // TODO: is this too inefficient in that it cascades a lot of unecessary events? Instead, could:
    // 1. move more logic to app layer so that only cascade when need new window 2. use something
    // like a global scroll listener that the component can use when it is active
    window.addEventListener('scroll', e => {
      if (this.state.menuItem) {
        this.state.menuItem.content.emit('scroll', e);
      }
    });

export default async app => {
  // Was the client registered?
  if (registrar.client) {
    // Make sure we load the session before doing any rendering so that components can do their
    // initial rendering based on the user's authentication status
    await registrar.client.user.awaitSession();
  }

  ReactDOM.render(
    ,
    document.getElementById('root')
  );
  registerServiceWorker();
};

export default async app => {
  // Was the client registered?
  if (registrar.client) {
    // Make sure we load the session before doing any rendering so that components can do their
    // initial rendering based on the user's authentication status
    await registrar.client.user.awaitSession();
  }

  ReactDOM.render(
    ,
    document.getElementById('root')
  );
  registerServiceWorker();
};

items.forEach((item, index) => {
      // Has access to item?
      if (
        (!item.roles ||
          (registrar.client && registrar.client.user.hasRole(item.roles))) &&
        item.hidden !== true
      ) {
        submenus.push(
          
        );
      }
    });
    return submenus;

requireAccess(roles) {
    const canAccess =
      !roles || (registrar.client && registrar.client.user.hasRole(roles));
    if (!canAccess) {
      this.emitLoggedOut();
    }
    return canAccess;
  }

item.items.forEach((item, index) => {
      const isSelected = path === item.path;
      let classNames = [classes.secondary];
      if (isSelected) {
        classNames.push(classes.selected);
      }

      if (
        (!item.roles ||
          (registrar.client && registrar.client.user.hasRole(item.roles))) &&
        item.hidden !== true
      ) {
        listItems.push(
           this.handleClick(item)}
          >
            
                  {item.label}
                
              }