useCurrentScreen

useCurrentScreen() · CurrentScreenOptions

現在の画面のコンテキストと state を取得する React Hook です。

この Hook を使うと、カスタム authentication UI の構築に必要なクライアント設定、organization の詳細、画面の識別情報、 テナント設定、transaction state、認可パラメーターにアクセスできます。

​

戻り値

次のプロパティを持つ CurrentScreenOptions オブジェクトを返します。利用できない場合は null を返します。

• client - アプリケーション識別子とメタデータ
• organization - 組織ID とメタデータ (Auth0 Organizations の場合)
• prompt - 現在の prompt 名 (例: “login”, “consent”, “mfa”)
• screen - 現在の画面名 (例: “login-id”, “login-password”, “mfa-otp-challenge”)
• tenant - 有効な locale を含むテナント設定
• transaction - transaction state、errors array、現在の locale
• untrustedData - クライアントからの認可パラメーター (使用前に validate してください)

​

重要なポイント

• authentication 画面の条件付きレンダリングには screen.name を使用します
• ネストされたプロパティは null の場合があるため、必ずオプショナルチェーン (?.) を使用してください
• バリデーションエラーを表示するには transaction.errors を確認してください
• organization 固有の branding にアクセスするには organization.metadata を使用します

​

戻り値

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