Build a Delegated Admin Interface with My Organization API

Describes how to use Universal Components to build delegated administration interfaces with Auth0’s My Organization API.

Universal Components allow you to build a self-service administrative dashboard within your own application. This enables your B2B customers delegated as administrators to your Auth0 Organization to manage their own branding, identity providers, and verified domains without the need to access Auth0 Dashboard or require a support team for basic administrative actions.

How it works

Universal Components use the My Organization API, which operates on user-scoped tokens, to create a Self-Service SSO Administrative Dashboard. When an administrator logs into your dashboard embedded in your application, the Auth0 SDK retrieves an access token containing Organization-specific scopes for admin privileges. The components use this token to call the API as the logged-in user, ensuring delegated administrators can only modify the specific Auth0 Organization to which they belong.

Available components

Each component is mapped to specific endpoints within the My Organization API to perform administrative tasks.

Component	API endpoint
OrganizationDetailsEdit — Edit Organization name, display name, branding colors, and logo.	/my-org/details
SsoProviderTable — List, enable, disable, delete, and detach SSO identity providers.	/my-org/identity-providers
SsoProviderCreate — Multi-step wizard for creating SSO providers (Okta, ADFS, SAML, OIDC, Google Workspace, Azure AD, Ping Federate).	/my-org/identity-providers
SsoProviderEdit — Configure authentication settings, enable provisioning, and manage SCIM tokens and domain associations.	/my-org/identity-providers/{idp_id}
DomainTable — Create, verify, delete, and associate domains with identity providers.	/my-org/domains

Configure Auth0 Dashboard

Before using any My Organization components, you need to configure your Auth0 tenant with the proper APIs, applications, and scopes.

React

Auth0 Dashboard Configuration—Complete all steps below before using My Organization components.

Create the application

This example uses a Single Page Application (SPA). For server-side rendered React frameworks, refer to the Next.js tab.

1. Navigate to Auth0 Dashboard > Applications > Applications. Select Create Application.

2. Choose Single Page Web Applications.

3. In the Settings tab, add http://localhost:5173 to the following fields:

   • Allowed Callback URLs
   • Allowed Logout URLs

4. Under Login Experience, select:

   • Business users.
   • (Optional) Prompt for Organization.

Enable the My Organization API

1. Navigate to Dashboard > Applications > APIs.
2. Select My Organization API and ensure it is enabled for your tenant.

Configure application access

1. Navigate to the Application Access tab.
2. Select Edit for your Application you want to use.
3. Configure the following settings:
   • Connection Profile: Select or create a profile with connection attribute mappings.
   • User Attribute Profile: Select or create a profile with user attribute mappings.
   • Supported Identity Providers: Enable providers your customers can use.
   • Connection Deletion Behavior: Choose Allow or Allow if Empty.
     • Allow: Users can delete connections, which deletes all users from that connection.
     • Allow if Empty: Users can only delete connections with no users.
   • User Access Authorization: Choose Unauthorized, Authorized, or All.
     • Unauthorized: No permissions allowed.
     • Authorized: Select specific permissions.
     • All: Include all existing and future permissions.
   • Client Credential Access Authorization: Choose Unauthorized, Authorized, or All.
4. Select Save.

Set up the database and user

1. Navigate to Auth0 Dashboard > Authentication > Database to create a database connection.
2. Select the Applications tab of the connection, enable your new SPA application.
3. Create a test user in this database for initial testing.

Set up the role

1. Create a role (for example, “Organization Admin”).
2. Add the required scopes from the My Organization API to the role.

Required Scopes

    read:my_org:details
    update:my_org:details
    create:my_org:identity_providers
    read:my_org:identity_providers
    update:my_org:identity_providers
    delete:my_org:identity_providers
    update:my_org:identity_providers_detach
    create:my_org:identity_providers_domains
    delete:my_org:identity_providers_domains
    read:my_org:domains
    delete:my_org:domains
    create:my_org:domains
    update:my_org:domains
    read:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_scim_tokens
    delete:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_provisioning
    read:my_org:identity_providers_provisioning
    delete:my_org:identity_providers_provisioning
    read:my_org:configuration

