Edición del proveedor de SSO

El componente SsoProviderEdit ofrece una interfaz unificada para editar proveedores de Single Sign-On.

React
Next.js
shadcn

Requisitos de configuración

Se requiere la configuración de Auth0 - Asegúrate de que tu tenant esté configurado con la API de My Organization. Ver la guía de configuración →

Instalación

pnpm add @auth0/universal-components-react

Al ejecutar cualquiera de los dos comandos, también se instala la dependencia @auth0/universal-components-core para utilidades compartidas y la integración con Auth0.

Primeros pasos

import { SsoProviderEdit } from "@auth0/universal-components-react/spa";
import { useNavigate, useParams } from "react-router-dom";

export function EditProviderPage() {
  const { providerId } = useParams();
  const navigate = useNavigate();

  return (
    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        onClick: () => navigate("/providers"),
      }}
      sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
    />
  );
}

Ejemplo de integración completa

import React from "react";
import { SsoProviderEdit } from "@auth0/universal-components-react/spa";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate, useParams } from "react-router-dom";
import { analytics } from "./lib/analytics";

function EditProviderPage() {
  const { providerId } = useParams();
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => navigate("/providers"),
        }}
        sso={{
          updateAction: {
            onAfter: (provider) => {
              analytics.track("Provider Updated", { name: provider.name });
              toast.success("Provider configuration saved");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
            onAfter: () => {
              toast.success("Provider deleted");
              navigate("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("SCIM provisioning enabled"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("Copy your SCIM token - it won't be shown again"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain} verified`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "Configuration",
            provisioning: "User Sync (SCIM)",
            domains: "Linked Domains",
          },
        }}
        styling={{
          variables: {
            common: { "--color-primary": "#059669" },
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Necesario para gestionar los desafíos de autenticación escalonada mediante el popup de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Props obligatorias

Las props requeridas son fundamentales para el funcionamiento del componente. SsoProviderEdit requiere el ID del proveedor para cargar y editar el proveedor correcto.

Propiedad	Tipo	Descripción
`providerId`	`string`	Obligatorio. ID del proveedor de SSO que se va a editar.

Props de visualización

Las props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento.

Propiedad	Tipo	Descripción
`hideHeader`	`boolean`	Oculta la sección de encabezado. Valor predeterminado: `false`

Props de acción

Las interacciones del usuario en las tres pestañas se gestionan mediante varias props de acción organizadas bajo el nombre de la pestaña correspondiente (sso, provisioning y domains).

Propiedad	Tipo	Descripción
`backButton`	`Object`	Configuración del botón de retroceso.
`sso`	`SsoProviderTabEditProps`	Acciones de la pestaña de SSO. Detalles
`provisioning`	`SsoProvisioningTabEditProps`	Acciones de la pestaña de aprovisionamiento. Detalles
`domains`	`SsoDomainsTabEditProps`	Acciones de la pestaña de dominios. Detalles

backButtonType: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }Configura el botón de retroceso en el encabezado del componente. Úsalo para volver a tu lista de proveedores.Propiedades:

icon - Componente de icono personalizado de Lucide (opcional; por defecto, ArrowLeft)
onClick - Manejador de clic para la navegación

Ejemplo:

import { ChevronLeft } from "lucide-react";

<SsoProviderEdit
  providerId={providerId}
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/providers"),
  }}
/>;

Acciones de la pestaña SSO

La prop sso configura las acciones para la pestaña de configuración de SSO. Esta pestaña gestiona la configuración de autenticación del proveedor.

Acción	Tipo	Descripción
`updateAction`	`ComponentAction<IdentityProvider, IdentityProvider>`	Actualiza la configuración del proveedor.
`deleteAction`	`ComponentAction<IdentityProvider>`	Elimina el proveedor permanentemente.
`removeFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Lo quita de la organización.

sso.updateActionType: ComponentAction<IdentityProvider, IdentityProvider>Controla el guardado de cambios en la configuración del proveedor (ID de cliente, secretos, certificados, etc.).Propiedades:

disabled - Deshabilita el botón Guardar
onBefore(provider) - Se ejecuta antes de la actualización. Devuelve false para impedir que se guarde (p. ej., para mostrar un cuadro de diálogo de confirmación).
onAfter(provider, result) - Se ejecuta después de que el proveedor se haya actualizado correctamente. Úsalo para mostrar una notificación o registrar el evento.

Ejemplo:

<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        return confirm("Save changes to provider configuration?");
      },
      onAfter: (provider) => {
        toast.success("Provider configuration saved");
        analytics.track("Provider Updated", { name: provider.name });
      },
    },
  }}
/>

sso.deleteActionType: ComponentAction<IdentityProvider>Controla la eliminación permanente del proveedor de tu tenant de Auth0.Ejemplo:

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

sso.removeFromOrganizationActionType: ComponentAction<IdentityProvider>Controla la eliminación del proveedor de la organización sin borrarlo. El proveedor seguirá disponible para volver a añadirse más adelante.Ejemplo:

sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

Acciones de la pestaña de aprovisionamiento

La propiedad provisioning configura las acciones para la pestaña de aprovisionamiento SCIM. Esta pestaña gestiona el aprovisionamiento automatizado de usuarios a través del protocolo SCIM.

Acción	Tipo	Descripción
`createAction`	`ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>`	Habilita el aprovisionamiento SCIM.
`deleteAction`	`ComponentAction<IdentityProvider>`	Deshabilita el aprovisionamiento SCIM.
`createScimTokenAction`	`ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>`	Genera un token SCIM.
`deleteScimTokenAction`	`ComponentAction<IdentityProvider>`	Revoca el token SCIM.

provisioning.createActionType: ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>Habilita el aprovisionamiento SCIM para el proveedor. Una vez habilitado, puedes generar un token SCIM para que lo use tu proveedor de identidad.Ejemplo:

provisioning={{
  createAction: {
    onBefore: (provider) => {
      return confirm("Enable SCIM provisioning for this provider?");
    },
    onAfter: (provider, config) => {
      toast.success("SCIM provisioning enabled");
      console.log("SCIM endpoint:", config.scim_endpoint);
    },
  },
}}

provisioning.deleteActionType: ComponentAction<IdentityProvider>Deshabilita el aprovisionamiento SCIM y elimina toda la configuración de aprovisionamiento para ese proveedor de identidad.Ejemplo:

provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
    },
    onAfter: () => toast.success("SCIM provisioning disabled"),
  },
}}

provisioning.createScimTokenActionType: ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>Genera un nuevo token SCIM de portador para que tu proveedor de identidad se autentique con Auth0.Ejemplo:

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // El token se muestra una sola vez: el usuario debe copiarlo de inmediato
      console.log("New SCIM token generated");
    },
  },
}}

provisioning.deleteScimTokenActionType: ComponentAction<IdentityProvider>Revoca el token SCIM. El proveedor de identidad no podrá sincronizar usuarios hasta que se genere un nuevo token.Ejemplo:

provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

Acciones de la pestaña Dominios

La prop domains configura las acciones para la pestaña de dominios. Esta pestaña administra los dominios asociados al proveedor para el enrutamiento automático de usuarios.

Acción	Tipo	Descripción
`createAction`	`ComponentAction<Domain>`	Añade un dominio.
`verifyAction`	`ComponentAction<Domain>`	Verifica la titularidad del dominio.
`deleteAction`	`ComponentAction<Domain>`	Elimina un dominio.
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Asocia el dominio con el proveedor.
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Quita el dominio del proveedor.

domains.createActionType: ComponentAction<Domain>Controla la adición de nuevos dominios a la organización desde la interfaz de edición del proveedor.Ejemplo:

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

domains.verifyActionType: ComponentAction<Domain>Controla la verificación de dominio mediante un registro TXT de DNS.Ejemplo:

domains={{
  verifyAction: {
    onBefore: (domain) => {
      return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} verified successfully`);
    },
  },
}}

