docs: Refactor SSO guides to make sync optional (#4988)

Makes the sync steps optional so the Google, Okta, and Entra guides work for all plans. refs #4984
2026-01-27 18:18:55 +00:00 · 2024-05-15 06:47:42 -07:00
parent 43223f2ec5
commit 4d90e9e133
7 changed files with 257 additions and 214 deletions
--- a/website/src/app/kb/authenticate/email/readme.mdx
+++ b/website/src/app/kb/authenticate/email/readme.mdx
@@ -4,7 +4,7 @@ import SupportOptions from "@/components/SupportOptions";

 <PlanBadge plans={["starter", "team", "enterprise"]}>

-# Email (OTP) authentication
+# Email (OTP) Authentication

 </PlanBadge>

@@ -32,8 +32,17 @@ short-lived and can only be used to authenticate once.

 The email authentication connector can be **disabled completely** for your
 account, forcing all users and admins to authenticate with another connector.
-However, this can lead to issues signing in if one of your other authentication
-connectors stops working. For that reason, you may want to leave the email
-authentication connector enabled with at least one admin for recovery purposes.
+This can increase security by reducing the number of potential entrypoints into
+your Firezone account.
+
+To do so, navigate to `Settings -> Identity providers`, select the Email
+provider in the list, and then click `Disable` in the upper-right.
+
+<Alert color="warning">
+  Disabling the email provider can lead to issues signing in if all of your
+  other connectors stop working. For that reason, you may want to leave the
+  email authentication connector enabled with at least one admin assigned for
+  recovery purposes.
+</Alert>

 <SupportOptions />
--- a/website/src/app/kb/authenticate/entra/readme.mdx
+++ b/website/src/app/kb/authenticate/entra/readme.mdx
@@ -3,9 +3,9 @@ import PlanBadge from "@/components/PlanBadge";
 import Image from "next/image";
 import Link from "next/link";

-<PlanBadge plans={["enterprise"]}>
+<PlanBadge plans={["starter", "team", "enterprise"]}>

-# SSO + Sync with Microsoft Entra ID
+# SSO with Microsoft Entra ID

 </PlanBadge>

@@ -13,13 +13,11 @@ Firezone integrates with
 [Microsoft Entra ID](https://www.microsoft.com/en-us/security/business/identity-access/microsoft-entra-id)
 using a custom connector that supports both authentication and directory sync.
 Use this guide if you're looking to setup SSO with Microsoft Entra ID for your
-Firezone Enterprise account and want to automatically sync users and groups from
-Microsoft Entra ID to Firezone.
+Firezone account and optionally sync users and groups from Microsoft Entra ID to
+Firezone.

 <Alert color="info">
-  If you're just looking to authenticate users against Microsoft Entra ID
-  **without** automatic directory sync, use our [universal OIDC
-  connector](/kb/authenticate/oidc) instead, available on all plans.
+  Directory sync is supported for the **Enterprise** plan only.
 </Alert>

 ## Overview
@@ -27,9 +25,9 @@ Microsoft Entra ID to Firezone.
 The Firezone Microsoft Entra ID connector integrates with Microsoft's identity
 APIs to support user authentication and directory sync.

-Users and groups are synced every few minutes to ensure that your Firezone
-account remains up-to-date with the latest identity data from Entra ID.
-[Read more](/kb/authenticate/directory-sync) about how sync works.
+On Enterprise plans, users and groups are synced every few minutes to ensure
+that your Firezone account remains up-to-date with the latest identity data from
+Entra ID. [Read more](/kb/authenticate/directory-sync) about how sync works.

 ## Setup

@@ -268,7 +266,14 @@ In the next screen, ensure the following OpenId permissions are selected:
  />
 </Link>

-Next, make sure the following Group and User permissions are selected:
+<PlanBadge plans={["enterprise"]}>
+
+#### Directory sync permissions
+
+</PlanBadge>
+
+For Enterprise plans, make sure the following additional Group and User
+permissions are selected:

 - `Group.Read.All`
 - `GroupMember.Read.All`
@@ -419,8 +424,8 @@ Go back to the setup page in the Firezone admin portal, ensure all fields are
 filled out, and click **Connect Identity Provider**.

 <Alert color="warning">
-  All users and groups are synced by default. You can limit which users and
-  groups are synced in the [Enteprise
+  If directory sync is enabled, all users and groups are synced by default. You
+  can limit which users and groups are synced in the [Enteprise
  Applications](https://portal.azure.com/#view/Microsoft_AAD_IAM/StartboardApplicationsMenuBlade/~/AppAppsPreview)
  section of the Azure portal. See the [Microsoft
  documentation](https://learn.microsoft.com/en-us/entra/identity-platform/howto-restrict-your-app-to-a-set-of-users)
@@ -428,6 +433,6 @@ filled out, and click **Connect Identity Provider**.
 </Alert>

 If you get successfully redirected back to your Firezone admin dashboard, you're
-done! Your Entra ID provider is now successfully configured. The first sync will
-occur within about 10 minutes. After that, users will be able to authenticate to
-Firezone using their Entra ID accounts.
+done! Your Entra ID provider is now successfully configured. If directory sync
+is enabled, the first sync will occur within about 10 minutes. After that, users
+will be able to authenticate to Firezone using their Entra ID accounts.
--- a/website/src/app/kb/authenticate/google/readme.mdx
+++ b/website/src/app/kb/authenticate/google/readme.mdx
@@ -3,39 +3,37 @@ import PlanBadge from "@/components/PlanBadge";
 import Image from "next/image";
 import Link from "next/link";

-<PlanBadge plans={["enterprise"]}>
+<PlanBadge plans={["starter", "team", "enterprise"]}>

-# SSO + Sync with Google Workspace
+# SSO with Google Workspace

 </PlanBadge>

 Firezone integrates with [Google Workspace](https://workspace.google.com) using
 a custom connector that supports both authentication and directory sync. Use
 this guide if you're looking to setup SSO with Google Workspace for your
-Firezone Enterprise account and want to automatically sync users, groups, and
-organizational units from Google Workspace to Firezone.
+Firezone account and optionally sync users, groups, and organizational units
+from Google Workspace to Firezone.

 <Alert color="info">
-  If you're just looking to authenticate users against Google Workspace
-  **without** automatic directory sync, use our [universal OIDC
-  connector](/kb/authenticate/oidc) instead, available on all plans.
+  Directory sync is supported for the **Enterprise** plan only.
 </Alert>

 ## Overview

-The Firezone Google Workspace connector integrates with Google's identity APIs
-to support user authentication and directory sync.
+The Firezone Google Workspace connector integrates with Google's OAuth and
+identity APIs to support user authentication and directory sync.

-Users, groups, and organizational units are synced every few minutes to ensure
-that your Firezone account remains up-to-date with the latest identity data from
-Google Workspace. [Read more](/kb/authenticate/directory-sync) about how sync
-works.
+On Enteprise plans, users, groups, and organizational units are synced every few
+minutes to ensure that your Firezone account remains up-to-date with the latest
+identity data from Google Workspace.
+[Read more](/kb/authenticate/directory-sync) about how sync works.

 ## Setup

 Setting up the Google Workspace connector is similar to the process of setting
-up a universal OIDC connector. The main difference is the addition of a few
-extra read-only scopes needed to enable sync.
+up a universal OIDC connector for any other provider. The main difference is the
+addition of a few extra read-only scopes needed to enable sync.

 Follow the steps below to setup the Google Workspace connector.

@@ -69,11 +67,21 @@ Click **CREATE** after you've filled in the fields above.
  />
 </Link>

-### Step 2: Enable the Admin SDK API
+<PlanBadge plans={["enterprise"]}>

-[Visit this link](https://console.cloud.google.com/apis/library/admin.googleapis.com)
+### Step 2 (optional): Enable the Admin SDK API
+
+</PlanBadge>
+
+If you're on the Enterprise plan,
+[visit this link](https://console.cloud.google.com/apis/library/admin.googleapis.com)
 to enable the Admin SDK API for the project you just created in Step 1.

+If not, skip ahead to [Step 3](#step-3-configure-the-oauth-consent-screen).
+
+This is used to allow Firezone to read users, groups and organizational units
+from your Google Workspace account.
+
 **Important**: Ensure the **Firezone Connector** project you created in Step 1
 is selected before clicking the "ENABLE" button.

@@ -142,31 +150,25 @@ Click **SAVE AND CONTINUE**.
 ### Step 4: Configure scopes

 OAuth scopes determine what information the Firezone connector is allowed to
-receive when a user authenticates. Firezone requires the following scopes to
-authenticate users and sync users and groups with your Google Workspace account:
+receive when a user authenticates.
+
+Firezone requires the following scopes to authenticate users on **all** plan
+levels:

 - `openid`: Reserved scope required by all OpenID Connect integrations.
 - `profile`: Provides information such as the user's username, given name,
-  surname, and so forth.
+  surname, etc.
 - `email`: The user's email address.
+
+If you're on the Enterprise plan, you'll need to add the following additional
+scopes to sync users, groups, and organizational units:
+
 - `https://www.googleapis.com/auth/admin.directory.orgunit.readonly`: Required
-  to sync Organization Units.
+  to sync organizational units.
 - `https://www.googleapis.com/auth/admin.directory.group.readonly`: Required to
-  sync Groups.
+  sync groups.
 - `https://www.googleapis.com/auth/admin.directory.user.readonly`: Required to
-  sync Users.
-
-```text
-openid
-profile
-email
-https://www.googleapis.com/auth/admin.directory.orgunit.readonly
-https://www.googleapis.com/auth/admin.directory.group.readonly
-https://www.googleapis.com/auth/admin.directory.user.readonly
-```
-
-Click **ADD OR REMOVE SCOPES** and copy-paste the above scopes into the
-**Manually add scopes** field.
+  sync users.

 <Link
  href="/images/kb/authenticate/google/gcp-update-scopes.png"
@@ -180,6 +182,36 @@ Click **ADD OR REMOVE SCOPES** and copy-paste the above scopes into the
  />
 </Link>

+Click **ADD OR REMOVE SCOPES** and copy-paste the scopes below depending on your
+plan level into the **Manually add scopes** field.
+
+<PlanBadge plans={["starter", "team"]}>
+
+##### Starter and Team plans
+
+</PlanBadge>
+
+```
+openid
+profile
+email
+```
+
+<PlanBadge plans={["enterprise"]}>
+
+##### Enterprise plan scopes
+
+</PlanBadge>
+
+```
+openid
+profile
+email
+https://www.googleapis.com/auth/admin.directory.orgunit.readonly
+https://www.googleapis.com/auth/admin.directory.group.readonly
+https://www.googleapis.com/auth/admin.directory.user.readonly
+```
+
 Then click **UPDATE** to make sure they're applied.

 <Link
@@ -300,6 +332,7 @@ prompts you.
 </Link>

 If you get successfully redirected back to your Firezone admin dashboard, you're
-done! Your Google Workspace connector is now successfully configured. The first
-sync will occur within about 10 minutes. After that, users will be able to
-authenticate to Firezone using their Google Workspace accounts.
+done! Your Google Workspace connector is now successfully configured. If
+directory sync is enabled, the first sync will occur within about 10 minutes.
+After that, users will be able to authenticate to Firezone using their Google
+Workspace accounts.
--- a/website/src/app/kb/authenticate/okta/readme.mdx
+++ b/website/src/app/kb/authenticate/okta/readme.mdx
@@ -3,31 +3,28 @@ import PlanBadge from "@/components/PlanBadge";
 import Image from "next/image";
 import Link from "next/link";

-<PlanBadge plans={["enterprise"]}>
+<PlanBadge plans={["starter", "team", "enterprise"]}>

-# SSO + Sync with Okta
+# SSO with Okta

 </PlanBadge>

 Firezone integrates with Okta using a custom connector that supports both
 authentication and directory sync. Use this guide if you're looking to setup SSO
-with Okta for your Firezone Enterprise account and want to automatically sync
-users and groups from Okta to Firezone.
+with Okta for your Firezone account and optionally sync users and groups from
+Okta to Firezone.

 <Alert color="info">
-  If you're just looking to authenticate users against Okta **without**
-  automatic directory sync, use our [universal OIDC
-  connector](/kb/authenticate/oidc) instead, available on all plans.
+  Directory sync is supported for the **Enterprise** plan only.
 </Alert>
-
 ## Overview

 The Firezone Okta connector integrates with Okta's APIs to support user
 authentication and directory sync.

-Users and groups are synced every few minutes to ensure that your Firezone
-account remains up-to-date with the latest identity data from Okta.
-[Read more](/kb/authenticate/directory-sync) about how sync works.
+On Enterprise plans, users and groups are synced every few minutes to ensure
+that your Firezone account remains up-to-date with the latest identity data from
+Okta. [Read more](/kb/authenticate/directory-sync) about how sync works.

 ## Setup

@@ -208,7 +205,14 @@ In the app integration settings in Okta, click **Assignments** and then the
  />
 </Link>

-Ensure the `okta.groups.read` and `okta.users.read` scopes are granted.
+<PlanBadge plans={["enterprise"]}>
+
+#### Add directory sync scopes
+
+</PlanBadge>
+
+For Enterprise plans, ensure the `okta.groups.read` and `okta.users.read` scopes
+are granted.

 <Link
  href="/images/kb/authenticate/okta/11-grant-groups-read-scope.png"
@@ -265,6 +269,6 @@ Enter this value into the setup form in your Firezone admin portal.
 Ensure all fields are filled out, and click **Connect Identity Provider**.

 If you get successfully redirected back to your Firezone admin dashboard, you're
-done! Your Okta provider is now successfully configured. The first sync will
-occur within about 10 minutes. After that, users will be able to authenticate to
-Firezone using their Okta accounts.
+done! Your Okta provider is now successfully configured. If directory sync is
+enabled, the first sync will occur within about 10 minutes. After that, users
+will be able to authenticate to Firezone using their Okta accounts.
--- a/website/src/app/kb/authenticate/readme.mdx
+++ b/website/src/app/kb/authenticate/readme.mdx
@@ -1,24 +1,27 @@
 import Alert from "@/components/DocsAlert";
+import SupportOptions from "@/components/SupportOptions";

 # Authentication

-Firezone supports the following authentication methods and identity providers:
+Firezone supports a wide variety of authentication providers, allowing you to
+authenticate users against whatever identity provider you're already using. See
+below for more in-depth guides for each supported provider:

 1. [Email (OTP)](/kb/authenticate/email): Authenticate with a one-time passcode
   sent to a user's email.
+1. [Google Workspace](/kb/authenticate/google): Authenticate users and
+   optionally sync users and groups with Google Workspace.
+1. [Microsoft Entra ID](/kb/authenticate/entra): Authenticate users and
+   optionally sync users and groups with Microsoft Entra ID.
+1. [Okta](/kb/authenticate/okta): Authenticate users and optionally sync users
+   and groups with Okta.
 1. [OpenID Connect (OIDC)](/kb/authenticate/oidc): Authenticate to any OpenID
   Connect provider using a universal OIDC connector.
-1. [Google Workspace](/kb/authenticate/google): Authenticate users and sync
-   users and groups with Google Workspace.
-1. [Microsoft Entra ID](/kb/authenticate/entra): Authenticate users and sync
-   users and groups with Microsoft Entra ID.
-1. [Okta](/kb/authenticate/okta): Authenticate users and sync users and groups
-   with Okta.

-It's possible to create multiple providers for Google Workspace, Microsoft Entra
-ID, Okta, and OIDC connectors. This allows you to authenticate users against
-multiple providers at the same time, each with different Groups and Policies
-applied to them.
+It's possible to create multiple providers for the Google Workspace, Microsoft
+Entra ID, Okta, and OIDC connectors. This allows you to authenticate users
+against multiple providers at the same time, each with different Groups and
+Policies applied to them.

 <Alert color="warning">
  Disabling the email provider can lock you out of your account in the event
@@ -28,18 +31,35 @@ applied to them.
  assistance.
 </Alert>

+## Multi-factor authentication (MFA)
+
+Firezone intentionally does not support multi-factor authentication (MFA)
+directly. Instead, we recommend setting any required MFA steps in your identity
+provider so you can apply a consistent MFA strategy for all of your
+SSO-connected applications, not just Firezone.
+
+Here are links to MFA setup guides for some popular identity providers:
+
+- [Google Workspace](https://support.google.com/a/answer/184711)
+- [Microsoft Entra ID](https://docs.microsoft.com/en-us/azure/active-directory/authentication/howto-mfa-userstates)
+- [Okta](https://help.okta.com/en/prod/Content/Topics/Security/MFA.htm)
+
 ## Session lifetime

-The table below summarizes the session lifetimes for various components.
+Firezone uses a separate authentication session token for each component that
+authenticates to either the Admin portal and the API. See the table below for
+the session lifetimes of these tokens:

 | Component           | Auth Provider                     | Lifetime                                                                    |
 | ------------------- | --------------------------------- | --------------------------------------------------------------------------- |
 | Admin portal web UI | Email authentication              | **10 hours**                                                                |
 | Admin portal web UI | OIDC and other identity providers | Copied from the OIDC access token lifetime, up to a maximum of **10 hours** |
-| Client applications | All identity providers            | **1 week**                                                                  |
+| Client applications | All identity providers            | **2 weeks**                                                                 |
 | Service accounts    | N/A                               | **365 days** by default, configurable per token                             |
 | Gateways            | N/A                               | **Indefinitely**. Tokens must be explicitly revoked in the portal UI.       |

 When a session token expires or is revoked, the affected component is
 disconnected immediately and must reauthenticate to regain access to Resources.
 This includes web UI sessions for admins.
+
+<SupportOptions />
--- a/website/src/components/KbSidebar/Item.tsx
+++ b/website/src/components/KbSidebar/Item.tsx
@@ -4,15 +4,15 @@ import { usePathname } from "next/navigation";
 import { HiMinus } from "react-icons/hi2";

 export default function Item({
+  children,
  topLevel,
  nested,
  href,
-  label,
 }: {
+  children: React.ReactNode;
  topLevel?: boolean;
  nested?: boolean;
  href: Route<string>;
-  label: string;
 }) {
  function active(path: string) {
    return usePathname() == path;
@@ -23,7 +23,7 @@ export default function Item({
      href={href}
      className={
        (active(href) ? "bg-neutral-200 " : "") +
-        "pb-0.5 flex " +
+        "pb-0.5 flex w-full " +
        ((!topLevel && "border-l") || "") +
        " border-0.5 border-neutral-500 items-center text-left text-base font-medium text-neutral-700 hover:bg-neutral-100"
      }
@@ -34,11 +34,11 @@ export default function Item({
        className={
          (nested ? "ml-5 " : "") +
          (active(href) ? "text-neutral-800 " : "") +
-          "ml-2" +
+          "ml-2 w-full" +
          ((topLevel && " pl-0.5") || "")
        }
      >
-        {label}
+        {children}
      </span>
    </Link>
  );
--- a/website/src/components/KbSidebar/index.tsx
+++ b/website/src/components/KbSidebar/index.tsx
@@ -25,10 +25,14 @@ export default function KbSidebar() {
      <div className="mt-5 bg-white">
        <ul className="space-y-2 font-medium">
          <li>
-            <Item topLevel href="/kb" label="Overview" />
+            <Item topLevel href="/kb">
+              Overview
+            </Item>
          </li>
          <li>
-            <Item topLevel href="/kb/quickstart" label="Quickstart" />
+            <Item topLevel href="/kb/quickstart">
+              Quickstart
+            </Item>
          </li>
          <li className="ml-3 pt-3 border-t border-neutral-200 uppercase font-bold text-neutral-800">
            Get started
@@ -36,31 +40,31 @@ export default function KbSidebar() {
          <li>
            <Collapse expanded={p.startsWith("/kb/deploy")} label="Deploy">
              <li>
-                <Item href="/kb/deploy" label="Overview" />
+                <Item href="/kb/deploy">Overview</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/sites" label="Sites" />
+                <Item href="/kb/deploy/sites">Sites</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/gateways" label="Gateways" />
+                <Item href="/kb/deploy/gateways">Gateways</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/resources" label="Resources" />
+                <Item href="/kb/deploy/resources">Resources</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/groups" label="Groups" />
+                <Item href="/kb/deploy/groups">Groups</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/users" label="Users" />
+                <Item href="/kb/deploy/users">Users</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/policies" label="Policies" />
+                <Item href="/kb/deploy/policies">Policies</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/clients" label="Distribute Clients" />
+                <Item href="/kb/deploy/clients">Clients</Item>
              </li>
              <li>
-                <Item href="/kb/deploy/dns" label="Configure DNS" />
+                <Item href="/kb/deploy/dns">Configure DNS</Item>
              </li>
            </Collapse>
          </li>
@@ -70,49 +74,41 @@ export default function KbSidebar() {
              label="Authenticate"
            >
              <li>
-                <Item href="/kb/authenticate" label="Overview" />
+                <Item href="/kb/authenticate">Overview</Item>
              </li>
              <li>
-                <Item href="/kb/authenticate/email" label="Email (OTP)" />
+                <Item href="/kb/authenticate/email">Email (OTP)</Item>
              </li>
              <li>
-                <Item href="/kb/authenticate/oidc" label="Universal OIDC" />
+                <Item href="/kb/authenticate/google">
+                  SSO with Google Workspace
+                </Item>
              </li>
              <li>
-                <Item
-                  nested
-                  href="/kb/authenticate/oidc/fusion"
-                  label="Fusion Auth"
-                />
+                <Item href="/kb/authenticate/entra">SSO with Entra ID</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/authenticate/directory-sync"
-                  label="SSO + directory sync"
-                />
+                <Item href="/kb/authenticate/okta">SSO with Okta</Item>
              </li>
              <li>
-                <Item
-                  nested
-                  href="/kb/authenticate/google"
-                  label="Google Workspace"
-                />
+                <Item href="/kb/authenticate/oidc">
+                  SSO with Universal OIDC
+                </Item>
              </li>
              <li>
-                <Item
-                  nested
-                  href="/kb/authenticate/entra"
-                  label="Microsoft Entra ID"
-                />
+                <Item nested href="/kb/authenticate/oidc/fusion">
+                  FusionAuth
+                </Item>
              </li>
              <li>
-                <Item nested href="/kb/authenticate/okta" label="Okta" />
+                <Item href="/kb/authenticate/directory-sync">
+                  Directory sync
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/authenticate/service-accounts"
-                  label="Service accounts"
-                />
+                <Item href="/kb/authenticate/service-accounts">
+                  Service accounts
+                </Item>
              </li>
            </Collapse>
          </li>
@@ -125,28 +121,23 @@ export default function KbSidebar() {
              label="Administer"
            >
              <li>
-                <Item href="/kb/administer" label="Overview" />
+                <Item href="/kb/administer">Overview</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/administer/upgrading"
-                  label="Upgrading Gateways"
-                />
+                <Item href="/kb/administer/upgrading">Upgrading Gateways</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/administer/backup-restore"
-                  label="Backup and restore"
-                />
+                <Item href="/kb/administer/backup-restore">
+                  Backup & restore
+                </Item>
              </li>
              <li>
-                <Item href="/kb/administer/logs" label="Viewing logs" />
+                <Item href="/kb/administer/logs">Viewing logs</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/administer/troubleshooting"
-                  label="Troubleshooting"
-                />
+                <Item href="/kb/administer/troubleshooting">
+                  Troubleshooting
+                </Item>
              </li>
            </Collapse>
          </li>
@@ -156,38 +147,32 @@ export default function KbSidebar() {
              label="End-user guides"
            >
              <li>
-                <Item href="/kb/user-guides" label="Install Clients" />
+                <Item href="/kb/user-guides">Install Clients</Item>
              </li>
              <li>
-                <Item
-                  nested
-                  href="/kb/user-guides/macos-client"
-                  label="macOS"
-                />
+                <Item nested href="/kb/user-guides/macos-client">
+                  macOS
+                </Item>
              </li>
              <li>
-                <Item nested href="/kb/user-guides/ios-client" label="iOS" />
+                <Item nested href="/kb/user-guides/ios-client">
+                  iOS
+                </Item>
              </li>
              <li>
-                <Item
-                  nested
-                  href="/kb/user-guides/windows-client"
-                  label="Windows"
-                />
+                <Item nested href="/kb/user-guides/windows-client">
+                  Windows
+                </Item>
              </li>
              <li>
-                <Item
-                  nested
-                  href="/kb/user-guides/android-client"
-                  label="Android & ChromeOS"
-                />
+                <Item nested href="/kb/user-guides/android-client">
+                  Android & ChromeOS
+                </Item>
              </li>
              <li>
-                <Item
-                  nested
-                  href="/kb/user-guides/linux-client"
-                  label="Linux"
-                />
+                <Item nested href="/kb/user-guides/linux-client">
+                  Linux
+                </Item>
              </li>
            </Collapse>
          </li>
@@ -197,55 +182,45 @@ export default function KbSidebar() {
              label="Use cases"
            >
              <li>
-                <Item href="/kb/use-cases" label="Overview" />
+                <Item href="/kb/use-cases">Overview</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/secure-dns"
-                  label="Block malicious DNS"
-                />
+                <Item href="/kb/use-cases/secure-dns">Block malicious DNS</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/scale-vpc-access"
-                  label="Scale access to a VPC"
-                />
+                <Item href="/kb/use-cases/scale-vpc-access">
+                  Scale access to a VPC
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/nat-gateway"
-                  label="Route through a public IP"
-                />
+                <Item href="/kb/use-cases/nat-gateway">
+                  Route through a public IP
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/postgres-access"
-                  label="Access a Postgres DB"
-                />
+                <Item href="/kb/use-cases/postgres-access">
+                  Access a Postgres DB
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/saas-app-access"
-                  label="Manage access to a SaaS app"
-                />
+                <Item href="/kb/use-cases/saas-app-access">
+                  Manage access to a SaaS app
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/host-access"
-                  label="Access a remote host"
-                />
+                <Item href="/kb/use-cases/host-access">
+                  Access a remote host
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/private-network-access"
-                  label="Access a private network"
-                />
+                <Item href="/kb/use-cases/private-network-access">
+                  Access a private network
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/use-cases/web-app-access"
-                  label="Access a private web app"
-                />
+                <Item href="/kb/use-cases/web-app-access">
+                  Access a private web app
+                </Item>
              </li>
            </Collapse>
          </li>
@@ -258,28 +233,25 @@ export default function KbSidebar() {
              label="Architecture"
            >
              <li>
-                <Item href="/kb/architecture" label="Overview" />
+                <Item href="/kb/architecture">Overview</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/architecture/core-components"
-                  label="Core components"
-                />
+                <Item href="/kb/architecture/core-components">
+                  Core components
+                </Item>
              </li>
              <li>
-                <Item href="/kb/architecture/tech-stack" label="Tech stack" />
+                <Item href="/kb/architecture/tech-stack">Tech stack</Item>
              </li>
              <li>
-                <Item
-                  href="/kb/architecture/critical-sequences"
-                  label="Critical sequences"
-                />
+                <Item href="/kb/architecture/critical-sequences">
+                  Critical sequences
+                </Item>
              </li>
              <li>
-                <Item
-                  href="/kb/architecture/security-controls"
-                  label="Security controls"
-                />
+                <Item href="/kb/architecture/security-controls">
+                  Security controls
+                </Item>
              </li>
            </Collapse>
          </li>
@@ -289,10 +261,10 @@ export default function KbSidebar() {
              label="Reference"
            >
              <li>
-                <Item href="/kb/reference/faq" label="FAQ" />
+                <Item href="/kb/reference/faq">FAQ</Item>
              </li>
              <li>
-                <Item href="/kb/reference/glossary" label="Glossary" />
+                <Item href="/kb/reference/glossary">Glossary</Item>
              </li>
            </Collapse>
          </li>