> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# useCurrentScreen

<ParamField body="useCurrentScreen()" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/CurrentScreenOptions">CurrentScreenOptions</a></span>}>
  Hook React qui permet d'obtenir le contexte et l'état de l'écran actuel.

  Ce hook donne accès à la configuration du client, aux détails de l'organisation, à l'identification de l'écran,
  aux paramètres du tenant, à l'état de la transaction et aux paramètres d'autorisation pour créer une interface d'authentification personnalisée.

  ## Valeur de retour

  Renvoie un objet `CurrentScreenOptions` avec les propriétés suivantes, ou `null` si non disponible :

  * **`client`** - Identifiant et métadonnées de l'application
  * **`organization`** - ID de l'organisation et métadonnées (pour Auth0 Organizations)
  * **`prompt`** - Nom du prompt actuel (par exemple, "login", "consent", "mfa")
  * **`screen`** - Nom de l'écran actuel (par exemple, "login-id", "login-password", "mfa-otp-challenge")
  * **`tenant`** - Configuration du tenant, y compris les paramètres régionaux activés
  * **`transaction`** - État de la transaction, tableau d'erreurs et paramètre régional actuel
  * **`untrustedData`** - Paramètres d'autorisation provenant du client (à valider avant utilisation)

  ## Points clés

  * Utilisez `screen.name` pour le rendu conditionnel des écrans d'authentification
  * Utilisez toujours l'opérateur de chaînage optionnel (`?.`), car les propriétés imbriquées peuvent être `null`
  * Vérifiez `transaction.errors` pour afficher les erreurs de validation
  * Accédez à `organization.metadata` pour appliquer l'image de marque propre à l'organisation

  ## Retourne

  [`CurrentScreenOptions`](/docs/fr-CA/libraries/acul/react-sdk/API-Reference/Types/interfaces/CurrentScreenOptions) | `null`

  Données de contexte de l'écran actuel, ou `null` si non 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>Organisation : {organizationId}</p>}
        {errors.map((error, i) => (
          <p key={i} className="error">{error.message}</p>
        ))}
        <p>Langue : {locale}</p>
      </div>
    );
  };
  ```
</ParamField>