> ## 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.
# PhoneIdentifierChallenge
> Describe todos los hooks y métodos disponibles para personalizar la pantalla `phone-identifier-challenge` de Universal Login.
La pantalla `phone-identifier-challenge` se muestra cuando un usuario necesita verificar su número de teléfono al introducir un código de un solo uso. Permite al usuario enviar el código, reenviarlo, alternar entre la entrega por SMS y voz, o volver al paso anterior.
## 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.
* Usar la importación parcial te permite incluir solo el código que necesitas para tu caso de uso específico.
* Usar 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 desde la raíz
import { usePhoneIdentifierChallenge } from '@auth0/auth0-acul-react';
// importación parcial
import {
usePhoneIdentifierChallenge,
// Hooks de contexto
useUser,
useTenant,
useBranding,
useClient,
useOrganization,
usePrompt,
useScreen,
useTransaction,
useUntrustedData,
// Hooks comunes
useCurrentScreen,
useAuth0Themes,
useErrors,
useResend,
// Hooks de utilidad
useChangeLanguage,
// Métodos
submitPhoneChallenge,
resendCode,
returnToPrevious,
switchToText,
switchToVoice,
} from '@auth0/auth0-acul-react/phone-identifier-challenge';
function PhoneIdentifierChallengeScreen() {
const { submitPhoneChallenge } = usePhoneIdentifierChallenge();
return (
);
}
```
## Hooks de contexto
Hooks con ámbito de pantalla que proporcionan acceso de solo lectura a los datos de contexto de Auth0 en la pantalla `phone-identifier-challenge`. Impórtalos desde `@auth0/auth0-acul-react/phone-identifier-challenge`.
() => BrandingMembers}>
Este hook proporciona la configuración de marca, como el logotipo, los colores y los ajustes del tema que se muestran en la pantalla `phone-identifier-challenge`.
```jsx Example theme={null}
import { useBranding } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function CustomTheme() {
const branding = useBranding();
}
```
() => ClientMembers}>
Este hook proporciona la configuración relacionada con el cliente, como `id`, `name` y `logoUrl`, para la pantalla `phone-identifier-challenge`.
```jsx Example theme={null}
import { useClient } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function AppInfo() {
const client = useClient();
}
```
() => OrganizationMembers}>
Este hook proporciona información sobre la Organización del usuario si el desafío telefónico está limitado a una Organización. Devuelve `null` cuando no hay contexto de Organización.
```jsx Example theme={null}
import { useOrganization } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function OrgSelector() {
const organization = useOrganization();
if (!organization) {
return
No Organization context
;
}
}
```
() => 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/phone-identifier-challenge';
function FlowInfo() {
const prompt = usePrompt();
}
```
() => ScreenMembersOnPhoneIdentifierChallenge}>
Este hook contiene detalles específicos de la pantalla `phone-identifier-challenge`, incluida su configuración y contexto.
```jsx Example theme={null}
import { useScreen } from '@auth0/auth0-acul-react/phone-identifier-challenge';
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/phone-identifier-challenge';
function TenantInfo() {
const tenant = useTenant();
}
```
() => TransactionMembers}>
Este hook proporciona datos específicos de la transacción para la pantalla `phone-identifier-challenge`, como las conexiones activas y el estado actual del flujo.
```jsx Example theme={null}
import { useTransaction } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function TransactionInfo() {
const transaction = useTransaction();
}
```
() => UntrustedDataMembers}>
Este hook expone datos no confiables que se pasan a la pantalla, como parámetros rellenados previamente desde cadenas de consulta de URL.
```jsx Example theme={null}
import { useUntrustedData } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function PrefilledForm() {
const untrustedData = useUntrustedData();
}
```
() => UserMembers}>
Este hook ofrece información 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/phone-identifier-challenge';
function UserProfile() {
const user = useUser();
}
```
PhoneIdentifierChallengeMembers}>
Este hook devuelve todos los métodos y el contexto disponibles en la pantalla `phone-identifier-challenge`.
## Métodos
Este método envía el código de un solo uso ingresado por el usuario para verificar su número de teléfono y continuar el flujo de autenticación.
```jsx Example theme={null}
import { usePhoneIdentifierChallenge } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function VerifyButton() {
const { submitPhoneChallenge } = usePhoneIdentifierChallenge();
return (
);
}
```
**Parámetros del método**
[PhoneChallengeOptions](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/PhoneChallengeOptions).
El código de verificación enviado al número de teléfono del usuario.
El token de respuesta de CAPTCHA, si CAPTCHA está habilitado para este inquilino.
Este método reenvía el código de un solo uso al número de teléfono del usuario.
```jsx Example theme={null}
import { usePhoneIdentifierChallenge } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function ResendButton() {
const { resendCode } = usePhoneIdentifierChallenge();
return (
);
}
```
Este método devuelve al usuario al paso anterior del flujo de autenticación.
```jsx Example theme={null}
import { usePhoneIdentifierChallenge } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function BackButton() {
const { returnToPrevious } = usePhoneIdentifierChallenge();
return (
);
}
```
Este método cambia el método de entrega de la verificación telefónica a un mensaje de texto SMS.
```jsx Example theme={null}
import { usePhoneIdentifierChallenge } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function SwitchToSmsButton() {
const { switchToText } = usePhoneIdentifierChallenge();
return (
);
}
```
Este método cambia el método de entrega de la verificación telefónica a una llamada de voz.
```jsx Example theme={null}
import { usePhoneIdentifierChallenge } from '@auth0/auth0-acul-react/phone-identifier-challenge';
function SwitchToVoiceButton() {
const { switchToVoice } = usePhoneIdentifierChallenge();
return (
);
}
```
## Hooks comunes y 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 que se muestra 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.
useResend} type="Hooks">
Este hook administra el estado y el temporizador del período de espera para el reenvío del método `resendCode`.