domains.deleteActionType: ComponentAction<Domain>Controla la eliminación de dominios.Ejemplo:

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}?`);
    },
  },
}}

domains.associateToProviderActionType: ComponentAction<Domain, IdentityProvider | null>Asocia un dominio verificado con este proveedor de SSO para el enrutamiento automático de usuarios.Ejemplo:

domains={{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}

domains.deleteFromProviderActionType: ComponentAction<Domain, IdentityProvider | null>Elimina la asociación de un dominio con este proveedor.

Props de personalización

Las props de personalización te permiten adaptar el componente a tu marca, idioma regional y requisitos de validación sin modificar el código fuente.

Prop	Tipo	Descripción
`schema`	`SsoProviderEditSchema`	Reglas de validación de campos.
`customMessages`	`Partial<SsoProviderEditMessages>`	Sobrescrituras de textos de i18n.
`styling`	`ComponentStyling<SsoProviderEditClasses>`	Variables CSS y sobrescrituras de clases.

schemaEstablece reglas de validación personalizadas para los campos de proveedor y dominio.

Campos de esquema disponibles

Todos los campos del esquema admiten: regex, errorMessage, minLength, maxLength, requiredprovider.* - Campos de configuración del proveedor según la estrategia

Comunes: name, displayName
Campos específicos de la estrategia (los mismos que en SsoProviderCreate)

domains.create.domainUrl - Validación de la URL del dominio

<SsoProviderEdit
  providerId={providerId}
  schema={{
    provider: {
      displayName: {
        required: true,
        maxLength: 100,
      },
    },
    domains: {
      create: {
        domainUrl: {
          regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
          errorMessage: "Enter a valid domain (example.com)",
        },
      },
    },
  }}
/>

customMessagesPersonaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se completan, se usarán los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

title, back_button_text

tabs - Etiquetas de las pestañas

sso, provisioning, domains

sso_tab - Pestaña de configuración de SSO

title, description
fields.* - Etiquetas de los campos del formulario según la estrategia
actions.save_button_text, actions.delete_button_text
delete_modal.*, remove_modal.*

provisioning_tab - Pestaña de aprovisionamiento

title, description
scim_endpoint.label, scim_token.label
actions.enable_button_text, actions.disable_button_text
actions.generate_token_button_text, actions.revoke_token_button_text

domains_tab - Pestaña de dominios

title, description
La misma estructura que los mensajes de DomainTable

notifications - Respuestas de la API

provider_update_success, provider_delete_success
provisioning_enable_success, provisioning_disable_success
scim_token_create_success, scim_token_delete_success
Notificaciones relacionadas con los dominios

<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "Edit Provider",
    },
    tabs: {
      sso: "Settings",
      provisioning: "User Sync",
      domains: "Domains",
    },
    sso_tab: {
      actions: {
        save_button_text: "Save Changes",
      },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

stylingPersonaliza la apariencia con variables CSS y sobreescritura de clases. Compatible con estilos según el tema.

Opciones de estilo disponibles

Variables - propiedades personalizadas de CSS

common - Se aplica a todos los temas
light - Solo para el tema claro
dark - Solo para el tema oscuro

Clases - sustituciones de clases del componente

SsoProviderEdit-header
SsoProviderEdit-tabs
SsoProviderEdit-ssoTab
SsoProviderEdit-provisioningTab
SsoProviderEdit-domainsTab

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

Personalización avanzada

El componente SsoProviderEdit está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo de edición de proveedores personalizados si usas shadcn.

Subcomponentes disponibles

Para casos de uso avanzados, puedes importar subcomponentes individuales para insertar pestañas o secciones específicas en distintos contextos.

Componente	Descripción
`SsoProviderSsoTab`	Formulario de configuración de SSO
`SsoProviderProvisioningTab`	Gestión del aprovisionamiento de SCIM
`SsoProviderDomainsTab`	Gestión de la asociación de dominios
`ProviderConfigureFields`	Campos de formulario dinámicos según la estrategia
`ScimTokenDisplay`	Visualización del token de SCIM con función de copia

Hooks disponibles

Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas y aprovechar la integración con la API de Auth0.

Hook	Descripción
`useSsoProviderEdit`	Lógica de carga y actualización del proveedor
`useSsoProviderProvisioning`	Gestión del aprovisionamiento de SCIM
`useSsoProviderDomains`	Gestión de asociaciones de dominios

Requisitos de configuración

Se requiere configurar Auth0 - Asegúrate de que tu tenant esté configurado con la API My Organization. Ver la guía de configuración →

Instalación

npm install @auth0/universal-components-react

Al ejecutar los comandos de npm o pnpm, se instala la dependencia @auth0/universal-components-core para utilidades compartidas y la integración con Auth0.

Primeros pasos

page.tsx

import { SsoProviderEdit } from "@auth0/universal-components-react/rwa";
import { useRouter } from "next/navigation";

export function EditProviderPage({ providerId }) {
  const router = useRouter();

  return (
    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        onClick: () => router.push("/providers"),
      }}
      sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
    />
  );
}

Ejemplo completo de integración

import React from "react";
import { SsoProviderEdit } from "@auth0/universal-components-react/rwa";
import { useRouter, useSearchParams } from "next/navigation";
import { analytics } from "./lib/analytics";

function EditProviderPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const providerId = searchParams.get("id");

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => router.push("/providers"),
        }}
        sso={{
          updateAction: {
            onAfter: (provider) => {
              analytics.track("Provider Updated", { name: provider.name });
              toast.success("Provider configuration saved");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
            onAfter: () => {
              toast.success("Provider deleted");
              router.push("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("SCIM provisioning enabled"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("Copy your SCIM token - it won't be shown again"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain} verified`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "Configuration",
            provisioning: "User Sync (SCIM)",
            domains: "Linked Domains",
          },
        }}
        styling={{
          variables: {
            common: { "--color-primary": "#059669" },
          },
        }}
      />
    </div>
  );
}

