Crear proveedor de SSO

El componente SsoProviderCreate ofrece una interfaz unificada para añadir nuevos proveedores de inicio de sesión único.

React
Next.js
shadcn

Requisitos de configuración

Se requiere configurar Auth0 - Asegúrese de que su inquilino esté configurado para usar la API My Organization. Ver 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 e integración con Auth0.

Primeros pasos

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

export function CreateProviderPage() {
  const navigate = useNavigate();

  return (
    <SsoProviderCreate
      createAction={{
        onAfter: () => navigate("/providers/list"),
      }}
      backButton={{
        onClick: () => navigate("/providers/list"),
      }}
    />
  );
}

Ejemplo completo de integración

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

function CreateSsoProviderPage() {
  const navigate = useNavigate();

  const handleCreateSuccess = (provider, result) => {
    analytics.track("SSO Provider Created", {
      strategy: provider.strategy,
      name: provider.name,
    });
    navigate("/sso-providers");
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderCreate
        schema={{
          name: { required: true, minLength: 3, maxLength: 50 },
        }}
        createAction={{
          onBefore: (provider) => confirm(`Create "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => navigate("/sso-providers") }}
        customMessages={{
          header: { title: "Add New SSO Provider" },
        }}
        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' // Obligatorio para gestionar desafíos de autenticación escalonada mediante la ventana emergente de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Requisitos de configuración

Configuración de Auth0 obligatoria: asegúrese de que su inquilino tenga configurada la API My Organization. Ver la guía de configuración →

Instalación

npm install @auth0/universal-components-react

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

Primeros pasos

page.tsx

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

export function CreateProviderPage() {
  const router = useRouter();

  return (
    <SsoProviderCreate
      createAction={{
        onAfter: () => router.push("/providers/list"),
      }}
      backButton={{
        onClick: () => router.push("/providers/list"),
      }}
    />
  );
}

Ejemplo completo de integración

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

function CreateSsoProviderPage() {
  const router = useRouter();

  const handleCreateSuccess = (provider, result) => {
    analytics.track("SSO Provider Created", {
      strategy: provider.strategy,
      name: provider.name,
    });
    router.push("/sso-providers");
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderCreate
        schema={{
          name: { required: true, minLength: 3, maxLength: 50 },
        }}
        createAction={{
          onBefore: (provider) => confirm(`Create "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => router.push("/sso-providers") }}
        customMessages={{
          header: { title: "Add New SSO Provider" },
        }}
        styling={{
          variables: { common: { "--color-primary": "#059669" } },
        }}
      />
    </div>
  );
}

export default CreateSsoProviderPage;

Requisitos de configuración

Se requiere configuración en Auth0 - Asegúrese de que su inquilino 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-create.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 { SsoProviderCreate } from "@/components/auth0/my-organization/sso-provider-create";

export function CreateProviderPage() {
  const navigate = useNavigate();

  return (
    <SsoProviderCreate
      createAction={{
        onAfter: () => navigate("/providers/list"),
      }}
      backButton={{
        onClick: () => navigate("/providers/list"),
      }}
    />
  );
}

Ejemplo completo de integración

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

function CreateSsoProviderPage() {
  const navigate = useNavigate();

  const handleCreateSuccess = (provider, result) => {
    analytics.track("SSO Provider Created", {
      strategy: provider.strategy,
      name: provider.name,
    });
    navigate("/sso-providers");
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderCreate
        schema={{
          name: { required: true, minLength: 3, maxLength: 50 },
        }}
        createAction={{
          onBefore: (provider) => confirm(`¿Crear "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => navigate("/sso-providers") }}
        customMessages={{
          header: { title: "Agregar nuevo proveedor de SSO" },
        }}
        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 desafíos de autenticación step-up mediante la ventana emergente de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Props obligatorias

Las props obligatorias son fundamentales para el funcionamiento del componente. En SsoProviderCreate, solo hay una prop principal que controla qué sucede después de crear correctamente un proveedor.

Prop	Tipo	Descripción
`createAction`	`ComponentAction<…>`	Obligatoria. Controla el flujo posterior a la creación.

createAction Tipo: ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider> La prop createAction es obligatoria porque controla adónde se redirige a los usuarios después de crear correctamente un proveedor. Sin ella, el componente no sabría qué hacer a continuación. Propiedades:

disabled - Desactiva el botón de creación (por ejemplo, mientras hay otra operación en curso)
onBefore(data) - Se ejecuta antes de crear el proveedor. Devuelve false para impedir la creación (por ejemplo, para mostrar primero un cuadro de diálogo de confirmación).
onAfter(data, result) - Se ejecuta después de crear correctamente el proveedor. Úsalo para navegar a otra página o registrar el evento.

Ejemplo:

// Navegar a la lista de proveedores después de la creación
createAction={{
  onAfter: () => navigate("/providers/list"),
}}

// Navegar para editar el proveedor recién creado
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

// Agregar diálogo de confirmación antes de la creación
createAction={{
  onBefore: (provider) => {
    return confirm(`Create SSO provider "${provider.display_name}"?`);
  },
  onAfter: () => navigate("/providers/list"),
}}

Props de visualización

Los props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento. Úsalos para ocultar secciones o activar el modo de solo lectura.

Prop	Tipo	Descripción
`readOnly`	`boolean`	Deshabilita todos los campos del formulario. Valor predeterminado: `false`
`hideHeader`	`boolean`	Oculta la sección del encabezado. Valor predeterminado: `false`

Props de Action

Las props de Action manejan las interacciones del usuario más allá del flujo principal de creación. Controlan la navegación y el comportamiento de los pasos del asistente.

Prop	Tipo	Descripción
`backButton`	`Object`	Configuración del botón para volver.
`onNext`	`Function`	callback de navegación entre pasos.
`onPrevious`	`Function`	callback de navegación entre pasos.

backButton Tipo: { icon?: LucideIcon; onClick: (e: MouseEvent) => void } Configura el botón para volver en el encabezado del componente. Úsalo para volver a tu lista de proveedores o a la página anterior. Propiedades:

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

Ejemplo:

import { ChevronLeft } from "lucide-react";

<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/providers/list"),
  }}
/>;

onNext / onPrevious Tipo: (stepId: string, values: Partial<SsoProviderFormValues>) => boolean Controla la navegación entre los pasos del asistente. Estos callbacks se ejecutan cuando el usuario hace clic en Siguiente o Anterior. Devuelve false para impedir la navegación. Casos de uso:

Validar los datos del paso antes de continuar
Registrar eventos analíticos al completar pasos
Omitir pasos de forma condicional

Parámetros:

stepId - Identificador del paso actual ("provider-select", "provider-details", "provider-configure")
values - Valores actuales del formulario

Ejemplo:

<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  onNext={(stepId, values) => {
    analytics.track("SSO Wizard Step Completed", { step: stepId });
    return true;
  }}
/>

Props de personalización

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

Prop	Tipo	Descripción
`schema`	`SsoProviderSchema`	Reglas de validación de campos.
`customMessages`	`Partial<SsoProviderCreateMessages>`	Sobrescrituras de texto para i18n.
`styling`	`ComponentStyling<SsoProviderCreateClasses>`	Variables CSS y sobrescrituras de clases.

schema Configura reglas de validación personalizadas para los campos del proveedor. Las reglas se organizan por estrategia del proveedor (el protocolo de autenticación utilizado, como oidc, samlp, waad, google-apps, adfs, pingfederate u okta). Todos los campos admiten regex, errorMessage, minLength, maxLength y required.

Campos de esquema disponibles

Detalles del proveedor

name, displayName

Okta

okta.domain, okta.client_id, okta.client_secret, okta.icon_url, okta.callback_url

ADFS

adfs.meta_data_source, adfs.meta_data_location_url, adfs.adfs_server, adfs.fedMetadataXml

Google Workspace

google-apps.domain, google-apps.client_id, google-apps.client_secret, google-apps.icon_url, google-apps.callback_url

OIDC

oidc.type, oidc.client_id, oidc.client_secret, oidc.discovery_url, oidc.isFrontChannel

PingFederate

pingfederate.signatureAlgorithm, pingfederate.digestAlgorithm, pingfederate.signSAMLRequest, pingfederate.metadataUrl, pingfederate.signingCert, pingfederate.idpInitiated, pingfederate.icon_url

SAML

samlp.meta_data_source, samlp.single_sign_on_login_url, samlp.signatureAlgorithm, samlp.digestAlgorithm, samlp.protocolBinding, samlp.signSAMLRequest, samlp.bindingMethod, samlp.metadataUrl, samlp.cert, samlp.idpInitiated, samlp.icon_url

Azure AD

waad.domain, waad.client_id, waad.client_secret, waad.icon_url, waad.callback_url

<SsoProviderCreate
  createAction={{}}
  schema={{
    name: {
      minLength: 3,
      maxLength: 50,
      regex: /^[a-zA-Z0-9-_]+$/,
      errorMessage: "Name must be alphanumeric with hyphens/underscores",
    },
    displayName: {
      required: true,
      maxLength: 100,
    },
  }}
/>

customMessages Personaliza todos los textos y las traducciones. Todos los campos son opcionales y usan los valores predeterminados si no se proporcionan.

Mensajes disponibles

header - Encabezado del componente

title, back_button_text

provider_select - Paso 1

title, description

provider_details - Paso 2

title, description
fields.name - label, placeholder, helper_text, error
fields.display_name - label, placeholder, helper_text, error

provider_configure - Paso 3

title, description, guided_setup_button_text
fields.okta - Campos de Okta
fields.adfs - Campos de ADFS
fields.google-apps - Campos de Google Workspace
fields.oidc - Campos de OIDC
fields.pingfederate - Campos de PingFederate
fields.samlp - Campos de SAML
fields.waad - Campos de Azure AD

notifications - Respuestas de la API

general_error, provider_create_success

<SsoProviderCreate
  createAction={{}}
  customMessages={{
    header: {
      title: "Add New SSO Provider",
      back_button_text: "Cancel",
    },
    provider_details: {
      title: "Provider Information",
      fields: {
        name: {
          label: "Connection Name",
          helper_text: "Internal identifier for this connection",
        },
      },
    },
    notifications: {
      provider_create_success: "SSO provider created successfully!",
    },
  }}
/>

styling Personaliza la apariencia con variables CSS y sobrescrituras de clases. Admite 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

SsoProviderCreate-header
SsoProviderCreate-wizard
ProviderSelect-root
ProviderDetails-root
ProviderConfigure-root

<SsoProviderCreate
  createAction={{}}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderCreate-wizard": "shadow-xl rounded-xl",
      "ProviderSelect-root": "grid grid-cols-3 gap-6",
    },
  }}
/>

Personalización avanzada

El componente SsoProviderCreate se compone de subcomponentes y hooks más pequeños. Puede importarlos por separado para crear flujos personalizados de creación de proveedores de SSO si usa shadcn.

Subcomponentes disponibles

Para casos de uso avanzados, puedes importar subcomponentes individuales para crear flujos de trabajo personalizados para la creación de proveedores de SSO. Esto resulta útil cuando necesitas integrar un solo paso en una interfaz de usuario diferente o personalizar el flujo del asistente más allá de lo que permiten las props.

Componente	Descripción
`ProviderSelect`	Paso de selección de estrategia con iconos de proveedores
`ProviderDetails`	Paso de configuración del nombre y del nombre para mostrar
`ProviderConfigure`	Paso de configuración específico de la estrategia
`ProviderConfigureFields`	Campos de formulario dinámicos según la estrategia
`OktaProviderForm`	Formulario de configuración específico de Okta
`AdfsProviderForm`	Formulario de configuración específico de ADFS
`GoogleAppsProviderForm`	Formulario de configuración específico de Google Workspace
`OidcProviderForm`	Formulario de configuración específico de OIDC
`PingFederateProviderForm`	Formulario de configuración específico de PingFederate
`SamlpProviderForm`	Formulario de configuración específico de SAML
`WaadProviderForm`	Formulario de configuración específico de Azure AD
`Wizard`	Interfaz de asistente de varios pasos

Hooks disponibles

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

Hook	Descripción
`useSsoProviderCreate`	Lógica de creación de proveedores e integración con la API

​Requisitos de configuración

​Instalación

​Primeros pasos

​Requisitos de configuración

​Instalación

​Primeros pasos

​Requisitos de configuración

​Instalación

​Primeros pasos

​Props

​Props obligatorias

​Props de visualización

​Props de Action

​Props de personalización

​Personalización avanzada

​Subcomponentes disponibles

​Hooks disponibles

Requisitos de configuración

Instalación

Primeros pasos

Requisitos de configuración

Instalación

Primeros pasos

Requisitos de configuración

Instalación

Primeros pasos

Props

Props obligatorias

Props de visualización

Props de Action

Props de personalización

Personalización avanzada

Subcomponentes disponibles

Hooks disponibles