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

# SignupPassword

> Describe todos los hooks y métodos disponibles para personalizar la pantalla `signup-password` de Universal Login.

La pantalla `signup-password` solicita la contraseña del usuario para completar la creación de la cuenta. Es el segundo paso de un flujo de registro de varios pasos, después de recopilar el identificador. También admite el registro federado mediante conexiones sociales o empresariales.

<Frame>
  <img style={{maxHeight:"400px"}} src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/5h85r3sVhe8mVw7rDkDwTD/02c3521d9d6c4d490c1a64ae37ecca72/Signup_Password_with_Flexible_IDs.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=0b8269a168708f6d69d5d1563d0a533a" alt="Contraseña de registro con identificadores flexibles" width="480" height="1032" data-path="docs/images/cdy7uua7fh8z/5h85r3sVhe8mVw7rDkDwTD/02c3521d9d6c4d490c1a64ae37ecca72/Signup_Password_with_Flexible_IDs.png" />
</Frame>

<div id="import">
  ## Importación
</div>

Cada pantalla tiene su propio conjunto de hooks y métodos. El SDK admite **importación parcial** e **importación desde la raíz** para cada pantalla.

* La importación parcial te permite incluir solo el código que necesitas para tu caso de uso.
* La importación desde la raíz te permite cargar todas las pantallas desde un único paquete, lo que resulta útil cuando quieres una compilación unificada que gestione todas las pantallas posibles.

```jsx Import Example theme={null}
// importación desde la raíz
import { useSignupPassword } from '@auth0/auth0-acul-react';

// importación parcial
import {
  useSignupPassword,
  // Hooks de contexto
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Hooks comunes
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  // Hooks de utilidad
  useChangeLanguage,
  usePasswordValidation,
  // Métodos
  signup,
  federatedSignup,
  switchConnection,
} from '@auth0/auth0-acul-react/signup-password';

function SignupPasswordForm() {
  const { signup } = useSignupPassword();
  return (
    <button onClick={() => signup({ password: 'secret' })}>
      Create Account
    </button>
  );
}
```

<div id="context-hooks">
  ## Hooks de contexto
</div>

Hooks específicos de la pantalla que proporcionan acceso de solo lectura a los datos de contexto de Auth0 en la pantalla `signup-password`. Impórtalos desde `@auth0/auth0-acul-react/signup-password`.

<ParamField body="useBranding" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/BrandingMembers">BrandingMembers</a></span>}>
  Este hook proporciona configuraciones de marca, como el logotipo, los colores y los ajustes del tema que se muestran en la pantalla `signup-password`.

  ```jsx Example theme={null}
  import { useBranding } from '@auth0/auth0-acul-react/signup-password';
  function CustomTheme() {
    const branding = useBranding();
  }
  ```
</ParamField>

<ParamField body="useClient" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ClientMembers">ClientMembers</a></span>}>
  Este hook proporciona configuraciones relacionadas con el cliente, como `id`, `name` y `logoUrl`, para la pantalla `signup-password`.

  ```jsx Example theme={null}
  import { useClient } from '@auth0/auth0-acul-react/signup-password';
  function AppInfo() {
    const client = useClient();
  }
  ```
</ParamField>

<ParamField body="useOrganization" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/OrganizationMembers">OrganizationMembers</a></span>}>
  Este hook proporciona información sobre la Organización del usuario si el registro está asociado a una Organización. Devuelve `null` cuando no hay contexto de Organización.

  ```jsx Example theme={null}
  import { useOrganization } from '@auth0/auth0-acul-react/signup-password';
  function OrgSelector() {
    const organization = useOrganization();
    if (!organization) {
      return <p>Sin contexto de organización</p>;
    }
  }
  ```
</ParamField>

<ParamField body="usePrompt" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/PromptMembers">PromptMembers</a></span>}>
  Este hook contiene datos sobre la pantalla actual del flujo de autenticación.

  ```jsx Example theme={null}
  import { usePrompt } from '@auth0/auth0-acul-react/signup-password';
  function FlowInfo() {
    const prompt = usePrompt();
  }
  ```
