Restricting access to the content for non-authorized users

How It Works

To improve your site’s safety, you can restrict access to some content for non-authorized users.

Who Can Use It

Partners who have already integrated Site Builder and Login.

How to Get It

  1. Go to Publisher Account > Site Builder.
  2. Add the Login component to the Header block and select the login project you use for storing users’ data.
  3. Insert the following code to the Custom code block:

<script>
  (function () {
    var blockArray = [
      {
        blockName: '.block--packs',
        blockNumber: 0
      },
      {
        blockName: '.block--description',
        blockNumber: 0
      }
    ];

    function checkAuth(authToken) {
      function handleBlock(hide) {
        setTimeout(function () {
          blockArray.map(function (block) {
            return document.querySelectorAll(block.blockName)[block.blockNumber];
          })
            .forEach(function (element) {
              if (element) {
                element.style.display = hide ? 'none' : 'block';
              }
            });
        }, 0);
      }

      var token = /xsolla_login_token_sb=(.*);?/.exec(document.cookie);
      token = token && token[1] || authToken;
      if (!token) {
        handleBlock(true);
        return;
      }
      var info = JSON.parse(atob(token.slice(token.indexOf('.') + 1, token.lastIndexOf('.'))));
      var isAuth = Date.now() / 1000 < info.exp;
      if (!isAuth) {
        handleBlock(true);
        return;
      }
      handleBlock(false);
    }

    checkAuth();
    window.addEventListener('sb_xsolla_login_success', function (e) {
      checkAuth(e.detail);
    });
  })();
</script>

  1. In the blockArray array, modify the following parameters for each block you want to hide from users:
    1. blockName — the name of the CSS class of the block. Possible options are:
      • .block--header (the Header block)
      • .block--hero (the Call to action block)
      • .block--html (the Custom code block)
      • .block--packs (the Packs block)
      • .block--description (the Description block)
      • .block--gallery (the Gallery block)
      • .block--requirements (the System requirements block)
      • .block--faq (the FAQ block)
      • .block--embed (the Social media widgets block)
      • .block--news (the News block)
      • .block--footer (the Footer block)
    2. blockNumber — the sequence number of the block. Minimum value is 0.
  2. Click Preview to see your changes.

Here is the tutorial video for this recipe: