useCurrentScreen

useCurrentScreen() · CurrentScreenOptions

Hook de React que obtiene el contexto y el estado de la pantalla actual.

Este hook proporciona acceso a la configuración del cliente, los detalles de la organización, la identificación de la pantalla, la configuración del inquilino, el estado de la transacción y los parámetros de autorización para crear una interfaz de autenticación personalizada.

​

Valor de retorno

Devuelve un objeto CurrentScreenOptions con las siguientes propiedades, o null si no está disponible:

• client - Identificador y metadatos de la aplicación
• organization - ID y metadatos de la organización (para Auth0 Organizations)
• prompt - Nombre de la pantalla actual del flujo (por ejemplo, “login”, “consent”, “mfa”)
• screen - Nombre de la pantalla actual (por ejemplo, “login-id”, “login-password”, “mfa-otp-challenge”)
• tenant - Configuración del inquilino, incluidos los idiomas habilitados
• transaction - Estado de la transacción, lista de errores y configuración regional actual
• untrustedData - Parámetros de autorización del cliente (valídelos antes de usarlos)

​

Puntos clave

• Use screen.name para el renderizado condicional de las pantallas de autenticación
• Use siempre el encadenamiento opcional (?.), ya que las propiedades anidadas pueden ser null
• Revise transaction.errors para mostrar errores de validación
• Acceda a organization.metadata para la marca específica de la organización

​

Devuelve

CurrentScreenOptions | null

Datos del contexto de la pantalla actual, o null si no están disponibles

Basic screen routing

import { useCurrentScreen } from '@auth0/auth0-acul-react';

const AuthFlow = () => {
  const screenOptions = useCurrentScreen();
  const screen = screenOptions?.screen?.name || "login-id";

  switch (screen) {
    case "login-id":
      return <LoginIdScreen />;
    case "login-password":
      return <LoginPasswordScreen />;
    case "mfa-otp-challenge":
      return <MfaOtpChallengeScreen />;
    default:
      return null;
  }
};

Accessing multiple properties

import { useCurrentScreen } from '@auth0/auth0-acul-react';

const CustomAuthScreen = () => {
  const screenOptions = useCurrentScreen();
  const organizationId = screenOptions?.organization?.id;
  const errors = screenOptions?.transaction?.errors || [];
  const locale = screenOptions?.transaction?.locale || 'en';

  return (
    <div>
      {organizationId && <p>Organization: {organizationId}</p>}
      {errors.map((error, i) => (
        <p key={i} className="error">{error.message}</p>
      ))}
      <p>Language: {locale}</p>
    </div>
  );
};