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

# Crear una interfaz de administración delegada con la API My Organization

> Describe cómo usar Universal Components para crear interfaces de administración delegada con la API My Organization de Auth0.

Universal Components le permite crear un panel de administración de autoservicio dentro de su propia aplicación. Esto permite que sus clientes B2B, designados como administradores de su [Organización de Auth0](/es/docs/manage-users/organizations), gestionen su propia marca, proveedores de identidad y dominios verificados, sin necesidad de acceder a Auth0 Dashboard ni de recurrir a un equipo de soporte para realizar acciones administrativas básicas.

<div id="how-it-works">
  ## Cómo funciona
</div>

Universal Components utiliza la [API My Organization](/es/docs/api/myorganization), que opera con tokens con ámbito de usuario, para crear un [Dashboard administrativo de SSO de autoservicio](/es/docs/authenticate/enterprise-connections/self-service-enterprise-configuration). Cuando un administrador inicia sesión en el Dashboard integrado en su aplicación, el SDK de Auth0 obtiene un Token de acceso que incluye alcances específicos de la Organización para privilegios administrativos. Los componentes utilizan este token para llamar a la API en nombre del usuario que ha iniciado sesión, lo que garantiza que los administradores delegados solo puedan modificar la Organización de Auth0 específica a la que pertenecen.

<div id="available-components">
  ### Componentes disponibles
</div>

Cada componente se asocia con endpoints específicos de la [API My Organization](/es/docs/api/myorganization) para realizar tareas administrativas.

| **Componente**                                                                                                                                       | **Endpoint de API**                   |
| :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------ |
| **OrganizationDetailsEdit** — Edita el nombre de la organización, el nombre para mostrar, los colores de la marca y el logotipo.                     | `/my-org/details`                     |
| **SsoProviderTable** — Enumera, habilita, deshabilita, elimina y desvincula proveedores de identidad de SSO.                                         | `/my-org/identity-providers`          |
| **SsoProviderCreate** — Asistente de varios pasos para crear proveedores de SSO (Okta, ADFS, SAML, OIDC, Google Workspace, Azure AD, Ping Federate). | `/my-org/identity-providers`          |
| **SsoProviderEdit** — Configura los ajustes de autenticación, habilita el aprovisionamiento y administra tokens de SCIM y asociaciones de dominios.  | `/my-org/identity-providers/{idp_id}` |
| **DomainTable** — Crea, verifica, elimina y asocia dominios con proveedores de identidad.                                                            | `/my-org/domains`                     |

<div id="configure-auth0-dashboard">
  ## Configurar Auth0 Dashboard
</div>

Antes de usar cualquier componente de My Organization, debes configurar tu inquilino de Auth0 con las [APIs](/es/docs/api), las aplicaciones y los [alcances](/es/docs/api/myorganization) adecuados.

