> ## 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.
# SignupId
> Describe los hooks y métodos disponibles para personalizar la pantalla `signup-id` de Universal Login.
La pantalla `signup-id` solicita el identificador del usuario —como el correo electrónico, el username o el número de teléfono— como primer paso de un flujo de registro de varios pasos. También admite el registro federado mediante conexiones sociales o empresariales.
## Importación
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 le permite incluir solo el código que necesita para su caso de uso concreto.
* La importación desde la raíz le permite cargar todas las pantallas desde un único paquete, lo que resulta útil cuando necesita una compilación unificada para gestionar todas las pantallas posibles.
```jsx Import Example theme={null}
// importación desde la raíz
import { useSignupId } from '@auth0/auth0-acul-react';
// importación parcial
import {
useSignupId,
// Hooks de contexto
useUser,
useTenant,
useBranding,
useClient,
useOrganization,
usePrompt,
useScreen,
useTransaction,
useUntrustedData,
// Hooks comunes
useCurrentScreen,
useAuth0Themes,
useErrors,
// Hooks de utilidad
useChangeLanguage,
useSignupIdentifiers,
useUsernameValidation,
// Métodos
signup,
federatedSignup,
pickCountryCode,
} from '@auth0/auth0-acul-react/signup-id';
function SignupIdForm() {
const { signup } = useSignupId();
return (
);
}
```
## Hooks de contexto
Hooks con alcance de pantalla que proporcionan acceso de solo lectura a los datos de contexto de Auth0 en la pantalla `signup-id`. Impórtelos desde `@auth0/auth0-acul-react/signup-id`.
() => BrandingMembers}>
Este hook proporciona configuraciones de marca, como el logotipo, los colores y los ajustes del tema que se muestran en la pantalla `signup-id`.
```jsx Example theme={null}
import { useBranding } from '@auth0/auth0-acul-react/signup-id';
function CustomTheme() {
const branding = useBranding();
}
```
() => ClientMembers}>
Este hook proporciona datos relacionados con el cliente, como `id`, `name` y `logoUrl`, para la pantalla `signup-id`.
```jsx Example theme={null}
import { useClient } from '@auth0/auth0-acul-react/signup-id';
function AppInfo() {
const client = useClient();
}
```
() => OrganizationMembers}>
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-id';
function OrgSelector() {
const organization = useOrganization();
if (!organization) {
return
Sin contexto de organización
;
}
}
```
() => PromptMembers}>
Este hook contiene datos sobre la pantalla actual en el flujo de autenticación.
```jsx Example theme={null}
import { usePrompt } from '@auth0/auth0-acul-react/signup-id';
function FlowInfo() {
const prompt = usePrompt();
}
```
() => ScreenMembersOnSignupId}>
Este hook contiene detalles específicos de la pantalla `signup-id`, incluida su configuración y contexto.
```jsx Example theme={null}
import { useScreen } from '@auth0/auth0-acul-react/signup-id';
function ScreenDebug() {
const screen = useScreen();
}
```
() => TenantMembers}>
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-id';
function TenantInfo() {
const tenant = useTenant();
}
```
() => TransactionMembersOnSignupId}>
Este hook proporciona datos específicos de la transacción para la pantalla `signup-id`, como las conexiones activas y el estado actual del flujo.
```jsx Example theme={null}
import { useTransaction } from '@auth0/auth0-acul-react/signup-id';
function TransactionInfo() {
const transaction = useTransaction();
}
```
() => UntrustedDataMembers}>
Este hook proporciona acceso a 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 URL.
```jsx Example theme={null}
import { useUntrustedData } from '@auth0/auth0-acul-react/signup-id';
function PrefilledForm() {
const untrustedData = useUntrustedData();
}
```
() => UserMembers}>
Este hook ofrece información del usuario actual, incluidos `username`, `email` y los métodos de autenticación disponibles.
```jsx Example theme={null}
import { useUser } from '@auth0/auth0-acul-react/signup-id';
function UserProfile() {
const user = useUser();
}
```
SignupIdMembers}>
Este hook devuelve todos los métodos y el contexto disponibles en la pantalla `signup-id`.
## Métodos
Este método inicia el registro mediante un proveedor de identidad federado, como Google o GitHub.
```jsx Example theme={null}
import { useSignupId } from '@auth0/auth0-acul-react/signup-id';
function SocialButton() {
const { federatedSignup } = useSignupId();
return (
);
}
```
**Parámetros del método**
[FederatedSignupOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/FederatedSignupOptions).
El nombre de la conexión social o empresarial que se va a usar (por ejemplo, `google-oauth2`, `github`).
Este método abre el selector de código de país para introducir el número de teléfono durante el registro.
```jsx Example theme={null}
import { useSignupId } from '@auth0/auth0-acul-react/signup-id';
function CountryCodePicker() {
const { pickCountryCode } = useSignupId();
return (
);
}
```
**Parámetros del método**
[CustomOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/CustomOptions).
Campos personalizados adicionales con el prefijo `ulp-` (por ejemplo, `'ulp-custom-field'`).
Este método envía el identificador del usuario para pasar al siguiente paso del flujo de registro.
```jsx Example theme={null}
import { useSignupId } from '@auth0/auth0-acul-react/signup-id';
function SignupIdForm() {
const { signup } = useSignupId();
return (
);
}
```
**Parámetros del método**
[SignupOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/SignupOptions).
La dirección de correo electrónico del usuario.
El username de la cuenta nueva, si la conexión lo requiere.
El número de teléfono del usuario, si la conexión lo requiere.
Valor de captcha obligatorio cuando la detección de bots está habilitada en el inquilino.
Campos personalizados adicionales con el prefijo `ulp-` (por ejemplo, `'ulp-custom-field'`).
## Hooks comunes/de utilidad
useAuth0Themes} type="Hooks">
Este hook obtiene las opciones del tema actual con la configuración aplanada del contexto de marca.
useChangeLanguage} type="Hooks">
Este hook devuelve una función para cambiar el idioma mostrado en la pantalla actual de ACUL.
useCurrentScreen} type="Hooks">
Este hook obtiene el contexto y el estado de la pantalla actual.
useErrors} type="Hooks">
Este hook lee y administra los errores del servidor, del cliente y del desarrollador en la pantalla.
useSignupIdentifiers} type="Hooks">
Este hook devuelve los tipos de identificadores de registro disponibles (email, username, phone) configurados para la conexión.
useUsernameValidation} type="Hooks">
Este hook valida el username del usuario según los requisitos de la política de username del inquilino.
