> ## 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.

# Auth0 Universal Login

> Universal Login le permite verificar la identidad de sus usuarios con nuestro servidor de autorización.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Acceso anticipado"
  };
  const stageText = stageTextMap[stage] || "una etapa de lanzamiento del producto";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Esta funcionalidad está disponible en los {linkify(`planes ${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Para participar, ponte en contacto con " + contact + ". "}
            {terms && <>Al usar esta funcionalidad, aceptas los términos aplicables de la prueba gratuita incluidos en el {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} de Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La funcionalidad {feature} está en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Auth0 <Tooltip tip="Universal Login: Su aplicación redirige a Universal Login, alojado en el servidor de autorización de Auth0, para verificar la identidad de un usuario." cta="Ver glosario" href="/es/docs/glossary?term=Universal+Login">Universal Login</Tooltip> ofrece la función esencial de un <Tooltip tip="Universal Login: Su aplicación redirige a Universal Login, alojado en el servidor de autorización de Auth0, para verificar la identidad de un usuario." cta="Ver glosario" href="/es/docs/glossary?term=authorization+server">servidor de autorización</Tooltip>: el flujo de inicio de sesión. Cuando un usuario necesita demostrar su identidad para acceder a su aplicación, puede redirigirlo a Universal Login y dejar que Auth0 se encargue del proceso de autenticación.

Con Universal Login, no tiene que realizar ningún trabajo de integración para admitir distintos métodos de autenticación. Puede empezar con un flujo de autenticación sencillo y luego añadir funciones adicionales, como el inicio de sesión sin contraseña, el inicio de sesión social o la <Tooltip tip="Autenticación multifactor (MFA): proceso de autenticación de usuarios que utiliza un factor adicional además del username y la contraseña, como un code por SMS." cta="Ver glosario" href="/es/docs/glossary?term=multi-factor+authentication">autenticación multifactor</Tooltip> (MFA), para personalizar una experiencia de inicio de sesión segura y fácil de usar.

La configuración de Universal Login es dinámica y no requiere cambios en la aplicación, ya que las páginas web alojadas en el <Tooltip tip="Servidor de autenticación: servidor que confirma o rechaza la identidad de un usuario." cta="Ver glosario" href="/es/docs/glossary?term=authentication+server">servidor de autenticación</Tooltip> centralizado de Auth0 controlan por completo el flujo de inicio de sesión. Además, no necesita actualizar manualmente su código para que las aplicaciones se beneficien de las mejoras que Auth0 incorpora a Universal Login.

Desde el <Tooltip tip="Auth0 Dashboard: el producto principal de Auth0 para configurar sus servicios." cta="Ver glosario" href="/es/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, puede personalizar la apariencia y el comportamiento de las páginas de inicio de sesión para crear una experiencia coherente y alineada con su marca. Para casos de uso avanzados, también puede modificar el código de cada página por separado.

Para obtener más información sobre las diferencias entre Universal Login y el inicio de sesión integrado, consulte [Centralized Universal Login vs. Embedded Login](/es/docs/authenticate/login/universal-vs-embedded-login).

<div id="configure-universal-login">
  ## Configurar Universal Login
</div>

En el Auth0 Dashboard, puedes elegir qué experiencia usar para las páginas de inicio de sesión predeterminadas en [Branding > Universal Login > Advanced Options](https://manage.auth0.com/#/universal-login/customizations-new).

Auth0 ofrece dos experiencias de inicio de sesión alojadas:

* **Universal Login** ofrece una experiencia más ágil para los usuarios y no requiere JavaScript para su personalización.
* **Classic Login** usa controles de JavaScript para cada página del flujo de inicio de sesión.

En este momento, los esfuerzos de desarrollo activo de Auth0 se centran en Universal Login, y Classic Login ya no recibe actualizaciones. A menos que tu caso de uso específico requiera la experiencia Classic, se recomienda implementar Universal Login.

Para obtener más información sobre las diferencias entre estas dos experiencias, consulta [Universal Login vs. Classic Login](/es/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login).

<div id="accessibility">
  ### Accesibilidad
</div>

Auth0 emplea los siguientes estándares para mejorar el acceso a los flujos de Universal Login para las personas que usan tecnologías de asistencia:

* [Pautas de Accesibilidad para el Contenido Web (WCAG), versión 2.2 AA](https://www.w3.org/WAI/standards-guidelines/wcag/)
* [EN 301 549](https://www.etsi.org/human-factors-accessibility/en-301-549-v3-the-harmonized-european-standard-for-ict-accessibility)

Universal Login de Auth0 cumple estos estándares de forma predeterminada. A continuación, se indican algunos aspectos que podrían afectar a las personalizaciones de los clientes:

* Los errores de validación se muestran en línea en lugar de en tooltips, para que sean accesibles con lectores de pantalla.
* Los colores predeterminados de los componentes de la interfaz se ajustan a las pautas WCAG sobre contraste de color.
* Los formularios usan autocorrección.
* Los atributos [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) y otros atributos de los componentes de la interfaz permiten navegar fácilmente con lectores de pantalla.
* Las direcciones de correo electrónico se validan del lado del cliente y siguen las mismas reglas de formato que la validación del lado del servidor.
* Las etiquetas HTML son accesibles y están asociadas a sus respectivos campos de entrada.
* Los requisitos de complejidad de la contraseña y los mensajes de error en línea se anuncian mediante lectores de pantalla.
* Todas las <Tooltip tip="Flujo de autorización: concesión de autorización (o flujo de trabajo) especificada en el marco de OAuth 2.0." cta="Ver glosario" href="/es/docs/glossary?term=authorization+flow">pantallas de flujo de autorización</Tooltip> tienen un título de página útil y distintivo.
* Los campos obligatorios incluyen un indicador visual en la etiqueta.

<div id="customize-login-page">
  ### Personalice la página de inicio de sesión
</div>

Después de habilitar Universal Login, puede personalizar su página de inicio de sesión directamente desde el Auth0 Dashboard. En concreto, puede personalizar las plantillas y los temas de la página, las pantallas de registro e inicio de sesión y otros elementos de texto. Para obtener más información, consulte Personalizar Universal Login.

Si decide implementar Classic Login, puede personalizar las opciones básicas de marca desde el Auth0 Dashboard. Luego, puede configurar la personalización avanzada con el SDK que use para crear su flujo de inicio de sesión. Para obtener más información, consulte [Personalizar Classic Login](/es/docs/customize/login-pages/classic-login).

<div id="implement-universal-login">
  ## Implementa Universal Login
</div>

Después de habilitar Universal Login o Classic Login en tu inquilino, sigue estos pasos para implementar la experiencia:

1. [Registra tu aplicación](/es/docs/get-started/auth0-overview/create-applications) en Auth0.
2. Configura tu aplicación para llamar al [endpoint de inicio de sesión](https://auth0.com/docs/api/authentication#login) de la API de autenticación, a fin de activar el flujo de inicio de sesión y gestionar la respuesta. Puedes configurarlo directamente o usar uno de los [SDKs](/es/docs/libraries) de Auth0.
3. Crea una conexión de [base de datos](/es/docs/get-started/applications/set-up-database-connections), [empresarial](/es/docs/authenticate/enterprise-connections) o [social](/es/docs/authenticate/identity-providers/social-identity-providers) y habilítala para tu aplicación.

<div id="navigate-to-the-login-page">
  ### Ve a la página de inicio de sesión
</div>

Puedes llamar directamente al [endpoint de inicio de sesión](https://auth0.com/docs/api/authentication#login) desde cualquier navegador:

export const codeExample = `https://{yourDomain}/authorize?
  response_type=code|token&
  client_id={yourClientId}&
  connection={connectionName}&
  redirect_uri=https://{yourApp}/callback&
  state={yourState}`;

<AuthCodeBlock children={codeExample} language="bash" filename="cURL" />

La solicitud debe incluir los siguientes valores:

* `response_type` (`code` o `token`)
* `client_id`
* `redirect_uri`
* `state`

  * Para comprender mejor por qué se requiere este valor, consulte [Prevenir ataques y redirigir a los usuarios con parámetros de estado de OAuth 2.0](/es/docs/secure/attack-protection/state-parameters).

Opcionalmente, puede incluir el parámetro `connection` para indicar a los usuarios que se autentiquen con la conexión especificada.

<div id="correlation-id">
  ### ID de correlación
</div>

<ReleaseStageNotice feature="ID de correlación" stage="ea" terms="true" contact="Auth0 Support o su gestor técnico de cuentas" />

Universal Login admite eventos correlacionados en todos los flujos de autenticación. Una vez que implemente Universal Login, su aplicación genera un ID único y lo pasa como `correlation_id` al endpoint `/authorize`. Este ID único se mantiene a lo largo de los siguientes eventos de autenticación:

* Registro
* Inicio de sesión
* Inscripción y desafíos de la autenticación multifactor (MFA)
* Restablecimiento de contraseña

Una vez que se pasa `correlation_id`, puede rastrear los eventos de autenticación en [Auth0 Logs](/es/docs/deploy-monitor/logs).

Para obtener más información, consulte [ID de correlación](/es/docs/authenticate/login/configure-correlation-id).

<div id="use-the-quickstart-guides">
  ### Usa las guías de inicio rápido
</div>

Para obtener más información sobre cómo configurar Universal Login para tu aplicación, consulta las [guías de inicio rápido](/es/docs/quickstarts). Elige el enfoque que mejor se adapte a tus tecnologías y sigue la guía de inicio rápido correspondiente para ver el proceso de implementación paso a paso.