The user’s token will only include permissions that exist in both their assigned role and the User Access Authorization settings configured in the previous step.

Create an Organization

1. Navigate to Organizations > Create Organization.
2. Configure the Auth0 Organization:
   • In Members: Add your test user and assign the “Organization Admin” role.
   • In Connections: Enable your database connection.

Configure environment variables

1. Create a .env file in the root of your React project:

  VITE_AUTH0_DOMAIN=your-domain.auth0.com
  VITE_AUTH0_CLIENT_ID=your-spa-client-id

You are responsible for ensuring that your use of the My Organization API and Embeddable UI Components comply with your security policies and applicable laws, including any permissions granted to your end users.

User must be authenticated and a member of the Auth0 Organization. Components automatically load Organization data from current user context. To learn more, read Auth0 Universal Components for installation and Auth0ComponentProvider configuration

Next.js

Auth0 Dashboard Configuration—Complete all steps below before using My Organization components.

Create the application

This example uses a Regular Web Application for Next.js. You can also configure a Single Page Application following similar steps.

1. Navigate to Auth0 Dashboard > Applications > Applications. Select Create Application.

2. Choose Regular Web Application.

3. In the Settings tab, add http://localhost:5173 to the following fields:

   • Allowed Callback URLs
   • Allowed Logout URLs

4. Under Login Experience, select:

   • Business users.
   • (Optional) Prompt for Organization.

Enable the My Organization API

1. Navigate to Dashboard > Applications > APIs.
2. Select My Organization API and ensure it is enabled for your tenant.

Configure application access

1. Navigate to the Application Access tab.
2. Select Edit for your Application you want to use.
3. Configure the following settings:
   • Connection Profile: Select or create a profile with connection attribute mappings.
   • User Attribute Profile: Select or create a profile with user attribute mappings.
   • Supported Identity Providers: Enable providers your customers can use.
   • Connection Deletion Behavior: Choose Allow or Allow if Empty.
     • Allow: Users can delete connections, which deletes all users from that connection.
     • Allow if Empty: Users can only delete connections with no users.
   • User Access Authorization: Choose Unauthorized, Authorized, or All.
     • Unauthorized: No permissions allowed.
     • Authorized: Select specific permissions.
     • All: Include all existing and future permissions.
   • Client Credential Access Authorization: Choose Unauthorized, Authorized, or All.
4. Select Save.

Set up the database and user

1. Navigate to Auth0 Dashboard > Authentication > Database to create a database connection.
2. Select the Applications tab of the connection, enable your new SPA application.
3. Create a test user in this database for initial testing.

Set up the role

1. Create a role (for example, “Organization Admin”).
2. Add the required scopes from the My Organization API to the role.

Required Scopes

    read:my_org:details
    update:my_org:details
    create:my_org:identity_providers
    read:my_org:identity_providers
    update:my_org:identity_providers
    delete:my_org:identity_providers
    update:my_org:identity_providers_detach
    create:my_org:identity_providers_domains
    delete:my_org:identity_providers_domains
    read:my_org:domains
    delete:my_org:domains
    create:my_org:domains
    update:my_org:domains
    read:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_scim_tokens
    delete:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_provisioning
    read:my_org:identity_providers_provisioning
    delete:my_org:identity_providers_provisioning
    read:my_org:configuration

The user’s token will only include permissions that exist in both their assigned role and the User Access Authorization settings configured in the previous step.

Create an Organization

1. Navigate to Organizations > Create Organization.
2. Configure the Auth0 Organization:
   • In Members: Add your test user and assign the “Organization Admin” role.
   • In Connections: Enable your database connection.

Configure environment variables

1. Create a .env file in the root of your React project:

 NEXT_PUBLIC_AUTH0_DOMAIN=your-domain.auth0.com