export default EditProviderPage;

Props

Props principales

Las props principales son fundamentales para el funcionamiento del componente. SsoProviderEdit requiere el ID del proveedor para cargar y editar el proveedor correcto.

Propiedad	Tipo	Descripción
`providerId`	`string`	Obligatorio. El ID del proveedor de SSO que deseas editar.

Props de visualización

Las props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento.

Propiedad	Tipo	Descripción
`hideHeader`	`boolean`	Oculta la sección del encabezado. Valor predeterminado: `false`

Props de acción

Las interacciones del usuario en las tres pestañas se gestionan mediante varias props de acción organizadas bajo el nombre de la pestaña correspondiente (sso, provisioning y domains).

Propiedad	Tipo	Descripción
`backButton`	`Object`	Configuración del botón de retroceso.
`sso`	`SsoProviderTabEditProps`	Acciones de la pestaña de SSO. Detalles
`provisioning`	`SsoProvisioningTabEditProps`	Acciones de la pestaña de aprovisionamiento. Detalles
`domains`	`SsoDomainsTabEditProps`	Acciones de la pestaña de dominios. Detalles

icon - Componente de icono personalizado de Lucide (opcional; el valor predeterminado es ArrowLeft)
onClick - Manejador de clic para la navegación

Ejemplo:

