Access Groups

Get the Access Groups of the Currently Logged-In User

SA5's new Access Groups feature adds access group information into the User Info object, and makes it available to you in the callback.

From there, you write any custom code you like to hide elements, show elements, redirect users away from pages you do not want them on, and so on.

As a best practice, you can use the user.user_data_loaded.access_groups to determine if access group loading has completed. It will be true once that portion of the user object is loaded, and then you can check the user.access_groups array to see which groups they are a member of.

Later, depending on the use cases shared in the forum, we plan to add attributes-based features like access-group-based conditional visibility, and possibly access-group-based routing.

In a similar fashion to the Custom User Fields, SA5'S Access Groups feature requires a specific setup approach in order to work. Make certain to follow the setup precisely.

How SA5's Access Groups Feature Works

Webflow does not provide Access Groups information in the /user-account page so we use a different approach to discern the Access Groups that the current user is a member of.

The underlying strategy is to setup and query a set of known pages that each have specific paths and access rights settings. If the user has access, we know they are a member of that Access Group.

By default these known pages are setup under a special subdirectory named /sa5-ag. You will need one ( empty ) page for each of your Access Groups, and each of those pages;

• MUST have the same exact slug as the Access Group's slug, e.g. premium

• MUST be configured for access ONLY by members of that Access Group

Setting Up Access Groups

For example, if you have 4 access groups, and their slugs are free, basic, pro and premium, then you would;

STEP 1 - Setup the SA5 Access Group Folder & Pages

• Create your Access Groups in Webflow, and write down an exact list of the slugs for each. Keep them short and sweet, and life will be simpler.

• Create a folder at the root of your site with the slug sa5-ag.

• Inside the folder, create 4 pages, with the following slugs.

  • free, which you restrict only to the Free access group members

  • basic, which you restrict only to the Basic access group members

  • pro, which you restrict only to the Pro access group members

  • premium, which you restrict only to the Premium access group members

In these pages, the name of the folder and the names and contents of the pages do not matter. Leave the pages blank. However the slugs MUST be precisely set according to the instructions above.

STEP 2 - Configure SA5 Memberships

In your SITE-wide before-HEAD custom code, where you load the library, configure SA5 Memberships with the list of Access Groups it should check for. This is done with the new getMembershipConfig Memberships configuration block.

In your script, it will look something like this;

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig', 
  (config) => {
    config.accessGroupsFolder = '/sa5-ag';
    config.accessGroups = [
      'free', 'basic', 'pro', 'premium'
    ];
    return config;
  }]); 
</script>

Make certain you have only one getMembershipConfig block to avoid confusing your configuration.

Note that this is not the same configuration block as we use for Advanced Membership Routing. This callback handler is keyed getMembershipConfig, while routing uses getMembershipRoutingConfig. They are unrelated and have different configuration options. You can use both, if you are using both features concurrently.

There are two options you can configure;

• config.accessGroupsFolder defaults to /sa5-ag. If you want a different folder slug, you can override that. Make certain the folder you create matches that path.

• config.accessGroups is an array of your Access Group slugs. You can have 1 or 20, it doesn't matter. Make sure it's a valid JavaScript string array, with comma delimiters.

STEP 3 - Update the Library to BETA & Check Your Work

IMPORTANT BETA LIBRARY VERSION You will need to update your Webflow Memberships library version overall to use this. Do not install multiple copies or versions of the library on the same site. The entire BETA-library plus sample config and custom code would look like this;

<!-- Sygnal Attributes 5 | Memberships BETA -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/css/webflow-membership.css"> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/nocode/webflow-membership.js"></script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig', 
  (config) => {
    config.accessGroupsFolder = '/sa5-ag';
    config.accessGroups = [
      'free', 'basic', 'pro', 'premium'
    ];
    return config;
  }]); 
window.sa5.push(['userInfoChanged', 
  (user) => {
    console.log("USER INFO CHANGED", user); 
  }]);   
</script>