useCurrentScreen - Auth0 Docs

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>
  );
};

​Valeur de retour

​Points clés

​Retourne

Valeur de retour

Points clés

Retourne