> ## 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.
# Inicio de sesión
> Describe todos los hooks y métodos disponibles para personalizar la pantalla `login` de Universal Login.
La pantalla `login` recopila el identificador y la contraseña del usuario. Según tu inquilino, este identificador puede ser un correo electrónico, un número de teléfono o un username. También admite la autenticación mediante proveedores de identidad federados.
## Importación
Cada pantalla tiene su propio conjunto de hooks y métodos. El SDK admite la **importación parcial** y la **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 para gestionar todas las pantallas posibles.
```jsx Import Example theme={null}
// importación raíz
import { useLogin } from '@auth0/auth0-acul-react';
// importación parcial
import {
useLogin,
// Hooks de contexto
useUser,
useTenant,
useBranding,
useClient,
useOrganization,
usePrompt,
useScreen,
useTransaction,
useUntrustedData,
// Hooks comunes
useCurrentScreen,
useAuth0Themes,
useErrors,
// Hooks de utilidad
useLoginIdentifiers,
useChangeLanguage,
// Métodos
login,
federatedLogin,
pickCountryCode,
} from "@auth0/auth0-acul-react/login";
function LoginForm() {
const { login, federatedLogin } = useLogin();
return (
);
}
```
## Hooks de contexto
Hooks específicos de la pantalla que proporcionan acceso de solo lectura a los datos de contexto de Auth0 en la pantalla `login`. Impórtalos desde `@auth0/auth0-acul-react/login`.
() => BrandingMembers}>
Este hook proporciona configuraciones de marca, como el logotipo, los colores y los ajustes de tema que se muestran en la pantalla `login`.
```jsx Example theme={null}
import { useBranding } from '@auth0/auth0-acul-react/login';
function CustomTheme() {
const branding = useBranding();
}
```
() => ClientMembers}>
Este hook proporciona configuraciones relacionadas con el cliente, como `id`, `name` y `logoUrl`, para la pantalla `login`.
```jsx Example theme={null}
import { useClient } from '@auth0/auth0-acul-react/login';
function AppInfo() {
const client = useClient();
}
```
() => OrganizationMembers}>
Este hook proporciona información sobre la organización del usuario si el inicio de sesión tiene alcance de organización. Devuelve `null` cuando no hay contexto de organización.
```jsx Example theme={null}
import { useOrganization } from '@auth0/auth0-acul-react/login';
function OrgSelector() {
const organization = useOrganization();
if (!organization) {
return
No organization context
;
}
}
```
() => PromptMembers}>
Este hook contiene datos sobre la pantalla actual del flujo de autenticación.
```jsx Example theme={null}
import { usePrompt } from '@auth0/auth0-acul-react/login';
function FlowInfo() {
const prompt = usePrompt();
}
```
() => ScreenMembersOnLogin}>
Este hook contiene detalles específicos de la pantalla `login`, incluida su configuración y su contexto.
```jsx Example theme={null}
import { useScreen } from '@auth0/auth0-acul-react/login';
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/login';
function TenantInfo() {
const tenant = useTenant();
}
```
() => TransactionMembersOnLogin}>
Este hook proporciona datos específicos de la transacción para la pantalla `login`, como conexiones activas, métodos de inicio de sesión disponibles y el estado actual del flujo.
```jsx Example theme={null}
import { useTransaction } from '@auth0/auth0-acul-react/login';
function TransactionInfo() {
const transaction = useTransaction();
}
```
() => UntrustedDataMembers}>
Este hook maneja los datos no confiables que se pasan a la pantalla, como un username precompletado a partir de parámetros de la URL.
```jsx Example theme={null}
import { useUntrustedData } from '@auth0/auth0-acul-react/login';
function PrefilledForm() {
const untrustedData = useUntrustedData();
}
```
() => UserMembers}>
Este hook proporciona 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/login';
function UserProfile() {
const user = useUser();
}
```
LoginMembers}>
Este hook devuelve todos los métodos y el contexto disponibles en la pantalla `login`.
## Métodos
Este método inicia la autenticación a través de un proveedor de identidad federado, como Google o GitHub.
```jsx Example theme={null}
import { useLogin } from '@auth0/auth0-acul-react/login';
function SocialButton() {
const { federatedLogin } = useLogin();
return (
);
}
```
**Parámetros del método**
[FederatedLoginPayloadOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/FederatedLoginPayloadOptions).
El nombre de la conexión social que se va a usar (por ejemplo, `google-oauth2`, `github`).
Este método envía las credenciales del usuario para completar la autenticación en la pantalla `login`.
```jsx Example theme={null}
import { useLogin } from '@auth0/auth0-acul-react/login';
function LoginForm() {
const { login } = useLogin();
return (
);
}
```
**Parámetros del método**
[LoginPayloadOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/LoginPayloadOptions).
El username o correo electrónico que se usará para autenticarse.
La contraseña para la autenticación.
Valor de captcha requerido cuando la detección de bots está habilitada en el inquilino.
Campos personalizados adicionales con el prefijo `ulp-` (por ejemplo, `'ulp-custom-field'`).
Este método navega al selector de código de país para los flujos de inicio de sesión por teléfono.
```jsx Example theme={null}
import { useLogin } from '@auth0/auth0-acul-react/login';
function PhoneLogin() {
const { pickCountryCode } = useLogin();
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'`).
## Hooks comunes/de utilidad
useAuth0Themes} type="Hooks">
Este hook obtiene las opciones del tema actual con la configuración consolidada del contexto de marca.
useChangeLanguage} type="Hooks">
Este hook devuelve una función para cambiar el idioma de visualización 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 permite leer y administrar los errores del servidor, del cliente y de desarrollo en la pantalla.
useLoginIdentifiers} type="Hooks">
Este hook devuelve una lista de tipos de identificador activos (`email`, `phone`, `username`) en el flujo actual.
