docs(api): document MSP cross-tenant access via ?account= parameter (#723)

Adds a new API guide covering the cross-tenant `?account=<tenant_id>`
query parameter that scopes calls to a specific tenant under an MSP
account. Includes setup steps for picking a user and generating a PAT,
how to retrieve tenant IDs via the MSP listing endpoint, read/write
examples, and auditing/security guidance.

Cross-references added from the Authentication guide, the MSP Portal
page, and the public-api token-creation page so the new guide is
discoverable from each entry point an MSP user is likely to hit.

src/components/NavigationAPI.jsx

@@ -5,8 +5,11 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Button } from '@/components/Button'
 import { Tag } from '@/components/Tag'
 import { remToPx } from '@/lib/remToPx'
-import {useEffect, useState} from "react";
-import {NavigationStateProvider, useNavigationState} from "@/components/NavigationState";
+import { useEffect, useState } from 'react'
+import {
+  NavigationStateProvider,
+  useNavigationState,
+} from '@/components/NavigationState'
 
 export const apiNavigation = [
   {
@@ -15,6 +18,7 @@ export const apiNavigation = [
       { title: 'Quickstart', href: '/api/guides/quickstart' },
       { title: 'Authentication', href: '/api/guides/authentication' },
       { title: 'Errors', href: '/api/guides/errors' },
+      { title: 'MSP API access', href: '/api/guides/msp-api-access' },
     ],
   },
   {
@@ -35,61 +39,96 @@ export const apiNavigation = [
       { title: 'DNS Zones', href: '/api/resources/dns-zones' },
       { title: 'Services', href: '/api/resources/services' },
       { title: 'Events', href: '/api/resources/events' },
-      { title: 'Event Streaming', href: '/api/resources/event-streaming-integrations' },
+      {
+        title: 'Event Streaming',
+        href: '/api/resources/event-streaming-integrations',
+      },
       { title: 'Jobs', href: '/api/resources/jobs' },
-      { title: 'Identity Providers', href: '/api/resources/identity-providers' },
+      {
+        title: 'Identity Providers',
+        href: '/api/resources/identity-providers',
+      },
       { title: 'Instance', href: '/api/resources/instance' },
     ],
   },
-    {
-        title: 'Cloud Resources',
-        links: [
-            { title: 'Ingress Ports', href: '/api/resources/ingress-ports' },
-            { title: 'IDP (Azure API)', href: '/api/resources/idp-azure-integrations' },
-            { title: 'IDP (Google API)', href: '/api/resources/idp-google-integrations' },
-            { title: 'IDP (Okta SCIM)', href: '/api/resources/idp-okta-scim-integrations' },
-            { title: 'IDP (SCIM Generic)', href: '/api/resources/idp-scim-integrations' },
-            { title: 'Event Streaming', href: '/api/resources/event-streaming-integrations' },
-            { title: 'EDR Peers', href: '/api/resources/edr-peers' },
-            { title: 'EDR Falcon', href: '/api/resources/edr-falcon-integrations' },
-            { title: 'EDR FleetDM', href: '/api/resources/edr-fleetdm-integrations' },
-            { title: 'EDR Huntress', href: '/api/resources/edr-huntress-integrations' },
-            { title: 'EDR Intune', href: '/api/resources/edr-intune-integrations' },
-            { title: 'EDR SentinelOne', href: '/api/resources/edr-sentinelone-integrations' },
-            { title: 'Notifications', href: '/api/resources/notifications' },
-            { title: 'MSP', href: '/api/resources/msp' },
-            { title: 'Invoice', href: '/api/resources/invoice' },
-            { title: 'Usage', href: '/api/resources/usage' },
-        ],
-    },
+  {
+    title: 'Cloud Resources',
+    links: [
+      { title: 'Ingress Ports', href: '/api/resources/ingress-ports' },
+      {
+        title: 'IDP (Azure API)',
+        href: '/api/resources/idp-azure-integrations',
+      },
+      {
+        title: 'IDP (Google API)',
+        href: '/api/resources/idp-google-integrations',
+      },
+      {
+        title: 'IDP (Okta SCIM)',
+        href: '/api/resources/idp-okta-scim-integrations',
+      },
+      {
+        title: 'IDP (SCIM Generic)',
+        href: '/api/resources/idp-scim-integrations',
+      },
+      {
+        title: 'Event Streaming',
+        href: '/api/resources/event-streaming-integrations',
+      },
+      { title: 'EDR Peers', href: '/api/resources/edr-peers' },
+      { title: 'EDR Falcon', href: '/api/resources/edr-falcon-integrations' },
+      { title: 'EDR FleetDM', href: '/api/resources/edr-fleetdm-integrations' },
+      {
+        title: 'EDR Huntress',
+        href: '/api/resources/edr-huntress-integrations',
+      },
+      { title: 'EDR Intune', href: '/api/resources/edr-intune-integrations' },
+      {
+        title: 'EDR SentinelOne',
+        href: '/api/resources/edr-sentinelone-integrations',
+      },
+      { title: 'Notifications', href: '/api/resources/notifications' },
+      { title: 'MSP', href: '/api/resources/msp' },
+      { title: 'Invoice', href: '/api/resources/invoice' },
+      { title: 'Usage', href: '/api/resources/usage' },
+    ],
+  },
 ]
 
