Crear proveedor de SSO

Asistente paso a paso para crear proveedores de SSO con selección de proveedor, configuración de detalles y configuración de autenticación

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

React

​

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

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";
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";
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>
  );
}

Next.js

​

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 (Recommended)

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

shadcn

​

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

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