ResetPasswordMfaWebauthnPlatformChallenge

Describe todos los hooks y métodos disponibles para personalizar la pantalla reset-password-mfa-webauthn-platform-challenge de Universal Login.

La pantalla reset-password-mfa-webauthn-platform-challenge se muestra durante el flujo de restablecimiento de contraseña cuando se requiere MFA mediante una clave de acceso de plataforma. Solicita al usuario que se autentique con la clave de acceso almacenada en su dispositivo para continuar el proceso de restablecimiento.

​

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 específico.
• La importación desde la raíz te permite cargar todas las pantallas desde un único bundle, lo que resulta útil cuando quieres una compilación unificada que gestione todas las pantallas posibles.

Import Example

// importación desde la raíz
import { useResetPasswordMfaWebAuthnPlatformChallenge } from '@auth0/auth0-acul-react';

// importación parcial
import {
  useResetPasswordMfaWebAuthnPlatformChallenge,
  // Hooks de contexto
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Hooks comunes
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  // Hooks de utilidad
  useChangeLanguage,
  // Métodos
  continueWithPasskey,
  reportBrowserError,
  tryAnotherMethod,
} from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';

function ResetPasswordMfaWebAuthnPlatformChallengeScreen() {
  const { continueWithPasskey } = useResetPasswordMfaWebAuthnPlatformChallenge();
  return (
    <button onClick={() => continueWithPasskey()}>
      Authenticate with Passkey
    </button>
  );
}

​

Hooks de contexto

Hooks para la pantalla que proporcionan acceso de solo lectura a los datos de contexto de Auth0 en la pantalla reset-password-mfa-webauthn-platform-challenge. Impórtalos desde @auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge.

useBranding · () => BrandingMembers

Este hook proporciona configuraciones de marca, como el logotipo, los colores y los ajustes de tema que se muestran en la pantalla reset-password-mfa-webauthn-platform-challenge.

Example

import { useBranding } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function CustomTheme() {
  const branding = useBranding();
}

useClient · () => ClientMembers

Este hook proporciona configuraciones relacionadas con el cliente, como id, name y logoUrl, para la pantalla reset-password-mfa-webauthn-platform-challenge.

Example

import { useClient } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function AppInfo() {
  const client = useClient();
}

useOrganization · () => OrganizationMembers

Este hook proporciona información sobre la organización del usuario si el restablecimiento de contraseña está restringido a una organización. Devuelve null cuando no hay contexto de organización.

Example

import { useOrganization } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function OrgSelector() {
  const organization = useOrganization();
  if (!organization) {
    return <p>No Organization context</p>;
  }
}

usePrompt · () => PromptMembers

Este hook contiene datos sobre la pantalla actual del flujo de autenticación.

Example

import { usePrompt } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function FlowInfo() {
  const prompt = usePrompt();
}

useScreen · () => ScreenMembersOnResetPasswordMfaWebAuthnPlatformChallenge

Este hook contiene detalles específicos de la pantalla reset-password-mfa-webauthn-platform-challenge, incluida su configuración y su contexto.

Example

import { useScreen } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function ScreenDebug() {
  const screen = useScreen();
}

useTenant · () => TenantMembers

Este hook contiene datos relacionados con el inquilino, como id y los metadatos asociados.

Example

import { useTenant } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function TenantInfo() {
  const tenant = useTenant();
}

useTransaction · () => TransactionMembers

Este hook proporciona datos específicos de la transacción para la pantalla reset-password-mfa-webauthn-platform-challenge, como las conexiones activas y el estado actual del flujo.

Example

import { useTransaction } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function TransactionInfo() {
  const transaction = useTransaction();
}

useUntrustedData · () => UntrustedDataMembers

Este hook procesa los datos no confiables que recibe la pantalla, como un correo electrónico o un nombre de usuario precargados a partir de parámetros de la URL.

Example

import { useUntrustedData } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function PrefilledForm() {
  const untrustedData = useUntrustedData();
}

useUser · () => UserMembers

Este hook proporciona detalles sobre el usuario activo, incluidos username, email y los métodos de autenticación disponibles.

Example

import { useUser } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';
function UserProfile() {
  const user = useUser();
}

useResetPasswordMfaWebAuthnPlatformChallenge · ResetPasswordMfaWebAuthnPlatformChallengeMembers

Este hook devuelve todos los métodos y el contexto disponibles para la pantalla reset-password-mfa-webauthn-platform-challenge.

​

Métodos

continueWithPasskey · Promise<void>

Este método inicia el desafío de clave de acceso de la plataforma para continuar el paso de MFA en el flujo de restablecimiento de contraseña.

Example

import { useResetPasswordMfaWebAuthnPlatformChallenge } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';

function ContinueWithPasskeyButton() {
  const { continueWithPasskey } = useResetPasswordMfaWebAuthnPlatformChallenge();
  return (
    <button onClick={() => continueWithPasskey()}>
      Autenticarse con clave de acceso
    </button>
  );
}

Parámetros del método

Mostrar Parámetros

options

ResetPasswordMfaWebAuthnPlatformChallengeContinueOptions.

rememberDevice? · boolean

Si es true y screen.showRememberDevice también es true, omite MFA en inicios de sesión posteriores desde el navegador actual.

reportBrowserError · Promise<void>

Este método notifica a Auth0 un error del navegador relacionado con WebAuthn cuando el desafío de clave de acceso falla en el dispositivo del usuario.

Example

import { useResetPasswordMfaWebAuthnPlatformChallenge } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';

function HandlePasskeyError() {
  const { reportBrowserError } = useResetPasswordMfaWebAuthnPlatformChallenge();
  return (
    <button onClick={() => reportBrowserError({ error: { name: 'NotAllowedError', message: 'User cancelled' } })}>
      Informar error
    </button>
  );
}

Parámetros del método

Mostrar Parámetros

options

ResetPasswordMfaWebAuthnPlatformChallengeReportErrorOptions.

error · WebAuthnErrorDetails · requerido

El objeto de error de la API de WebAuthn (navigator.credentials.get()) que se debe notificar.

name · string · requerido

El nombre del error (por ejemplo, 'NotAllowedError').

message · string · requerido

El mensaje de error que describe el problema.

tryAnotherMethod · Promise<void>

Este método redirige al usuario para que seleccione otro método de MFA.

Example

import { useResetPasswordMfaWebAuthnPlatformChallenge } from '@auth0/auth0-acul-react/reset-password-mfa-webauthn-platform-challenge';

function TryAnotherMethodButton() {
  const { tryAnotherMethod } = useResetPasswordMfaWebAuthnPlatformChallenge();
  return (
    <button onClick={() => tryAnotherMethod()}>
      Probar otro método
    </button>
  );
}

​

Hooks comunes y de utilidad

useAuth0Themes · Hooks

Este hook obtiene las opciones del tema actual con la configuración consolidada del contexto de marca.

useChangeLanguage · Hooks

Este hook devuelve una función para cambiar el idioma que se muestra en la pantalla actual de ACUL.

useCurrentScreen · Hooks

Este hook obtiene el contexto y el estado de la pantalla actual.

useErrors · Hooks

Este hook lee y administra los errores del servidor, del cliente y del desarrollador que se muestran en la pantalla.