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

> Introducción al inicio rápido de ACUL

# Inicio rápido de ACUL

<Card title="Antes de comenzar">
  Necesita lo siguiente:

  * Un inquilino de desarrollo de Auth0 configurado con [Universal Login](/es/docs/authenticate/login/auth0-universal-login) y un [dominio personalizado](/es/docs/customize/custom-domains).
  * Una [aplicación de primera parte](/es/docs/get-started/auth0-overview/create-applications#create-applications) de Auth0.
  * [Autenticación con identificador primero](/es/docs/authenticate/login/auth0-universal-login/identifier-first) habilitada en su inquilino de Auth0.
  * [Node.js](http://Node.js) V22
  * [Auth0 CLI](https://auth0.github.io/auth0-cli/) instalado y configurado con su inquilino de desarrollo.
</Card>

Auth0 CLI le permite implementar y probar pantallas de personalización avanzada para Universal Login (ACUL). Facilita la personalización de las pantallas de autenticación (como Inicio de sesión, Registro, sin contraseña e inscripción de claves de acceso) para que coincidan a la perfección con sus aplicaciones web.

Siga estos pasos para crear un proyecto de ACUL y una pantalla `login_id` personalizada con Auth0 CLI:

<div id="1-initialize-an-acul-sample-application">
  ## 1. Inicializa una aplicación de ejemplo de ACUL
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si no has configurado tu inquilino de desarrollo con Auth0 CLI, usa el comando `auth0 login` para configurarlo.
</Callout>

Ve al directorio donde quieras crear tu proyecto y ejecuta el siguiente comando:

```bash theme={null}
auth0 acul init "Your_App_Name"
```

1. Seleccione **React (con el SDK de ACUL React)**.
2. Seleccione la pantalla **login-id**.
3. En **Would you like to proceed with installing the required dependencies using 'npm install'?**, escriba **y**.

Auth0 CLI crea un nuevo directorio del proyecto con el nombre de la aplicación proporcionado.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si no seleccionó **y** para instalar las dependencias necesarias, vaya al directorio del proyecto y ejecute el comando `npm install`.
</Callout>

<div id="2-optional-add-additional-screens-to-your-project">
  ## 2. (Opcional) Agrega pantallas adicionales a tu proyecto
</div>

Selecciona pantallas adicionales para tu proyecto ejecutando el siguiente comando:

```bash theme={null}
auth0 acul screen add SCREEN_NAME 
```

<div id="3-launch-the-login-id-screen-with-universal-login-context-inspector">
  ## 3. Abra la pantalla Login ID con Universal Login Context Inspector
</div>

Use el Universal Login Context Inspector para abrir la pantalla Login ID:

1. Vaya al directorio de su proyecto y ejecute el siguiente comando:

```bash theme={null}
  auth0 acul dev
```

2. Confirme el directorio del proyecto
3. Seleccione el puerto para compartir los recursos locales; el predeterminado es el puerto `55444`

El Universal Login Context Inspector abre una nueva ventana del navegador en la pantalla Login Id.

<div id="4-update-the-sample-login-id-screen">
  ## 4. Actualiza la pantalla de ejemplo Login Id
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  El comando auth0 acul dev compila las pantallas de ACUL, aloja tus recursos localmente y detecta continuamente las actualizaciones en el directorio de recursos, lo que te permite probar tus pantallas en local. Para obtener más información, consulta la documentación del comando [Auth0 CLI acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html).
</Callout>

1. En el directorio de tu proyecto, edita `/src/index.css` y actualiza el widget del logotipo con la URL de tu logotipo:

`--ul-theme-widget-logo-url: "Your-Logo-URL";`

2. Guarda el cambio.

El servidor de desarrollo local se actualiza automáticamente con el cambio más reciente.

<div id="5-customize-the-context-data-for-your-authentication-screens">
  ## 5. Personalice los datos de contexto para sus pantallas de autenticación
</div>

Con el Universal Login Context Inspector, puede personalizar los datos de contexto predeterminados para probar sus pantallas de autenticación con configuraciones específicas de su inquilino.

1. Cree una versión local de los datos de contexto simulados para una pantalla de su proyecto:

Seleccione el icono **Download JSON** para descargar el archivo de datos de contexto simulados.

<Frame>
  <img src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=b4b206e8dc882316712860b31b556db3" alt="Página de ACUL de Auth0 Dashboard" width="547" height="239" data-path="docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" />
</Frame>

2. Cambie el nombre del archivo descargado, muévalo a `public/screens/{prompt}/{screen}` y agréguelo al archivo `public/manifest.json` en el directorio de su proyecto.

Por ejemplo, el archivo descargado `login-id-login-id-context.json` se cambia de nombre a `login-id.json` y se mueve a `/public/screens/login-id/login-id.json`.

3. Seleccione **Local Development** en **Data source** del Universal Login Context Inspector para cargar la versión local del contexto simulado de la pantalla.

Para obtener más información, consulte la documentación de [Auth0 CLI ACUL](https://auth0.github.io/auth0-cli/auth0_acul_dev.html).