Passer au contenu principal
​
useCurrentScreen()
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 | nullDonnées de contexte de l’écran actuel, ou null si non 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>Organisation : {organizationId}</p>}
      {errors.map((error, i) => (
        <p key={i} className="error">{error.message}</p>
      ))}
      <p>Langue : {locale}</p>
    </div>
  );
};