<Tabs>
  <Tab title="React">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuración de Auth0 Dashboard** - Completa todos los pasos que se indican a continuación antes de usar los componentes de My
      Organization.
    </Callout>

    ## **Crear aplicación**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Este ejemplo usa una aplicación de una sola página (SPA). Para los frameworks de React con renderizado del lado del servidor, consulta la pestaña Next.js.
    </Callout>

    1. Vaya a [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications). Seleccione **Create Application**.

    2. Selecciona **Aplicaciones web de una sola página**.

    3. En la pestaña **Settings**, agrega `http://localhost:5173` a los siguientes campos:
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. En **Login Experience**, seleccione:
       <br />A. Usuarios empresariales.
       <br />B. (Opcional) Solicitar Organización.

    ## **Habilitar la API My Organization**

    1. Vaya a [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications).
    2. Seleccione **[My Organization API](/es/docs/api/myorganization)** y asegúrese de que esté habilitada en su inquilino.

    ## **Configurar el acceso a la aplicación**

    1. Vaya a la pestaña **Application Access**.
    2. Selecciona **Edit** en la aplicación que quieras usar.
    3. Configure los siguientes ajustes:
       <br />A. [Perfil de conexión](/es/docs/authenticate/enterprise-connections/connection-profile#connection-profile): Seleccione o cree un perfil con asignaciones de atributos de conexión.
       <br />B. [Perfil de atributos de usuario](/es/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): Seleccione o cree un perfil con asignaciones de atributos de usuario.
       <br />C. [Proveedores de identidad](/es/docs/authenticate/identity-providers) compatibles: habilite los proveedores que sus clientes pueden usar.
       <br />D. Comportamiento de eliminación de la conexión: elija **Allow** o **Allow if Empty**.
       <br />    • **Allow**: Los usuarios pueden eliminar conexiones, lo que elimina todos los usuarios de esa conexión.
       <br />    • **Allow if Empty**: Los usuarios solo pueden eliminar conexiones que no tengan usuarios.
       <br />E. Autorización de acceso de usuario: Elija **No autorizado**, **Autorizado** o **Todos**.
       <br />    • **No autorizado**: No se concede ningún permiso.
       <br />    • **Autorizado**: Seleccione permisos específicos.
       <br />    • **Todos**: Incluye todos los permisos actuales y futuros.
       <br />F. Autorización de acceso de credenciales de cliente: Elija **No autorizado**, **Autorizado** o **Todos**.
    4. Selecciona **Guardar**.

    ## **Configurar base de datos y usuario**

    1. Vaya a [**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) para crear una conexión de base de datos.
    2. Seleccione la pestaña **Applications** de la conexión y habilite la nueva aplicación SPA.
    3. Cree un usuario de prueba en esta base de datos para realizar pruebas iniciales.

    ## **Configurar rol**

    1. Cree un rol (por ejemplo, "Administrador de la organización").
    2. Agrega al rol los alcances requeridos de la API My Organization.

    <Accordion title="Alcances requeridos">
      ```
          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
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      El token del usuario solo incluirá los permisos que existan tanto en el rol que tiene asignado como en la configuración de Autorización de acceso del usuario establecida en el paso anterior.
    </Callout>

    ## **Crear Organización**

    1. Vaya a [**Organizaciones > Crear organización**](https://manage.auth0.com/#/organizations).
    2. Configure la Organización de Auth0:
       <br />A. En **Miembros**: agregue su usuario de prueba y asígnele el rol "Administrador de la organización".
       <br />B. En **Conexiones**: habilite su conexión de base de datos.

    ## **Configurar variables de entorno**

    1. Cree un archivo `.env` en la raíz de su proyecto de React:

    ```bash theme={null}
    VITE_AUTH0_DOMAIN=your-domain.auth0.com
      VITE_AUTH0_CLIENT_ID=your-spa-client-id
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Usted es responsable de garantizar que su uso de My Organization API y Embeddable UI Components cumpla con sus políticas de seguridad y con la legislación aplicable,
      incluidos los permisos otorgados a sus usuarios finales.
    </Callout>

    <Check>
      El usuario debe estar autenticado y ser miembro de la Organización de Auth0. Los componentes cargan automáticamente los datos de la Organización desde el contexto del usuario actual. Para obtener más información, consulta [Auth0 Universal Components](/es/docs/get-started/universal-components/universal-components-overview) para ver la instalación y la configuración de `Auth0ComponentProvider`
    </Check>
  </Tab>

  <Tab title="Next.js">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuración de Auth0 Dashboard** - Completa todos los pasos que se indican a continuación antes de usar los componentes de My Organization.
    </Callout>

    ## **Crear aplicación**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      En este ejemplo se usa una Regular Web Application para Next.js. También puede configurar una Single Page Application siguiendo pasos similares.
    </Callout>

    1. Vaya a [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications). Seleccione **Crear aplicación**.

    2. Seleccione **Regular Web Application**.

    3. En la pestaña **Settings**, agrega `http://localhost:5173` a los siguientes campos:
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. En **Login Experience**, seleccione:
       <br />A. Usuarios empresariales.
       <br />B. (Opcional) Solicitar Organización.

    ## **Habilitar la API My Organization**

    1. Vaya a [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications).
    2. Seleccione **[My Organization API](/es/docs/api/myorganization)** y asegúrese de que esté habilitada en su inquilino.

    ## **Configurar el acceso a la aplicación**

    1. Vaya a la pestaña **Application Access**.
    2. Selecciona **Edit** en la aplicación que quieras usar.
    3. Configure las siguientes opciones:
       <br />A. [Perfil de conexión](/es/docs/authenticate/enterprise-connections/connection-profile#connection-profile): Seleccione o cree un perfil con asignaciones de atributos de conexión.
       <br />B. [Perfil de atributos de usuario](/es/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): Seleccione o cree un perfil con asignaciones de atributos de usuario.
       <br />C. [Proveedores de identidad](/es/docs/authenticate/identity-providers) compatibles: Habilite los proveedores que sus clientes puedan usar.
       <br />D. Comportamiento de eliminación de la conexión: elija **Permitir** o **Permitir si está vacía**.
       <br />    • **Permitir**: Los usuarios pueden eliminar conexiones, lo que elimina todos los usuarios de esa conexión.
       <br />    • **Permitir si está vacía**: Los usuarios solo pueden eliminar conexiones que no tengan usuarios.
       <br />E. Autorización de acceso de usuario: Elija **No autorizado**, **Autorizado** o **Todos**.
       <br />    • **No autorizado**: No se concede ningún permiso.
       <br />    • **Autorizado**: Seleccione permisos específicos.
       <br />    • **Todos**: Incluye todos los permisos actuales y futuros.
       <br />F. Autorización de acceso para credenciales de cliente: Elija **No autorizado**, **Autorizado** o **Todos**.
    4. Selecciona **Guardar**.

    ## **Configurar base de datos y usuario**

    1. Vaya a [**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) para crear una conexión de base de datos.
    2. Seleccione la pestaña **Applications** de la conexión y habilite la nueva aplicación SPA.
    3. Cree un usuario de prueba en esta base de datos para realizar pruebas iniciales.

    ## **Configurar rol**

    1. Cree un rol (por ejemplo, "Administrador de la organización").
    2. Agrega al rol los alcances requeridos de la API My Organization.

    <Accordion title="Alcances requeridos">
      ```
          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
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      El token del usuario solo incluirá los permisos que existan tanto en el rol que tiene asignado como en la configuración de Autorización de acceso del usuario establecida en el paso anterior.
    </Callout>

    ## **Crear Organización**

    1. Vaya a [**Organizaciones > Crear organización**](https://manage.auth0.com/#/organizations).
    2. Configure la Organización de Auth0:
       <br />A. En **Miembros**: agregue su usuario de prueba y asígnele el rol "Administrador de la organización".
       <br />B. En **Conexiones**: habilite su conexión de base de datos.

    ## **Configurar variables de entorno**

    1. Cree un archivo `.env` en la raíz de su proyecto de React:

    ```bash theme={null}
    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
    ```

    Para Next.js con el SDK @auth0/nextjs-auth0, consulta la [documentación del SDK de Auth0 para Next.js](https://auth0.com/docs/quickstart/webapp/nextjs) para obtener instrucciones de configuración completas.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Usted es responsable de garantizar que el uso que haga de My Organization API y Embeddable UI Components cumpla con sus políticas de seguridad y con las
      leyes aplicables, incluidos los permisos otorgados a sus usuarios finales.
    </Callout>

    <Check>
      El usuario debe estar autenticado y ser miembro de la Organización de Auth0. Los componentes cargan automáticamente los datos de la Organización desde el contexto del usuario actual. Para obtener más información, consulta [Auth0 Universal Components](/es/docs/get-started/universal-components/universal-components-overview) para ver la instalación y la configuración de `Auth0ComponentProvider`
    </Check>
  </Tab>

  <Tab title="shadcn">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuración de Auth0 Dashboard** - Completa todos los pasos que se indican a continuación antes de usar los componentes de My Organization.
    </Callout>

    ## **Crear aplicación**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      En este ejemplo se usa una Single Page Application, pero también puedes configurar una Regular Web Application (RWA) siguiendo pasos similares.
    </Callout>

    1. Vaya a [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications). Seleccione **Create Application**.

    2. Selecciona **Aplicaciones web de una sola página**.

    3. En la pestaña **Settings**, agrega `http://localhost:5173` a los siguientes campos:
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. En **Login Experience**, seleccione:
       <br />A. Usuarios empresariales.
       <br />B. (Opcional) Solicitar Organización.

    ## **Habilitar la API My Organization**

    1. Vaya a [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications).
    2. Seleccione **[My Organization API](/es/docs/api/myorganization)** y asegúrese de que esté habilitada en su inquilino.

    ## **Configurar el acceso a la aplicación**

    1. Vaya a la pestaña **Application Access**.
    2. Selecciona **Edit** en la aplicación que quieras usar.
    3. Configure los siguientes ajustes:
       <br />A. [Perfil de conexión](/es/docs/authenticate/enterprise-connections/connection-profile#connection-profile): Seleccione o cree un perfil con asignaciones de atributos de conexión.
       <br />B. [Perfil de atributos de usuario](/es/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): Seleccione o cree un perfil con asignaciones de atributos de usuario.
       <br />C. [Proveedores de identidad](/es/docs/authenticate/identity-providers) compatibles: Habilite los proveedores que sus clientes puedan usar.
       <br />D. Comportamiento al eliminar la conexión: Elija **Permitir** o **Permitir si está vacía**.
       <br />    • **Permitir**: Los usuarios pueden eliminar conexiones, lo que elimina todos los usuarios de esa conexión.
       <br />    • **Permitir si está vacía**: Los usuarios solo pueden eliminar conexiones que no tengan usuarios.
       <br />E. Autorización de acceso de usuario: Elija **No autorizado**, **Autorizado** o **Todos**.
       <br />    • **No autorizado**: No se concede ningún permiso.
       <br />    • **Autorizado**: Seleccione permisos específicos.
       <br />    • **Todos**: Incluye todos los permisos actuales y futuros.
       <br />F. Autorización de acceso para credenciales de cliente: Elija **No autorizado**, **Autorizado** o **Todos**.
    4. Selecciona **Guardar**.

    ## **Configurar base de datos y usuario**

    1. Vaya a [**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) para crear una conexión de base de datos.
    2. Seleccione la pestaña **Applications** de la conexión y habilite la nueva aplicación SPA.
    3. Cree un usuario de prueba en esta base de datos para realizar pruebas iniciales.

    ## **Configurar rol**

    1. Cree un rol (por ejemplo, "Administrador de la organización").
    2. Agrega al rol los alcances requeridos de la API My Organization.

    <Accordion title="Alcances requeridos">
      ```
          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
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      El token del usuario solo incluirá los permisos que existan tanto en el rol que tiene asignado como en la configuración de Autorización de acceso del usuario establecida en el paso anterior.
    </Callout>

    ## **Crear Organización**

    1. Vaya a [**Organizaciones > Crear organización**](https://manage.auth0.com/#/organizations).
    2. Configure la Organización de Auth0:
       <br />A. En **Miembros**: agregue su usuario de prueba y asígnele el rol "Administrador de la organización".
       <br />B. En **Conexiones**: habilite su conexión de base de datos.

    ## **Configurar variables de entorno**

    <Warning>
      La configuración de las variables de entorno varía según el framework y la configuración. Consulta el directorio `examples/` del repositorio para ver ejemplos de implementación específicos.
    </Warning>

    Cree un archivo `.env` en la raíz de su proyecto de React:

    ```bash theme={null}
    VITE_AUTH0_DOMAIN=your-domain.auth0.com
    VITE_AUTH0_CLIENT_ID=your-spa-client-id
    ```

    <Warning>
      Usted es responsable de garantizar que su uso de My Organization API y Embeddable UI Components cumpla con sus políticas de seguridad y con la legislación aplicable,
      incluidos los permisos otorgados a sus usuarios finales.
    </Warning>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      El usuario debe estar autenticado y ser miembro de la Organización de Auth0. Los componentes cargan automáticamente los datos de la Organización desde el contexto del usuario actual. Para obtener más información, consulta [Auth0 Universal Components](/es/docs/get-started/universal-components/universal-components-overview) para ver la instalación y la configuración de `Auth0ComponentProvider`
    </Callout>
  </Tab>
</Tabs>