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

> Use Admin Portal to build Org Management UI in your 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

The simplest way to give your customers a UI to manage their organization and member settings is using Stytch's pre-built [Admin Portal](/api-reference/b2b/frontend-sdks/react/prebuilt-ui/admin-portal).

Admin Portal provides:

* [`AdminPortalMemberManagement`](/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`](/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`](/api-reference/b2b/frontend-sdks/react/prebuilt-ui/admin-portal/sso) - allows Members of the Organization to manage their own SSO connections
* [`AdminPortalSCIM`](/api-reference/b2b/frontend-sdks/react/prebuilt-ui/admin-portal/scim) - allows Members of the Organization to manage their own SCIM connections

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

## Custom organization management UI

If you need more control over your org management ui, you can build custom flows for managing members and organization settings using the Stytch API.

<Tabs>
  <Tab title="Member management">
    <Columns cols={3}>
      <Card title="Search Members" icon="square-function" href="/api-reference/b2b/frontend-sdks/react/methods/members/search-members">
        Use [`Search Members`](/api-reference/b2b/frontend-sdks/react/methods/members/search-members) to display all Members in the Organization.
      </Card>

      <Card title="Update Member" icon="square-function" href="/api-reference/b2b/frontend-sdks/react/methods/members/update-member">
        Use [`Update Member`](/api-reference/b2b/frontend-sdks/react/methods/members/update-member) to update a Member's Roles.
      </Card>

      <Card title="Invite a New Member" icon="square-function" href="/api-reference/b2b/frontend-sdks/react/methods/email-magic-links/invite">
        Use [`Invite Member`](/api-reference/b2b/frontend-sdks/react/methods/email-magic-links/invite) to invite a new Member to the Organization.
      </Card>
    </Columns>

    <Steps>
      <Step title="Display all Members">
        Use [`Search Members`](/api-reference/b2b/frontend-sdks/react/methods/members/search-members) to display all Members in the Organization.

        ```jsx theme={null}
        import { useStytchB2BClient } from '@stytch/react/b2b';

        const stytch = useStytchB2BClient();

        export const MemberTable = () => {
          const [members, setMembers] = useState([]);
          const stytch = useStytchB2BClient();

          useEffect(() => {
            const fetchMembers = async () => {
              const response = await stytch.members.search();
              setMembers(response.members);
            };
            fetchMembers();
            setMembers(response.members);
          }, [stytch]);

          return (
            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Roles</th>
                </tr>
              </thead>
              <tbody>
                {members.map((member) => (
                  <tr key={member.member_id}>
                    <td>{member.name}</td>
                    <td>{member.email_address}</td>
                    <td>{member.roles.map((role) => role.role_id).join(', ')}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          );
        };
        ```
      </Step>

      <Step title="Update a Member Information">
        Use [`Update Member`](/api-reference/b2b/frontend-sdks/react/methods/members/update-member) to update a Member from the table.

        ```jsx theme={null}
        import { useStytchB2BClient } from '@stytch/react/b2b';

        export const UpdateMember = ({ memberId }) => {
          const stytch = useStytchB2BClient();
          const [name, setName] = useState('');

          const handleUpdate = async () => {
            await stytch.members.update({ member_id: memberId, name });
          };

          return (
            <div>
              <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Enter member name"
              />
              <button onClick={handleUpdate}>Update Member</button>
            </div>
          );
        };
        ```
      </Step>

      <Step title="Invite a New Member">
        Add an [`Invite Member`](/api-reference/b2b/frontend-sdks/react/methods/email-magic-links/invite) button to allow inviting new Members to the Organization.

        ```jsx theme={null}
        import { useStytchB2BClient } from '@stytch/react/b2b';

        const stytch = useStytchB2BClient();

        export const InviteMember = () => {
          const stytch = useStytchB2BClient();
          const [email, setEmail] = useState('');

          const handleInvite = async () => {
            await stytch.members.invite({ email_address: email });
          };

          return (
            <div>
              <input
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter email address"
              />
              <button onClick={handleInvite}>Invite Member</button>
            </div>
          );
        };
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Organization management">
    <Columns cols={2}>
      <Card title="Get Organization Settings" icon="square-function" href="/api-reference/b2b/frontend-sdks/react/methods/organizations/get-organization">
        Use [`Get Organization`](/api-reference/b2b/frontend-sdks/react/methods/organizations/get-organization) to get the Organization's settings.
      </Card>

      <Card title="Update Organization Settings" icon="square-function" href="/api-reference/b2b/frontend-sdks/react/methods/organizations/update-organization">
        Use [`Update Organization`](/api-reference/b2b/frontend-sdks/react/methods/organizations/update-organization) to update the Organization's settings.
      </Card>
    </Columns>

    <Steps>
      <Step title="View Organization Settings">
        Use the [`Get Organization`](/api-reference/b2b/frontend-sdks/react/methods/organizations/get-organization) endpoint to display the Organization's settings.

        ```jsx theme={null}
        import { useStytchB2BClient } from '@stytch/react/b2b';

        export const OrganizationInfo = () => {
          const { organization } = useStytchOrganization();

          return (
            <div>
              <h1>Organization Name: {organization.organization_name}</h1>

              <h2>Allowed Authentication Methods:</h2>
              {organization.auth_methods === "RESTRICTED" ? (
                <ul>
                  {organization.allowed_auth_methods.map((method) => (
                    <li key={method}>{method}</li>
                  ))}
                </ul>
              ) : (
                <p>All authentication methods are allowed</p>
              )}

              {.... display other organization settings ...}
            </div>
          );
        };
        ```
      </Step>

      <Step title="Update Organization Settings">
        Use [`Update Organization`](/api-reference/b2b/frontend-sdks/react/methods/organizations/update-organization) to update the Organization. In this example, we'll allow updating the allowed authentication methods.

        ```jsx theme={null}
        import { useStytchB2BClient } from '@stytch/react/b2b';

        export const UpdateOrganization = () => {
          const { organization } = useStytchOrganization();
          const [authMethods, setAuthMethods] = useState<'ALL_ALLOWED' | 'RESTRICTED'>('ALL_ALLOWED');
          const [allowedAuthMethods, setAllowedAuthMethods] = useState<string[]>([]);

          const handleUpdate = async () => {
            await stytch.organization.update({ auth_methods: authMethods, allowed_auth_methods: allowedAuthMethods });
          };

          return (
            <div>
              <select value={authMethods} onChange={(e) => setAuthMethods(e.target.value as 'ALL_ALLOWED' | 'RESTRICTED')}>
                <option value="ALL_ALLOWED">ALL_ALLOWED</option>
                <option value="RESTRICTED">RESTRICTED</option>
              </select>
              <select value={allowedAuthMethods} onChange={(e) => setAllowedAuthMethods(e.target.value as string[])}>
                <option value="magic_link">Email Magic Links</option>
                <option value="email_otp">Email OTPs</option>
                <option value="password">Passwords</option>
                <option value="google_oauth">Google OAuth</option>
              </select>
              <button onClick={handleUpdate}>Update Organization</button>
            </div>
          );
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>