> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Admin Portal Overview

> Add Admin Portal to your vanilla JS application

export const organization = "Represents an instance or tenant in your application, typically mapping to each of your top-level customers.";

export const member = "Represents an individual end user's account within a given Organization, uniquely identified within that Organization by their email address.";

Admin Portal is a set of drop-in components that allow you to add full-featured Org Management UI to your application.

Admin Portal provides:

* [`AdminPortalMemberManagement`](/docs/api-reference/b2b/frontend-sdks/react/prebuilt-ui/admin-portal/member-management) - allows <Tooltip tip={member}>Members</Tooltip> of the <Tooltip tip={organization}>Organization</Tooltip> to invite new Members and manage existing Members
* [`AdminPortalOrgSettings`](/docs/api-reference/b2b/frontend-sdks/react/prebuilt-ui/admin-portal/organization-settings) - allows Members of the Organization to manage their own Organization settings, including authentication methods and JIT provisioning settings.
* [`AdminPortalSSO`](/docs/api-reference/b2b/frontend-sdks/react/prebuilt-ui/admin-portal/sso) - allows Members of the Organization to manage their own SSO connections
* [`AdminPortalSCIM`](/docs/api-reference/b2b/frontend-sdks/react/prebuilt-ui/admin-portal/scim) - allows Members of the Organization to manage their own SCIM connections