import { ChevronLeft } from "lucide-react";

<SsoProviderEdit
  providerId={providerId}
  backButton={{
    icon: ChevronLeft,
    onClick: () => router.push("/providers"),
  }}
/>;

Acciones de la pestaña SSO

La prop sso configura las acciones para la pestaña de configuración de SSO. Esta pestaña gestiona la configuración de autenticación del proveedor.

Acción	Tipo	Descripción
`updateAction`	`ComponentAction<IdentityProvider, IdentityProvider>`	Actualiza la configuración del proveedor.
`deleteAction`	`ComponentAction<IdentityProvider>`	Elimina el proveedor de forma permanente.
`removeFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Lo elimina de la organización.

disabled - Deshabilita el botón Guardar
onBefore(provider) - Se ejecuta antes de la actualización. Devuelve false para impedir que se guarde (p. ej., para mostrar un cuadro de diálogo de confirmación).
onAfter(provider, result) - Se ejecuta después de que el proveedor se haya actualizado correctamente. Úsalo para mostrar una notificación o hacer un seguimiento del evento.

Ejemplo:

<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        return confirm("Save changes to provider configuration?");
      },
      onAfter: (provider) => {
        toast.success("Provider configuration saved");
        analytics.track("Provider Updated", { name: provider.name });
      },
    },
  }}
/>

sso.deleteActionType: ComponentAction<IdentityProvider>Controla la eliminación permanente del proveedor de tu tenant de Auth0.Ejemplo:

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => router.push("/providers"),
  },
}}

sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => router.push("/providers"),
  },
}}

Acciones de la pestaña de aprovisionamiento

La propiedad provisioning configura las acciones para la pestaña de aprovisionamiento SCIM. Esta pestaña administra el aprovisionamiento automatizado de usuarios mediante el protocolo SCIM.

Acción	Tipo	Descripción
`createAction`	`ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>`	Habilita el aprovisionamiento de SCIM.
`deleteAction`	`ComponentAction<IdentityProvider>`	Deshabilita el aprovisionamiento de SCIM.
`createScimTokenAction`	`ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>`	Genera un token SCIM.
`deleteScimTokenAction`	`ComponentAction<IdentityProvider>`	Revoca el token SCIM.

provisioning={{
  createAction: {
    onBefore: (provider) => {
      return confirm("Enable SCIM provisioning for this provider?");
    },
    onAfter: (provider, config) => {
      toast.success("SCIM provisioning enabled");
      console.log("SCIM endpoint:", config.scim_endpoint);
    },
  },
}}

provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
    },
    onAfter: () => toast.success("SCIM provisioning disabled"),
  },
}}

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // El token se muestra una sola vez: el usuario debe copiarlo de inmediato
      console.log("New SCIM token generated");
    },
  },
}}

provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

Acciones de la pestaña Dominios

La prop domains configura las acciones para la pestaña de dominios. Esta pestaña administra los dominios asociados al proveedor para el enrutamiento automático de usuarios.

Acción	Tipo	Descripción
`createAction`	`ComponentAction<Domain>`	Agregar un dominio.
`verifyAction`	`ComponentAction<Domain>`	Verificar la propiedad del dominio.
`deleteAction`	`ComponentAction<Domain>`	Eliminar un dominio.
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Asociar el dominio al proveedor.
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Eliminar el dominio del proveedor.

domains.createActionType: ComponentAction<Domain>Controla la adición de nuevos dominios a la organización desde la interfaz de edición del proveedor.Ejemplo:

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

domains.verifyActionType: ComponentAction<Domain>Controla la verificación de dominio mediante un registro TXT de DNS.Ejemplo:

domains={{
  verifyAction: {
    onBefore: (domain) => {
      return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} verified successfully`);
    },
  },
}}

