> ## 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.

# useCurrentScreen

<ParamField body="useCurrentScreen()" type={<span><a href="/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/CurrentScreenOptions">CurrentScreenOptions</a></span>}>
  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`](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/CurrentScreenOptions) | `null`

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

  ```tsx Basic screen routing theme={null}
  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;
    }
  };
  ```

  ```tsx Accessing multiple properties theme={null}
  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>
    );
  };
  ```
</ParamField>