NEXT_PUBLIC_AUTH0_CLIENT_ID=your-client-id
AUTH0_SECRET=your-secret
AUTH0_ISSUER_BASE_URL=https://your-domain.auth0.com

For Next.js with the @auth0/nextjs-auth0 SDK, follow the Auth0 Next.js SDK documentation for complete setup instructions.

You are responsible for ensuring that your use of the My Organization API and Embeddable UI Components comply with your security policies and applicable laws, including any permissions granted to your end users.

User must be authenticated and a member of the Auth0 Organization. Components automatically load Organization data from current user context. To learn more, read Auth0 Universal Components for installation and Auth0ComponentProvider configuration

shadcn

Auth0 Dashboard Configuration—Complete all steps below before using My Organization components.

Create the application

This example uses a Single Page Application, but you can also configure a Regular Web Application (RWA) following similar steps.

1. Navigate to Auth0 Dashboard > Applications > Applications. Select Create Application.

2. Choose Single Page Web Applications.

3. In the Settings tab, add http://localhost:5173 to the following fields:

   • Allowed Callback URLs
   • Allowed Logout URLs

4. Under Login Experience, select:

   • Business users.
   • (Optional) Prompt for Organization.

Enable the My Organization API

1. Navigate to Dashboard > Applications > APIs.
2. Select My Organization API and ensure it is enabled for your tenant.

Configure application access

1. Navigate to the Application Access tab.
2. Select Edit for your Application you want to use.
3. Configure the following settings:
   • Connection Profile: Select or create a profile with connection attribute mappings.
   • User Attribute Profile: Select or create a profile with user attribute mappings.
   • Supported Identity Providers: Enable providers your customers can use.
   • Connection Deletion Behavior: Choose Allow or Allow if Empty.
     • Allow: Users can delete connections, which deletes all users from that connection.
     • Allow if Empty: Users can only delete connections with no users.
   • User Access Authorization: Choose Unauthorized, Authorized, or All.
     • Unauthorized: No permissions allowed.
     • Authorized: Select specific permissions.
     • All: Include all existing and future permissions.
   • Client Credential Access Authorization: Choose Unauthorized, Authorized, or All.
4. Select Save.

Set up the database and user

1. Navigate to Auth0 Dashboard > Authentication > Database to create a database connection.
2. Select the Applications tab of the connection, enable your new SPA application.
3. Create a test user in this database for initial testing.

Set up the role

1. Create a role (for example, “Organization Admin”).
2. Add the required scopes from the My Organization API to the role.

Required Scopes

    read:my_org:details
    update:my_org:details
    create:my_org:identity_providers
    read:my_org:identity_providers
    update:my_org:identity_providers
    delete:my_org:identity_providers
    update:my_org:identity_providers_detach
    create:my_org:identity_providers_domains
    delete:my_org:identity_providers_domains
    read:my_org:domains
    delete:my_org:domains
    create:my_org:domains
    update:my_org:domains
    read:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_scim_tokens
    delete:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_provisioning
    read:my_org:identity_providers_provisioning
    delete:my_org:identity_providers_provisioning
    read:my_org:configuration

The user’s token will only include permissions that exist in both their assigned role and the User Access Authorization settings configured in the previous step.

Create an Organization

1. Navigate to Organizations > Create Organization.
2. Configure the Auth0 Organization:
   • In Members: Add your test user and assign the “Organization Admin” role.
   • In Connections: Enable your database connection.

Configure environment variables

Environment variable configurations vary by framework and setup. Check the examples/ directory in the repository for specific implementation examples.

Create a .env file in the root of your React project:

VITE_AUTH0_DOMAIN=your-domain.auth0.com
VITE_AUTH0_CLIENT_ID=your-spa-client-id

You are responsible for ensuring that your use of the My Organization API and Embeddable UI Components comply with your security policies and applicable laws, including any permissions granted to your end users.

User must be authenticated and a member of the Auth0 Organization. Components automatically load Organization data from current user context. To learn more, read Auth0 Universal Components for installation and Auth0ComponentProvider configuration