</ParamField>

<ParamField body="useScreen" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ScreenMembersOnSignupPassword">ScreenMembersOnSignupPassword</a></span>}>
  Este hook contiene detalles específicos de la pantalla `signup-password`, incluida su configuración y contexto.

  ```jsx Example theme={null}
  import { useScreen } from '@auth0/auth0-acul-react/signup-password';
  function ScreenDebug() {
    const screen = useScreen();
  }
  ```
</ParamField>

<ParamField body="useTenant" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TenantMembers">TenantMembers</a></span>}>
  Este hook contiene datos relacionados con el inquilino, como `id` y los metadatos asociados.

  ```jsx Example theme={null}
  import { useTenant } from '@auth0/auth0-acul-react/signup-password';
  function TenantInfo() {
    const tenant = useTenant();
  }
  ```
</ParamField>

<ParamField body="useTransaction" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TransactionMembersOnSignupPassword">TransactionMembersOnSignupPassword</a></span>}>
  Este hook proporciona datos específicos de la transacción para la pantalla `signup-password`, como las conexiones activas y el estado actual del flujo.

  ```jsx Example theme={null}
  import { useTransaction } from '@auth0/auth0-acul-react/signup-password';
  function TransactionInfo() {
    const transaction = useTransaction();
  }
  ```
</ParamField>

<ParamField body="useUntrustedData" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}>
  Este hook administra los datos no confiables que se pasan a la pantalla, como un correo electrónico o un username rellenado previamente a partir de parámetros de la URL.

  ```jsx Example theme={null}
  import { useUntrustedData } from '@auth0/auth0-acul-react/signup-password';
  function PrefilledForm() {
    const untrustedData = useUntrustedData();
  }
  ```
</ParamField>