-export function NavigationAPI({tableOfContents, className}) {
+export function NavigationAPI({ tableOfContents, className }) {
   return (
-      <nav className={className}>
-        <ul role="list">
-          <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
-          <TopLevelNavItem href="/">Docs</TopLevelNavItem>
-          <TopLevelNavItem href="/api">API</TopLevelNavItem>
-          <TopLevelNavItem href="https://netbird.io/knowledge-hub/">Learn</TopLevelNavItem>
-          <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
-          <TopLevelNavItem href="/slack-url">Support</TopLevelNavItem>
-          {apiNavigation.map((group, groupIndex) => (
-              <NavigationStateProvider key={group.title} index={groupIndex}>
-                <NavigationGroup
-                    group={group}
-                    tableOfContents={tableOfContents}
-                    className={groupIndex === 0 && 'md:mt-0'}
-                />
-              </NavigationStateProvider>
-            ))}
-          <li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
-            <Button href="https://app.netbird.io/" variant="filled" className="w-full">
-              Sign in
-            </Button>
-          </li>
-        </ul>
-      </nav>
+    <nav className={className}>
+      <ul role="list">
+        <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
+        <TopLevelNavItem href="/">Docs</TopLevelNavItem>
+        <TopLevelNavItem href="/api">API</TopLevelNavItem>
+        <TopLevelNavItem href="https://netbird.io/knowledge-hub/">
+          Learn
+        </TopLevelNavItem>
+        <TopLevelNavItem href="https://github.com/netbirdio/netbird">
+          Github
+        </TopLevelNavItem>
+        <TopLevelNavItem href="/slack-url">Support</TopLevelNavItem>
+        {apiNavigation.map((group, groupIndex) => (
+          <NavigationStateProvider key={group.title} index={groupIndex}>
+            <NavigationGroup
+              group={group}
+              tableOfContents={tableOfContents}
+              className={groupIndex === 0 && 'md:mt-0'}
+            />
+          </NavigationStateProvider>
+        ))}
+        <li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
+          <Button
+            href="https://app.netbird.io/"
+            variant="filled"
+            className="w-full"
+          >
+            Sign in
+          </Button>
+        </li>
+      </ul>
+    </nav>
   )
 }
 export function TopLevelNavItem({ href, children }) {
@@ -105,109 +144,126 @@ export function TopLevelNavItem({ href, children }) {
   )
 }
 
-export function NavLink({ href, tag, active, isAnchorLink = false, children, links, isChildren = false }) {
-  let router = useRouter();
+export function NavLink({
+  href,
+  tag,
+  active,
+  isAnchorLink = false,
+  children,
+  links,
+  isChildren = false,
+}) {
+  let router = useRouter()
 
   return (
-      <div className={"relative"} >
-           <Link
-              href={href ? href : "#"}
-              data-nb-link={active ? 1 : 0}
-              aria-current={active ? 'page' : undefined}
-              title={children}
-              className={clsx(
-                  'flex justify-between gap-2 py-1 pr-3 text-sm transition',
-                  isAnchorLink ? 'pl-7' : 'pl-4',
-                  active
-                      ? 'text-zinc-900 dark:text-white'
-                      : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white',
-                  isChildren ? 'pl-7' : 'pl-4',
-              )}
-          >
-              <span className="truncate">{children}</span>
-              {tag && (
-                  <Tag variant="small" color="zinc">
-                      {tag}
-                  </Tag>
-              )}
-          </Link>
-
-        {links &&
-            <ul role="list">
-              {links.map((link,index) => (
-                  <motion.li key={index} className="relative">
-                    <NavLink href={link.href} active={link.href === router.pathname} isChildren={true}>
-                      {link.title}
-                    </NavLink>
-                  </motion.li>
-              ))}
-            </ul>
-        }
-  </div>
+    <div className={'relative'}>
+      <Link
+        href={href ? href : '#'}
+        data-nb-link={active ? 1 : 0}
+        aria-current={active ? 'page' : undefined}
+        title={children}
+        className={clsx(
+          'flex justify-between gap-2 py-1 pr-3 text-sm transition',
+          isAnchorLink ? 'pl-7' : 'pl-4',
+          active
+            ? 'text-zinc-900 dark:text-white'
+            : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white',
+          isChildren ? 'pl-7' : 'pl-4'
+        )}
+      >
+        <span className="truncate">{children}</span>
+        {tag && (
+          <Tag variant="small" color="zinc">
+            {tag}
+          </Tag>
+        )}
+      </Link>
 
+      {links && (
+        <ul role="list">
+          {links.map((link, index) => (
+            <motion.li key={index} className="relative">
+              <NavLink
+                href={link.href}
+                active={link.href === router.pathname}
+                isChildren={true}
+              >
+                {link.title}
+              </NavLink>
+            </motion.li>
+          ))}
+        </ul>
+      )}
+    </div>
   )
 }
 
 export function flattenNavItems(links, onlyLinks = false) {
-    let output = []
-    for (let link of links) {
-        output.push(link)
-        if (link.links) output.push(...flattenNavItems(link.links, onlyLinks))
-    }
-    if(onlyLinks) output = output.filter((link) => link.href)
-    return output
+  let output = []
+  for (let link of links) {
+    output.push(link)
+    if (link.links) output.push(...flattenNavItems(link.links, onlyLinks))
+  }
+  if (onlyLinks) output = output.filter((link) => link.href)
+  return output
 }
 
 export function VisibleSectionHighlight() {
-    const router = useRouter();
-    let height = remToPx(2)
-    let offset = remToPx(0)
-    const [activeIndex] = useNavigationState();
-    const [top, setTop] = useState(0);
+  const router = useRouter()
+  let height = remToPx(2)
+  let offset = remToPx(0)
+  const [activeIndex] = useNavigationState()
+  const [top, setTop] = useState(0)
 
-    useEffect(() => {
-        setTop(offset + (activeIndex) * height);
-    }, [activeIndex, router.pathname]);
+  useEffect(() => {
+    setTop(offset + activeIndex * height)
+  }, [activeIndex, router.pathname])
 
-    return activeIndex >= 0 && (
-        <motion.div
-            // layout
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1, transition: { delay: 0.2 } }}
-            exit={{ opacity: 0 }}
-            className="absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5"
-            style={{ borderRadius: 8, height, top }}
-        />
+  return (
+    activeIndex >= 0 && (
+      <motion.div
+        // layout
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1, transition: { delay: 0.2 } }}
+        exit={{ opacity: 0 }}
+        className="absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5"
+        style={{ borderRadius: 8, height, top }}
+      />
     )
+  )
 }
 
 export function ActivePageMarker() {
-    const router = useRouter();
-    let itemHeight = remToPx(2)
-    let offset = remToPx(0.25)
-    const [activeIndex] = useNavigationState();
-    const [top, setTop] = useState(0);
+  const router = useRouter()
+  let itemHeight = remToPx(2)
+  let offset = remToPx(0.25)
+  const [activeIndex] = useNavigationState()
+  const [top, setTop] = useState(0)
 
-    useEffect(() => {
-        setTop(offset + (activeIndex) * itemHeight);
-    }, [activeIndex, router.pathname]);
+  useEffect(() => {
+    setTop(offset + activeIndex * itemHeight)
+  }, [activeIndex, router.pathname])
 
-    return activeIndex >= 0 && (
-        <motion.div
-            // layout
-            className="absolute left-2 h-6 w-px bg-orange-500"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1, transition: { delay: 0.2 } }}
-            exit={{ opacity: 0 }}
-            style={{ top }}
-        />
+  return (
+    activeIndex >= 0 && (
+      <motion.div
+        // layout
+        className="absolute left-2 h-6 w-px bg-orange-500"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1, transition: { delay: 0.2 } }}
+        exit={{ opacity: 0 }}
+        style={{ top }}
+      />
     )