<Callout icon="hat-glasses" color="#B2D6DE">
  Want to see the Admin Portal in action?  Log into your [Stytch Dashboard](https://stytch.com/dashboard/settings/team) and check out the Team, Access Settings, SSO, and SCIM pages. These are all built with Admin Portal!
</Callout>

<Tabs>
  <Tab title="Member management">
    <img src="https://mintcdn.com/stytch-34ca0595/ZVUUFsqZuqcX7gxa/images/api-reference/b2b/frontend-sdks/admin-portal-member-management.png?fit=max&auto=format&n=ZVUUFsqZuqcX7gxa&q=85&s=518e57a5f94a311108cfeec8ff4c37c2" alt="Admin Portal Member Management UI" width="1552" height="1023" data-path="images/api-reference/b2b/frontend-sdks/admin-portal-member-management.png" />
  </Tab>

  <Tab title="Organization settings">
    <img src="https://mintcdn.com/stytch-34ca0595/ZVUUFsqZuqcX7gxa/images/api-reference/b2b/frontend-sdks/admin-portal-organzation-settings.png?fit=max&auto=format&n=ZVUUFsqZuqcX7gxa&q=85&s=9f9a66d0560cf6b4a19d0ae4f9201e51" alt="Admin Portal Organization Settings UI" width="1552" height="1402" data-path="images/api-reference/b2b/frontend-sdks/admin-portal-organzation-settings.png" />
  </Tab>

  <Tab title="SSO">
    <img src="https://mintcdn.com/stytch-34ca0595/ZVUUFsqZuqcX7gxa/images/api-reference/b2b/frontend-sdks/admin-portal-sso.png?fit=max&auto=format&n=ZVUUFsqZuqcX7gxa&q=85&s=f3fd54656b732bfe502c164dcb8a116b" alt="Admin Portal SSO Management UI" width="1552" height="1022" data-path="images/api-reference/b2b/frontend-sdks/admin-portal-sso.png" />
  </Tab>

  <Tab title="SCIM">
    <img src="https://mintcdn.com/stytch-34ca0595/ZVUUFsqZuqcX7gxa/images/api-reference/b2b/frontend-sdks/admin-portal-scim.png?fit=max&auto=format&n=ZVUUFsqZuqcX7gxa&q=85&s=6962e2e541541627e1319854e3fec76a" alt="Admin Portal SCIM Management UI" width="1552" height="1024" data-path="images/api-reference/b2b/frontend-sdks/admin-portal-scim.png" />
  </Tab>
</Tabs>

## Add Admin Portal to your application

<Steps>
  <Step title="Before you start">
    Complete all the steps in the [installation guide](/docs/api-reference/b2b/frontend-sdks/vanilla-js/installation)
  </Step>

  <Step title="Add HTML elements for each Admin Portal component">
    Add container elements to your HTML where you want each Admin Portal component to render:

    ```html theme={null}
    <div id="admin-portal-member-management"></div>
    <div id="admin-portal-org-settings"></div>
    <div id="admin-portal-sso"></div>
    <div id="admin-portal-scim"></div>
    ```
  </Step>

  <Step title="Mount the Admin Portal components">
    <CodeGroup>
      ```jsx Member Management theme={null}
      import { StytchB2BClient } from "@stytch/vanilla-js/b2b";
      import { mountAdminPortalMemberManagement } from "@stytch/vanilla-js/b2b/adminPortal";

      const stytch = new StytchB2BClient("${publicToken}");

      // Optional: customize the styles of the Admin Portal components
      const styles = { fontFamily: "Arial" };

      // Optional: set custom configurations
      const config = {
        getRoleDisplayName: (role) => {
          return role.charAt(0).toUpperCase() + role.slice(1);
        },
      }

      mountAdminPortalMemberManagement({
        client: stytch,
        element: "#admin-portal-member-management",
        styles,
        config,
      });
      ```

      ```jsx Organization Settings theme={null}
      import { StytchB2BClient } from "@stytch/vanilla-js/b2b";
      import {
        AdminPortalB2BProducts,
        mountAdminPortalOrgSettings,
      } from "@stytch/vanilla-js/b2b/adminPortal";

      const stytch = new StytchB2BClient("${publicToken}");

      // Optional: customize the styles of the Admin Portal components
      const styles = { fontFamily: "Arial" };

      // Optional: set custom configurations
      const config = {
        allowedAuthMethods: [
          AdminPortalB2BProducts.emailMagicLinks,
          AdminPortalB2BProducts.password,
        ],
      };

      mountAdminPortalOrgSettings({
        client: stytch,
        element: "#admin-portal-org-settings",
        styles,
        config,
      });
      ```

      ```jsx SSO theme={null}
      import { StytchB2BClient } from "@stytch/vanilla-js/b2b";
      import { mountAdminPortalSSO } from "@stytch/vanilla-js/b2b/adminPortal";

      const stytch = new StytchB2BClient("${publicToken}");

      // Optional: customize the styles of the Admin Portal components
      const styles = { fontFamily: "Arial" };

      // Optional: set custom configurations
      const config = {
        getRoleDisplayName: (role) => {
          return role.charAt(0).toUpperCase() + role.slice(1);
        },
      }

      mountAdminPortalSSO({
        client: stytch,
        element: "#admin-portal-sso",
        styles,
        config,
      });
      ```

      ```jsx SCIM theme={null}
      import { StytchB2BClient } from "@stytch/vanilla-js/b2b";
      import { mountAdminPortalSCIM } from "@stytch/vanilla-js/b2b/adminPortal";

      const stytch = new StytchB2BClient("${publicToken}");

      // Optional: customize the styles of the Admin Portal components
      const styles = { fontFamily: "Arial" };

      // Optional: set custom configurations
      const config = {
        getRoleDisplayName: (role) => {
          return role.charAt(0).toUpperCase() + role.slice(1);
        },
      }

      mountAdminPortalSCIM({
        client: stytch,
        element: "#admin-portal-scim",
        styles,
        config,
      });
      ```
    </CodeGroup>
  </Step>

  <Step title="Test the Admin Portal components">
    That's it! The Admin Portal components will render in the container elements you specified.
  </Step>
</Steps>

## RBAC considerations

Admin Portal respects all RBAC policies configured in your [Stytch Dashboard](https://stytch.com/dashboard/rbac).  Use the resources prefixed with `stytch.` to control who can access and update settings in the Admin Portal.

For example, in the `AdminPortalMemberManagement` component, only Members with permission to `search` on `stytch.member` will be able to view and search for Members.

Read the [RBAC guide](/docs/multi-tenant-auth/enterprise-ready/rbac/create-rbac-policy) for more information about configuring RBAC policies.