Interested in implementing access control for Docusaurus? Check out our integration guide here.

A few months ago, we wrote about adding identity to Docusaurus using the SlashID Docusaurus theme. Today, we are proud to announce the new version of the theme, featuring more granular control, such as page- and path-based access control. Keep reading to find out how, or skip straight to the documentation!

Page-level access control

The most fine-grained way of controlling access to your pages is by defining the access rules in the front matter of a given page. Here’s an example config:

sidebar_custom_props:
  slashid:
    auth: true
    groups:
      - member

When defining access rules for a particular page, it’s crucial to ensure that the page does not appear in the sidebar navigation if the current user should not have access. Docusaurus exposes the sidebar_custom_props front matter field, which we used to centralize page-level configuration.

By specifying auth: true, you will hide the page and the related sidebar item from the UI to unauthenticated users. To further refine access control rules, you can also specify a list of groups the user needs to be a member of.

Check the page level access control configuration in our demo app.

Path-based access control

Along with the page level access control, you can control access to an entire set of pages using the path-based configuration. A single configuration entry consisting of a glob or a RegExp can restrict access to all the pages matching the given pattern. This is specified in docusaurus.config.js by adding a new field to your existing slashID configuration:

​​      slashID: {
        orgID: "your slash id org id",
        // …other configuration entries
        privatePaths: [
          {
            path: "a glob or a regex specifying the path to protect",
            groups: ["optional list of groups that can access the path"],
          }
        ],
      },

You can specify multiple paths, each of them defined using a glob pattern or a RegExp. groups are optional, and they work as described in the previous section: the authenticated user must belong to all the specified groups in order to access the page.

The demo app contains an example of path-based access control.

Alternative approach

Docusaurus is a static site generator so your website will most probably be deployed on a CDN. With the above setup, access control is performed client side, meaning that the browser has to download the assets with the content, parse and execute them before determining if the page should be accessible to the current user. In other words, access control is only performed after downloading the assets. As a result, you are not protected against users deliberately downloading the files from the CDN and inspecting them for content.

If your hosting provider supports edge functions (i.e functions that run at the edge of the network before serving files from the CDN) there is a way around the above problem – look out for our next blog post that explains exactly how to do that!

Contributing and Feedback

We’d love to hear any feedback you may have on the project! While support for the theme is best-effort, we actively maintain it for our developer portal so we’d love to see it grow. To get started, sign up for a free SlashID account and then follow the steps outlined in the documentation.

If you have any questions, please reach out to us directly or open an issue on GitHub.