メインコンテンツへスキップ
​
useCurrentScreen()
現在の画面コンテキストおよび状態を取得する React フックです。このフックを使用すると、クライアント設定、組織の詳細、画面の識別情報、 テナント設定、トランザクションの状態、カスタム認証 UI を構築するための認可パラメータにアクセスできます。

​
Return Value

次のプロパティを持つ CurrentScreenOptions オブジェクト、または利用できない場合は null を返します。
  • client - アプリケーションの識別子とメタデータ
  • organization - 組織 ID とメタデータ（Auth0 Organizations 用）
  • prompt - 現在のプロンプト名（例: “login”, “consent”, “mfa”）
  • screen - 現在の画面名（例: “login-id”, “login-password”, “mfa-otp-challenge”）
  • tenant - 有効なロケールを含むテナント設定
  • transaction - トランザクションの状態、エラー配列、および現在のロケール
  • untrustedData - クライアントからの認可パラメータ（使用前に検証してください）

​
Key Points

  • 認証画面を条件付きでレンダリングするには screen.name を使用します
  • ネストされたプロパティは null になり得るため、常にオプショナルチェイニング（?.）を使用します
  • バリデーションエラーを表示するには transaction.errors を確認します
  • 組織固有のブランディングには organization.metadata にアクセスします

​
Returns

CurrentScreenOptions | null現在の画面コンテキストのデータ、または利用できない場合は null です。
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>
  );
};