Skip to main content
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 - allows of the to invite new Members and manage existing Members
  • AdminPortalOrgSettings - allows Members of the Organization to manage their own Organization settings, including authentication methods and JIT provisioning settings.
  • AdminPortalSSO - allows Members of the Organization to manage their own SSO connections
  • AdminPortalSCIM - allows Members of the Organization to manage their own SCIM connections
Want to see the Admin Portal in action? Log into your Stytch Dashboard and check out the Team, Access Settings, SSO, and SCIM pages. These are all built with Admin Portal!
Admin Portal Member Management UI

Add Admin Portal to your application

1

Before you start

Complete all the steps in the installation guide
2

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

Add the Admin Portal components to each page

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} />;
}
4

Test the Admin Portal components

That’s it! You can now test the Admin Portal components by navigating to the routes you created.

RBAC considerations

Admin Portal respects all RBAC policies configured in your Stytch Dashboard. 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 for more information about configuring RBAC policies.