domains.deleteActionType: ComponentAction<Domain>Controla la eliminación de dominios.Ejemplo:

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}?`);
    },
  },
}}

domains{{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}

domains.deleteFromProviderActionType: ComponentAction<Domain, IdentityProvider | null>Elimina la asociación de un dominio con este proveedor.

Props de personalización

Las props de personalización te permiten adaptar el componente a tu marca, idioma regional y requisitos de validación sin necesidad de modificar el código fuente.

Propiedad	Tipo	Descripción
`schema`	`SsoProviderEditSchema`	Reglas de validación de campos.
`customMessages`	`Partial<SsoProviderEditMessages>`	Personalizaciones de texto de i18n.
`styling`	`ComponentStyling<SsoProviderEditClasses>`	Variables CSS y personalizaciones de clases.

schemaEstablece reglas de validación personalizadas para los campos de proveedor y dominio.

Campos de esquema disponibles

Todos los campos del esquema admiten: regex, errorMessage, minLength, maxLength, requiredprovider.* - Campos de configuración del proveedor según la estrategia

Comunes: name, displayName
Campos específicos de la estrategia (los mismos que en SsoProviderCreate)

domains.create.domainUrl - Validación de la URL del dominio

<SsoProviderEdit
  providerId={providerId}
  schema={{
    provider: {
      displayName: {
        required: true,
        maxLength: 100,
      },
    },
    domains: {
      create: {
        domainUrl: {
          regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
          errorMessage: "Enter a valid domain (example.com)",
        },
      },
    },
  }}
/>

customMessagesPersonaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se completan, se usarán los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

title, back_button_text

tabs - Etiquetas de las pestañas

sso, provisioning, domains

sso_tab - Pestaña de configuración de SSO

title, description
fields.* - Etiquetas de los campos del formulario según la estrategia
actions.save_button_text, actions.delete_button_text
delete_modal.*, remove_modal.*

provisioning_tab - Pestaña de aprovisionamiento

title, description
scim_endpoint.label, scim_token.label
actions.enable_button_text, actions.disable_button_text
actions.generate_token_button_text, actions.revoke_token_button_text

domains_tab - Pestaña de dominios

title, description
La misma estructura que los mensajes de DomainTable

notifications - Respuestas de la API

provider_update_success, provider_delete_success
provisioning_enable_success, provisioning_disable_success
scim_token_create_success, scim_token_delete_success
Notificaciones relacionadas con los dominios

<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "Edit Provider",
    },
    tabs: {
      sso: "Settings",
      provisioning: "User Sync",
      domains: "Domains",
    },
    sso_tab: {
      actions: {
        save_button_text: "Save Changes",
      },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

stylingPersonaliza la apariencia con variables CSS y sobreescritura de clases. Compatible con estilos según el tema.

Opciones de estilo disponibles

Variables - Propiedades personalizadas de CSS

common - Se aplica a todos los temas
light - Solo para el tema claro
dark - Solo para el tema oscuro

Classes - Sobrescrituras de clases del componente

SsoProviderEdit-header
SsoProviderEdit-tabs
SsoProviderEdit-ssoTab
SsoProviderEdit-provisioningTab
SsoProviderEdit-domainsTab

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

Personalización avanzada

El componente SsoProviderEdit está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos de forma individual para crear flujos de trabajo personalizados de edición de proveedores.

Subcomponentes disponibles

Para casos de uso avanzados, puedes importar subcomponentes individuales para insertar pestañas o secciones específicas en distintos contextos.

Componente	Descripción
`SsoProviderSsoTab`	Formulario de configuración de SSO
`SsoProviderProvisioningTab`	Gestión del aprovisionamiento SCIM
`SsoProviderDomainsTab`	Gestión de la asociación de dominios
`ProviderConfigureFields`	Campos de formulario dinámicos por estrategia
`ScimTokenDisplay`	Visualización del token SCIM con opción de copia

Hooks disponibles

Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas y aprovechar la integración con la API de Auth0.

Hook	Descripción
`useSsoProviderEdit`	Lógica para cargar y actualizar el proveedor
`useSsoProviderProvisioning`	Gestión del aprovisionamiento SCIM
`useSsoProviderDomains`	Gestión de asociaciones de dominios

Requisitos de configuración

Se requiere la configuración de Auth0 - Asegúrate de que tu tenant esté configurado con la API My Organization. Ver la guía de configuración →

Instalación

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-edit.json

Al ejecutar el comando de shadcn, también se instala la dependencia @auth0/universal-components-core para utilidades compartidas y la integración con Auth0.

Primeros pasos

import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit";

export function EditProviderPage({ providerId }) {
  const navigate = useNavigate();

  return (
    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        onClick: () => navigate("/providers"),
      }}
      sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
    />
  );
}

Ejemplo de integración completa

import React from "react";
import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate, useParams } from "react-router-dom";
import { analytics } from "./lib/analytics";

function EditProviderPage() {
  const { providerId } = useParams();
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => navigate("/providers"),
        }}
        sso={{
          updateAction: {
            onAfter: (provider) => {
              analytics.track("Provider Updated", { name: provider.name });
              toast.success("Provider configuration saved");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
            onAfter: () => {
              toast.success("Provider deleted");
              navigate("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("SCIM provisioning enabled"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("Copy your SCIM token - it won't be shown again"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain} verified`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "Configuration",
            provisioning: "User Sync (SCIM)",
            domains: "Linked Domains",
          },
        }}
        styling={{
          variables: {
            common: { "--color-primary": "#059669" },
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Necesario para gestionar los desafíos de autenticación escalonada mediante el popup de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Props principales

Las props principales son fundamentales para el funcionamiento del componente. SsoProviderEdit requiere el ID del proveedor para cargar y editar el proveedor correcto.

Propiedad	Tipo	Descripción
`providerId`	`string`	Obligatorio. El ID del proveedor de SSO que quieres editar.

Props de visualización

Las props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento.

Propiedad	Tipo	Descripción
`hideHeader`	`boolean`	Oculta la sección de encabezado. Valor predeterminado: `false`

Props de acción

Las interacciones del usuario en las tres pestañas se gestionan mediante varias props de acción organizadas bajo el nombre de la pestaña correspondiente (sso, provisioning y domains).

Propiedad	Tipo	Descripción
`backButton`	`Object`	Configuración del botón de retroceso.
`sso`	`SsoProviderTabEditProps`	Acciones de la pestaña de SSO. Detalles
`provisioning`	`SsoProvisioningTabEditProps`	Acciones de la pestaña de aprovisionamiento. Detalles
`domains`	`SsoDomainsTabEditProps`	Acciones de la pestaña de dominios. Detalles

icon - Componente de icono personalizado de Lucide (opcional; por defecto, ArrowLeft)
onClick - Manejador de clic para la navegación

Ejemplo:

import { ChevronLeft } from "lucide-react";

<SsoProviderEdit
  providerId={providerId}
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/providers"),
  }}
/>;

Acciones de la pestaña SSO

La prop sso configura las acciones para la pestaña de configuración de SSO. Esta pestaña gestiona la configuración de autenticación del proveedor.

Acción	Tipo	Descripción
`updateAction`	`ComponentAction<IdentityProvider, IdentityProvider>`	Actualiza la configuración del proveedor.
`deleteAction`	`ComponentAction<IdentityProvider>`	Elimina el proveedor de forma permanente.
`removeFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Lo quita de la organización.

disabled - Desactiva el botón de guardar
onBefore(provider) - Se ejecuta antes de la actualización. Devuelve false para impedir que se guarde (p. ej., para mostrar un cuadro de diálogo de confirmación).
onAfter(provider, result) - Se ejecuta después de que el proveedor se haya actualizado correctamente. Úsalo para mostrar una notificación o hacer seguimiento del evento.

Ejemplo:

<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        return confirm("Save changes to provider configuration?");
      },
      onAfter: (provider) => {
        toast.success("Provider configuration saved");
        analytics.track("Provider Updated", { name: provider.name });
      },
    },
  }}
/>

sso.deleteActionType: ComponentAction<IdentityProvider>Controla la eliminación permanente del proveedor de tu tenant de Auth0.Ejemplo:

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

Acciones de la pestaña de aprovisionamiento

La propiedad provisioning configura las acciones para la pestaña de aprovisionamiento SCIM. Esta pestaña gestiona el aprovisionamiento automatizado de usuarios a través del protocolo SCIM.

Acción	Tipo	Descripción
`createAction`	`ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>`	Habilita el aprovisionamiento SCIM.
`deleteAction`	`ComponentAction<IdentityProvider>`	Deshabilita el aprovisionamiento SCIM.
`createScimTokenAction`	`ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>`	Genera un token SCIM.
`deleteScimTokenAction`	`ComponentAction<IdentityProvider>`	Revoca el token SCIM.

provisioning={{
  createAction: {
    onBefore: (provider) => {
      return confirm("Enable SCIM provisioning for this provider?");
    },
    onAfter: (provider, config) => {
      toast.success("SCIM provisioning enabled");
      console.log("SCIM endpoint:", config.scim_endpoint);
    },
  },
}}

provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
    },
    onAfter: () => toast.success("SCIM provisioning disabled"),
  },
}}

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // El token se muestra una sola vez: el usuario debe copiarlo de inmediato
      console.log("New SCIM token generated");
    },
  },
}}

provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

Acciones de la pestaña Dominios

La prop domains configura las acciones para la pestaña de dominios. Esta pestaña administra los dominios asociados al proveedor para el enrutamiento automático de usuarios.

Acción	Tipo	Descripción
`createAction`	`ComponentAction<Domain>`	Añade un dominio.
`verifyAction`	`ComponentAction<Domain>`	Verifica la titularidad del dominio.
`deleteAction`	`ComponentAction<Domain>`	Elimina un dominio.
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Asocia el dominio con el proveedor.
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Quita el dominio del proveedor.

domains.createActionType: ComponentAction<Domain>Controla la adición de nuevos dominios a la organización desde la interfaz de edición del proveedor.Ejemplo:

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

domains.verifyActionType: ComponentAction<Domain>Controla la verificación de dominio mediante un registro TXT de DNS.Ejemplo:

domains={{
  verifyAction: {
    onBefore: (domain) => {
      return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} verified successfully`);
    },
  },
}}