<ParamField body="useUser" type={<span>() =&gt; <a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UserMembers">UserMembers</a></span>}>
  Este hook proporciona los detalles del usuario activo, incluidos `username`, `email` y los métodos de autenticación disponibles.

  ```jsx Example theme={null}
  import { useUser } from '@auth0/auth0-acul-react/signup-password';
  function UserProfile() {
    const user = useUser();
  }
  ```
</ParamField>

<ParamField body="useSignupPassword" type={<a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/SignupPasswordMembers">SignupPasswordMembers</a>}>
  Este hook devuelve todos los métodos y el contexto disponibles en la pantalla `signup-password`.
</ParamField>

<div id="methods">
  ## Métodos
</div>

<ParamField body="federatedSignup" type="Promise<void>">
  Este método inicia el registro mediante un proveedor de identidad federado, como Google o GitHub.

  ```jsx Example theme={null}
  import { useSignupPassword } from '@auth0/auth0-acul-react/signup-password';

  function SocialButton() {
    const { federatedSignup } = useSignupPassword();
    return (
      <button onClick={() => federatedSignup({ connection: 'google-oauth2' })}>
        Sign up with Google
      </button>
    );
  }
  ```

  **Parámetros del método**

  <Expandable title="Parámetros">
    <ParamField body="options">
      [FederatedSignupPasswordPayloadOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/FederatedSignupPasswordPayloadOptions).
    </ParamField>

    <ParamField body="connection" type="string" required>
      El nombre de la conexión social o de la conexión empresarial que se va a usar (por ejemplo, `google-oauth2`, `github`).
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="signup" type="Promise<void>">
  Este método envía la contraseña del usuario para completar la creación de la cuenta.

  ```jsx Example theme={null}
  import { useSignupPassword } from '@auth0/auth0-acul-react/signup-password';

  function SignupPasswordForm() {
    const { signup } = useSignupPassword();
    return (
      <button onClick={() => signup({ password: 'secret' })}>
        Create Account
      </button>
    );
  }
  ```

  **Parámetros del método**

  <Expandable title="Parámetros">
    <ParamField body="options">
      [SignupPasswordOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/SignupPasswordOptions).
    </ParamField>

    <ParamField body="password" type="string" required>
      La contraseña de la nueva cuenta.
    </ParamField>

    <ParamField body="email" type="string">
      La dirección de correo electrónico del usuario.
    </ParamField>

    <ParamField body="username" type="string">
      El username de la nueva cuenta, si la conexión lo requiere.
    </ParamField>

    <ParamField body="phoneNumber" type="string">
      El número de teléfono del usuario, si la conexión lo requiere.
    </ParamField>

    <ParamField body="captcha?" type="string">
      Valor de captcha obligatorio cuando la detección de bots está habilitada en el inquilino.
    </ParamField>

    <ParamField body="[`key`: `string`]" type="&#x22;string&#x22; | &#x22;number&#x22; | &#x22;boolean&#x22; | &#x22;undefined&#x22;">
      Campos personalizados adicionales con el prefijo `ulp-` (por ejemplo, `'ulp-custom-field'`).
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="switchConnection" type="Promise<void>">
  Este método cambia la conexión activa durante el paso signup-password, lo que permite al usuario autenticarse mediante una conexión diferente.

  ```jsx Example theme={null}
  import { useSignupPassword } from '@auth0/auth0-acul-react/signup-password';

  function SwitchConnection() {
    const { switchConnection } = useSignupPassword();
    return (
      <button onClick={() => switchConnection({ connection: 'Username-Password-Authentication' })}>
        Use a different method
      </button>
    );
  }
  ```

  **Parámetros del método**

  <Expandable title="Parámetros">
    <ParamField body="options">
      [SwitchConnectionOptionsSignupPassword](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/SwitchConnectionOptionsSignupPassword).
    </ParamField>

    <ParamField body="connection" type="string" required>
      El nombre de la conexión a la que se cambiará. Use `email` o `sms` para conexiones sin contraseña, o el nombre de una conexión de base de datos para la autenticación basada en contraseña.
    </ParamField>

    <ParamField body="[`key`: `string`]" type="&#x22;string&#x22; | &#x22;number&#x22; | &#x22;boolean&#x22; | &#x22;undefined&#x22;">
      Campos personalizados adicionales con el prefijo `ulp-` (por ejemplo, `'ulp-custom-field'`).
    </ParamField>
  </Expandable>
</ParamField>

<div id="commonutility-hooks">
  ## Hooks comunes/de utilidad
</div>

<ParamField body={<a href="/es/docs/libraries/acul/react-sdk/API-Reference/Hooks/useAuth0Themes">useAuth0Themes</a>} type="Hooks">
  Este hook obtiene las opciones del tema actual con la configuración plana del contexto de marca.
</ParamField>

<ParamField body={<a href="/es/docs/libraries/acul/react-sdk/API-Reference/Hooks/useChangeLanguage">useChangeLanguage</a>} type="Hooks">
  Este hook devuelve una función para cambiar el idioma mostrado en la pantalla actual de ACUL.
</ParamField>

<ParamField body={<a href="/es/docs/libraries/acul/react-sdk/API-Reference/Hooks/useCurrentScreen">useCurrentScreen</a>} type="Hooks">
  Este hook obtiene el contexto y el estado de la pantalla actual.
</ParamField>

<ParamField body={<a href="/es/docs/libraries/acul/react-sdk/API-Reference/Hooks/useErrors">useErrors</a>} type="Hooks">
  Este hook permite leer y gestionar los errores del servidor, del cliente y del desarrollador en la pantalla.
</ParamField>

<ParamField body={<a href="/es/docs/libraries/acul/react-sdk/API-Reference/Hooks/usePasswordValidation">usePasswordValidation</a>} type="Hooks">
  Este hook valida la contraseña del usuario conforme a los requisitos de la política de contraseñas del inquilino.
</ParamField>
