> ## 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 Next.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

<Tabs>
  <Tab title="App Router" icon="triangle">
    <Steps>
      <Step title="Before you start">
        Complete all the steps in the [installation guide](/docs/api-reference/b2b/frontend-sdks/react/installation)
      </Step>

      <Step title="Create a route for each Admin Portal component">
        Create the following file structure in your Next.js app directory:

        ```
        app/
          admin/
            members/
              page.tsx
            organization/
              page.tsx
            sso/
              page.tsx
            scim/
              page.tsx
        ```

        Typically, these routes will live wherever you have other "settings" type pages for the Organization.
      </Step>

      <Step title="Add the Admin Portal components to each page">
        <CodeGroup>
          ```jsx members/page.tsx theme={null}
          import {
            AdminPortalMemberManagement
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function MembersPage() {
            return <AdminPortalMemberManagement styles={styles} config={config} />;
          }
          ```

          ```jsx organization/page.tsx theme={null}
          import {
            AdminPortalOrgSettings
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function OrganizationPage() {
            return <AdminPortalOrgSettings styles={styles} config={config} />;
          }
          ```

          ```jsx sso/page.tsx theme={null}
          import {
            AdminPortalSSO
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function SSOPage() {
            return <AdminPortalSSO styles={styles} config={config} />;
          }
          ```

          ```jsx scim/page.tsx theme={null}
          import {
            AdminPortalSCIM
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function SCIMPage() {
            return <AdminPortalSCIM styles={styles} config={config} />;
          }
          ```
        </CodeGroup>
      </Step>

      <Step title="Test the Admin Portal components">
        That's it! You can now test the Admin Portal components by navigating to the routes you created.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Pages Router" icon="triangle">
    <Steps>
      <Step title="Before you start">
        Complete all the steps in the [installation guide](/docs/api-reference/b2b/frontend-sdks/react/installation)
      </Step>

      <Step title="Create a route for each Admin Portal component">
        Create the following file structure in your Next.js pages directory:

        ```
        pages/
          admin/
            members.tsx
            organization.tsx
            sso.tsx
            scim.tsx
        ```

        Typically, these routes will live wherever you have other "settings" type pages for the Organization.
      </Step>

      <Step title="Add the Admin Portal components to each page">
        <CodeGroup>
          ```jsx members.tsx theme={null}
          import {
            AdminPortalMemberManagement
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function MembersPage() {
            return <AdminPortalMemberManagement styles={styles} config={config} />;
          }
          ```

          ```jsx organization.tsx theme={null}
          import {
            AdminPortalOrgSettings
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function OrganizationPage() {
            return <AdminPortalOrgSettings styles={styles} config={config} />;
          }
          ```

          ```jsx sso.tsx theme={null}
          import {
            AdminPortalSSO
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function SSOPage() {
            return <AdminPortalSSO styles={styles} config={config} />;
          }
          ```

          ```jsx scim.tsx theme={null}
          import {
            AdminPortalSCIM
          } from "@stytch/nextjs/b2b/adminPortal";

          // Optional: customize the styles of the Admin Portal components
          const styles = { colors: { primary: "#000000" } };

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

          export default function SCIMPage() {
            return <AdminPortalSCIM styles={styles} config={config} />;
          }
          ```
        </CodeGroup>
      </Step>

      <Step title="Test the Admin Portal components">
        That's it! You can now test the Admin Portal components by navigating to the routes you created.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 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.