"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    code: "code",
    div: "div",
    h2: "h2",
    p: "p",
    pre: "pre",
    span: "span",
    ..._provideComponents(),
    ...props.components
  }, {CodeBlock, CodeBlockLine, CodeBlockLineGroup, PermanentLink, PropsTable, QuickNav, Screenshot} = _components;
  if (!CodeBlock) _missingMdxReference("CodeBlock", true);
  if (!CodeBlockLine) _missingMdxReference("CodeBlockLine", true);
  if (!CodeBlockLineGroup) _missingMdxReference("CodeBlockLineGroup", true);
  if (!PermanentLink) _missingMdxReference("PermanentLink", true);
  if (!PropsTable) _missingMdxReference("PropsTable", true);
  if (!QuickNav) _missingMdxReference("QuickNav", false);
  if (!QuickNav.Heading) _missingMdxReference("QuickNav.Heading", true);
  if (!QuickNav.Item) _missingMdxReference("QuickNav.Item", true);
  if (!QuickNav.Link) _missingMdxReference("QuickNav.Link", true);
  if (!QuickNav.List) _missingMdxReference("QuickNav.List", true);
  if (!QuickNav.Root) _missingMdxReference("QuickNav.Root", true);
  if (!Screenshot) _missingMdxReference("Screenshot", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(QuickNav.Root, {
      children: [_jsx(QuickNav.Heading, {}), _jsx(QuickNav.List, {
        children: _jsx(QuickNav.Item, {
          children: _jsx(QuickNav.Link, {
            href: "/widgets/directory-sync/api-reference",
            children: "API Reference"
          })
        })
      })]
    }), _jsx(Screenshot, {
      alt: "Directory Sync Widget screenshot",
      src: "/images/widgets/directory-sync-widget.png"
    }), "\n", _jsxs(_components.p, {
      children: ["The ", _jsx(_components.code, {
        children: "<DirectorySync />"
      }), " widget enables users to manage Directory Sync connections in the Admin Portal. It displays the directory status, metadata, and callout messages."]
    }), "\n", _jsxs(_components.p, {
      children: ["In order to use the Directory Sync widget, a user must have a role that has the ", _jsx(_components.code, {
        children: "widgets:dsync:manage"
      }), " permission."]
    }), "\n", _jsx(CodeBlock, {
      children: _jsx(_components.pre, {
        language: "js",
        syntax: "js",
        file: "/app/packages/docs/standalone/content/widgets/_code/widget-directorysync-token.js",
        title: "Widget Token",
        tab: "js-1",
        children: _jsx(_components.code, {
          className: "language-js",
          children: _jsxs(CodeBlockLineGroup, {
            gutter: "numbers",
            children: [_jsxs(CodeBlockLine, {
              children: [_jsx(_components.span, {
                className: "token keyword module",
                children: "import"
              }), " ", _jsx(_components.span, {
                className: "token punctuation",
                children: "{"
              }), _jsx(_components.span, {
                className: "token imports",
                children: " "
              }), _jsx(_components.span, {
                className: "token maybe-class-name",
                children: "DirectorySync"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ","
              }), _jsx(_components.span, {
                className: "token imports",
                children: " "
              }), _jsx(_components.span, {
                className: "token maybe-class-name",
                children: "WorkOsWidgets"
              }), _jsx(_components.span, {
                className: "token imports",
                children: " "
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "}"
              }), " ", _jsx(_components.span, {
                className: "token keyword module",
                children: "from"
              }), " ", _jsx(_components.span, {
                className: "token string",
                children: "'@workos-inc/widgets'"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ";"
              }), "\n"]
            }), _jsx(CodeBlockLine, {
              color: true,
              children: "\n"
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token doc-comment comment",
                children: "/**"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token doc-comment comment",
                children: " * "
              }), _jsx(_components.span, {
                className: "token keyword",
                children: "@param"
              }), _jsx(_components.span, {
                className: "token doc-comment comment",
                children: " "
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "{"
              }), _jsx(_components.span, {
                className: "token class-name",
                children: "string"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "}"
              }), _jsx(_components.span, {
                className: "token doc-comment comment",
                children: " "
              }), _jsx(_components.span, {
                className: "token parameter",
                children: "authToken"
              }), _jsx(_components.span, {
                className: "token doc-comment comment",
                children: " - A widget token that was fetched in your backend. See the"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token doc-comment comment",
                children: " * \"Tokens\" section of this guide for details on how to generate the token"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token doc-comment comment",
                children: " */"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token keyword module",
                children: "export"
              }), " ", _jsx(_components.span, {
                className: "token keyword",
                children: "function"
              }), " ", _jsx(_components.span, {
                className: "token maybe-class-name",
                children: "AdminPortal"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "("
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "{"
              }), _jsx(_components.span, {
                className: "token parameter",
                children: " authToken "
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "}"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ")"
              }), " ", _jsx(_components.span, {
                className: "token punctuation",
                children: "{"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: ["  ", _jsx(_components.span, {
                className: "token keyword control-flow",
                children: "return"
              }), " ", _jsx(_components.span, {
                className: "token punctuation",
                children: "("
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: ["    ", _jsx(_components.span, {
                className: "token operator",
                children: "<"
              }), _jsx(_components.span, {
                className: "token maybe-class-name",
                children: "WorkOsWidgets"
              }), _jsx(_components.span, {
                className: "token operator",
                children: ">"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: ["      ", _jsx(_components.span, {
                className: "token operator",
                children: "<"
              }), _jsx(_components.span, {
                className: "token maybe-class-name",
                children: "DirectorySync"
              }), " ", _jsx(_components.span, {
                className: "token",
                children: "authToken"
              }), _jsx(_components.span, {
                className: "token operator",
                children: "="
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "{"
              }), _jsx(_components.span, {
                className: "token",
                children: "authToken"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "}"
              }), " ", _jsx(_components.span, {
                className: "token operator",
                children: "/"
              }), _jsx(_components.span, {
                className: "token operator",
                children: ">"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: ["    ", _jsx(_components.span, {
                className: "token operator",
                children: "<"
              }), _jsx(_components.span, {
                className: "token operator",
                children: "/"
              }), _jsx(_components.span, {
                className: "token maybe-class-name",
                children: "WorkOsWidgets"
              }), _jsx(_components.span, {
                className: "token operator",
                children: ">"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: ["  ", _jsx(_components.span, {
                className: "token punctuation",
                children: ")"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ";"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token punctuation",
                children: "}"
              }), "\n"]
            })]
          })
        })
      })
    }), "\n", _jsxs(_components.div, {
      tabIndex: "-1",
      "data-section-slug": "/widgets/directory-sync/api-reference",
      children: [_jsx(PermanentLink, {
        label: "Section titled API Reference",
        hidden: false,
        href: "/widgets/directory-sync/api-reference",
        children: _jsx(_components.h2, {
          id: "/widgets/directory-sync/api-reference",
          children: "API Reference"
        })
      }), "\n", _jsx(PropsTable, {
        data: widgets.directorySync.props
      })]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Quick Start

Authorization Tokens

Localization

Getting Started

Overview

Theme Customization

Styling

User Management

User Profile

User Sessions

User Security

API Keys

Pipes

AuthKit

Domain Verification

SSO Connection

Directory Sync

Admin Portal

Organization Switcher

Organizations

Widgets

A widget for switching between organizations in your application.

Organization Switcher Widget

A widget for managing Directory Sync connections in the Admin Portal.

Directory Sync Widget