domains.deleteActionType: ComponentAction<Domain>Controla la eliminación de dominios.Ejemplo:

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}?`);
    },
  },
}}

domains={{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}

domains.deleteFromProviderActionType: ComponentAction<Domain, IdentityProvider | null>Elimina la asociación de un dominio con este proveedor.

Props de personalización

Las props de personalización te permiten adaptar el componente a tu marca, idioma regional y requisitos de validación sin necesidad de modificar el código fuente.

Prop	Tipo	Descripción
`schema`	`SsoProviderEditSchema`	Reglas de validación de campos.
`customMessages`	`Partial<SsoProviderEditMessages>`	Personalizaciones de texto de i18n.
`styling`	`ComponentStyling<SsoProviderEditClasses>`	Variables CSS y personalizaciones de clases.

schemaEstablece reglas de validación personalizadas para los campos de proveedor y dominio.

Campos de esquema disponibles

Todos los campos del esquema admiten: regex, errorMessage, minLength, maxLength, requiredprovider.* - Campos de configuración del proveedor según la estrategia

Comunes: name, displayName
Campos específicos de la estrategia (los mismos que en SsoProviderCreate)

domains.create.domainUrl - Validación de la URL del dominio

<SsoProviderEdit
  providerId={providerId}
  schema={{
    provider: {
      displayName: {
        required: true,
        maxLength: 100,
      },
    },
    domains: {
      create: {
        domainUrl: {
          regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
          errorMessage: "Enter a valid domain (example.com)",
        },
      },
    },
  }}
/>

customMessagesPersonaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se completan, se usarán los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

title, back_button_text

tabs - Etiquetas de las pestañas

sso, provisioning, domains

sso_tab - Pestaña de configuración de SSO

title, description
fields.* - Etiquetas de los campos del formulario según la estrategia
actions.save_button_text, actions.delete_button_text
delete_modal.*, remove_modal.*

provisioning_tab - Pestaña de aprovisionamiento

title, description
scim_endpoint.label, scim_token.label
actions.enable_button_text, actions.disable_button_text
actions.generate_token_button_text, actions.revoke_token_button_text

domains_tab - Pestaña de dominios

title, description
Misma estructura que los mensajes de DomainTable

notifications - Respuestas de la API

provider_update_success, provider_delete_success
provisioning_enable_success, provisioning_disable_success
scim_token_create_success, scim_token_delete_success
Notificaciones relacionadas con los dominios

<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "Edit Provider",
    },
    tabs: {
      sso: "Settings",
      provisioning: "User Sync",
      domains: "Domains",
    },
    sso_tab: {
      actions: {
        save_button_text: "Save Changes",
      },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

stylingPersonaliza la apariencia con variables CSS y sobreescritura de clases. Compatible con estilos adaptados al tema.

Opciones de estilo disponibles

Variables - propiedades personalizadas de CSS

common - Se aplica a todos los temas
light - Solo para el tema claro
dark - Solo para el tema oscuro

Clases - Sobrescrituras de clases del componente

SsoProviderEdit-header
SsoProviderEdit-tabs
SsoProviderEdit-ssoTab
SsoProviderEdit-provisioningTab
SsoProviderEdit-domainsTab

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

Personalización avanzada

El componente SsoProviderEdit está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo personalizados de gestión de proveedores SSO si utilizas shadcn.

Subcomponentes disponibles

Para casos de uso avanzados, puedes importar componentes de pestaña individuales para crear interfaces personalizadas de edición de proveedores.

Componente	Descripción
`SsoProviderEditTabs`	Contenedor de pestañas y navegación
`SsoTab`	Pestaña de configuración de SSO
`ProvisioningTab`	Pestaña de aprovisionamiento de SCIM
`DomainsTab`	Pestaña de asociaciones de dominio

Hooks disponibles

Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas y aprovechar la integración con la API de Auth0.

Hook	Descripción
`useSsoProviderEdit`	Lógica para cargar y editar el proveedor
`useSsoProviderEditLogic`	Estado de las pestañas y manejadores de acciones

​Requisitos de configuración

​Instalación

​Primeros pasos

​Props

​Props obligatorias

​Props de visualización

​Props de acción

​Acciones de la pestaña SSO

​Acciones de la pestaña de aprovisionamiento

​Acciones de la pestaña Dominios

​Props de personalización

​Personalización avanzada

​Subcomponentes disponibles

​Hooks disponibles

​Requisitos de configuración

​Instalación

​Primeros pasos

​Props

​Props principales

​Props de visualización

​Props de acción

​Acciones de la pestaña SSO

​Acciones de la pestaña de aprovisionamiento

​Acciones de la pestaña Dominios

​Props de personalización

​Personalización avanzada

​Subcomponentes disponibles

​Hooks disponibles

​Requisitos de configuración

​Instalación

​Primeros pasos

​Props

​Props principales

​Props de visualización

​Props de acción

​Acciones de la pestaña SSO

​Acciones de la pestaña de aprovisionamiento

​Acciones de la pestaña Dominios

​Props de personalización

​Personalización avanzada

​Subcomponentes disponibles

​Hooks disponibles

Requisitos de configuración

Instalación

Primeros pasos

Props

Props obligatorias

Props de visualización

Props de acción

Acciones de la pestaña SSO

Acciones de la pestaña de aprovisionamiento

Acciones de la pestaña Dominios

Props de personalización

Personalización avanzada

Subcomponentes disponibles

Hooks disponibles

Requisitos de configuración

Instalación

Primeros pasos

Props

Props principales

Props de visualización

Props de acción

Acciones de la pestaña SSO

Acciones de la pestaña de aprovisionamiento

Acciones de la pestaña Dominios

Props de personalización

Personalización avanzada

Subcomponentes disponibles

Hooks disponibles

Requisitos de configuración

Instalación

Primeros pasos

Props

Props principales

Props de visualización

Props de acción

Acciones de la pestaña SSO

Acciones de la pestaña de aprovisionamiento

Acciones de la pestaña Dominios

Props de personalización

Personalización avanzada

Subcomponentes disponibles

Hooks disponibles