+  )
 }
 
 function NavigationGroup({ group, className, tableOfContents }) {
   let router = useRouter()
   let isActiveGroup =
-    group.links.findIndex((link) => link.href === router.pathname.replace("ipa", "api")) !== -1
+    group.links.findIndex(
+      (link) => link.href === router.pathname.replace('ipa', 'api')
+    ) !== -1
 
   return (
     <li className={clsx('relative mt-6', className)}>
@@ -219,9 +275,12 @@ function NavigationGroup({ group, className, tableOfContents }) {
         {group.title}
       </motion.h2>
       <div className="relative mt-3 pl-2">
-        <AnimatePresence >
+        <AnimatePresence>
           {isActiveGroup && (
-              <VisibleSectionHighlight group={group} pathname={router.pathname.replace("ipa", "api")} />
+            <VisibleSectionHighlight
+              group={group}
+              pathname={router.pathname.replace('ipa', 'api')}
+            />
           )}
         </AnimatePresence>
         <motion.div
@@ -230,17 +289,23 @@ function NavigationGroup({ group, className, tableOfContents }) {
         />
         <AnimatePresence initial={false}>
           {isActiveGroup && (
-            <ActivePageMarker group={group} pathname={router.pathname.replace("ipa", "api")} />
+            <ActivePageMarker
+              group={group}
+              pathname={router.pathname.replace('ipa', 'api')}
+            />
           )}
         </AnimatePresence>
         <ul role="list" className="border-l border-transparent">
           {group.links.map((link) => (
             <motion.li key={link.href} className="relative">
-              <NavLink href={link.href} active={link.href === router.pathname.replace("ipa", "api")}>
+              <NavLink
+                href={link.href}
+                active={link.href === router.pathname.replace('ipa', 'api')}
+              >
                 {link.title}
               </NavLink>
               <AnimatePresence mode="popLayout" initial={false}>
-                {link.href === router.pathname.replace("ipa", "api") && (
+                {link.href === router.pathname.replace('ipa', 'api') && (
                   <motion.ul
                     role="list"
                     initial={{ opacity: 0 }}
@@ -253,17 +318,18 @@ function NavigationGroup({ group, className, tableOfContents }) {
                       transition: { duration: 0.15 },
                     }}
                   >
-                    {router.route.startsWith("/ipa/resources") && tableOfContents?.map((section) => (
-                      <li key={section.id}>
-                        <NavLink
-                          href={`${link.href}#${section.id}`}
-                          tag={section.tag}
-                          isAnchorLink
-                        >
-                          {section.title}
-                        </NavLink>
-                      </li>
-                    ))}
+                    {router.route.startsWith('/ipa/resources') &&
+                      tableOfContents?.map((section) => (
+                        <li key={section.id}>
+                          <NavLink
+                            href={`${link.href}#${section.id}`}
+                            tag={section.tag}
+                            isAnchorLink
+                          >
+                            {section.title}
+                          </NavLink>
+                        </li>
+                      ))}
                   </motion.ul>
                 )}
               </AnimatePresence>
@@ -274,6 +340,3 @@ function NavigationGroup({ group, className, tableOfContents }) {
     </li>
   )
 }
-
-
-