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

> Documentación para integrar Auth0 con Netlify

# Integrar con Netlify

<div id="overview">
  ## Descripción general
</div>

Conecta una instancia nueva o existente de Auth0 a tu proyecto de Netlify para mejorar la seguridad, la escalabilidad y la personalización de tu aplicación con la integración de Auth0. Esta integración te permite implementar un enfoque optimizado de identidad del cliente directamente en tu aplicación.

Usa la nueva integración para crear y personalizar el flujo de identidad de tu proyecto de Netlify. Para poner tu aplicación en marcha de forma rápida y segura, esta integración:

* Configura un entorno de producción en Netlify que se integra con tu inquilino de Auth0 en solo unos clics.
* Crea automáticamente una aplicación en tu inquilino de Auth0 conectada a tu proyecto de Netlify.
* Precarga tus credenciales de Auth0 en Netlify, para que puedas omitir algunos de los pasos manuales de este proceso.

<div id="prerequisites">
  ## Requisitos previos
</div>

Para empezar a integrar Auth0 en tu proyecto de Netlify, debes cumplir algunos requisitos antes de comenzar:

* Una cuenta de Netlify con un proyecto que quieras integrar. Visita [Create your Netlify account](https://www.netlify.com/) para crear una cuenta.
* Una aplicación web que requiera autenticación, como una aplicación de React o Vue, o un sitio estático con funciones sin servidor.

<div id="add-a-netlify-integration">
  ## Agregar una integración de Netlify
</div>

Después de crear su cuenta de Netlify e iniciar sesión en el panel, puede comenzar el proceso para agregar una integración. Para agregar la integración de Auth0 a un proyecto existente de Netlify:

1. En el panel de Netlify, vaya a **Extensions > Directory.**
2. Busque [**Auth0**](https://app.netlify.com/extensions/auth0) y seleccione **Install.**
3. Seleccione **Install** para continuar con la instalación en su portal de integración de Auth0.

<Frame>
  <img src="https://mintcdn.com/translations/raZlN0BXDjNonwyb/docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png?fit=max&auto=format&n=raZlN0BXDjNonwyb&q=85&s=1ad114f4beafeb5162299c2fed2d244c" alt="" width="2234" height="1222" data-path="docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png" />
</Frame>

<div id="connect-your-site">
  ## Conecta tu sitio
</div>

Para conectar tu sitio a Auth0:

1. Ve a la **Site configuration** del sitio que quieres conectar a Auth0.
2. En la barra lateral, selecciona **Auth0** en **Acceso y seguridad.**
3. Selecciona **Vincular un inquilino de Auth0** y sigue las instrucciones para conectarte a tu cuenta de Auth0. Si aún no tienes una cuenta de Auth0, puedes registrarte en [https://auth0.com/signup](https://auth0.com/signup).

   <Frame>
     <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=d5f97658ddc8049face10d4093258f0a" alt="" width="886" height="1424" data-path="docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png" />
   </Frame>
4. Selecciona tu inquilino en la lista desplegable y, a continuación, selecciona **Aceptar** para autorizar tu cuenta.

   <Frame>
     <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=9f69230b2779b2f1849027c613894696" alt="" width="1966" height="846" data-path="docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png" />
   </Frame>
5. Después de vincular tu inquilino, selecciona **Agregar inquilino**.
6. Completa la información requerida para tu inquilino y tu aplicación, habilita la casilla **Volver a implementar el sitio** y selecciona **Crear inquilino del sitio**.

   <Frame>
     <img src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=a0a034de759f1f95df4d26e0e821e331" alt="" width="2436" height="2444" data-path="docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png" />
   </Frame>
7. Ahora deberías ver el inquilino del sitio vinculado correctamente en la configuración de tu sitio.

   <Frame>
     <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=049ecdd1543816ff9fab4904d645f1d2" alt="" width="2362" height="750" data-path="docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png" />
   </Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Ahora deberías ver tu aplicación cliente y la API en tu Auth0 Dashboard, en **Applications**.
</Callout>

<div id="set-up-the-integration">
  ## Configura la integración
</div>

Al integrar Auth0 con tu proyecto de Netlify, tendrás que proporcionar a tu aplicación ajustes de autenticación, como el **<Tooltip tip="ID de cliente: valor de identificación asignado por Auth0 a tu recurso registrado." cta="Ver glosario" href="/es/docs/glossary?term=Client+ID">ID de cliente</Tooltip>** y el **dominio de Auth0**.

Si tu aplicación lee estos ajustes desde variables de entorno, la extensión los inyecta automáticamente.

1. Ve al panel de Netlify.
2. Ve a **Site configuration > Environment variables.**
3. Haz clic en **Add a variable** e introduce:

   * `AUTH0_CLIENT_ID` (tu ID de cliente de Auth0)
   * `AUTH0_DOMAIN` (tu dominio de Auth0)

     <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
       Estas variables, junto con el resto de la información de la aplicación, se pueden encontrar en tu Auth0 Dashboard, en **Applications > \[Your app] > Settings**.
     </Callout>

Ahora ya deberías tener configuradas las credenciales de Auth0 adecuadas para la implementación.

<div id="populate-a-configuration-file">
  ### Completar un archivo de configuración
</div>

Si su aplicación lee la configuración de Auth0 desde un archivo, puede automatizar este proceso durante la fase de compilación. Esto garantiza que su aplicación siempre tenga la configuración de autorización adecuada sin tener que modificar archivos manualmente.

Para hacerlo:

1. Vaya al Dashboard de Netlify.
2. Vaya a **Site configuration > Build & deploy > Build settings**.
3. Modifique el **Build command** para incluir un script de shell antes de iniciar la compilación:

   ```bash wrap lines theme={null}
   echo "{\"clientId\": \"${AUTH0_CLIENT_ID}\", \"domain\": \"${AUTH0_DOMAIN}\"}" > auth_config.json && npm run build
   ```

Este script crea un archivo JSON llamado `auth_config.json` y lo completa con las variables de entorno `AUTH0_CLIENT_ID` y `AUTH0_DOMAIN` configuradas anteriormente, lo que garantiza que la aplicación tenga la configuración correcta de Auth0 en tiempo de ejecución.

<div id="manage-integration">
  ## Gestionar la integración
</div>

Después de agregar la integración de Auth0 a tu proyecto de Netlify, el <Tooltip tip="Auth0 Dashboard: el producto principal de Auth0 para configurar tus servicios." cta="Ver glosario" href="/es/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip> crea una nueva aplicación para administrar y personalizar tu flujo de trabajo de CIAM.

1. Ve al Auth0 Dashboard.
2. Selecciona **Applications > Applications > \[Tu aplicación de Netlify]**
3. Confirma el URI de la aplicación de Netlify en **Settings > Application URIs**.

Ahora puedes personalizar y modificar esta aplicación como cualquier otra aplicación en tu Auth0 Dashboard.