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

> Auth0 Lock を使用してクラシックログインのエラーメッセージを上書きし、アプリケーションのトーンや説明に合わせます。

# Lock のエラーメッセージをカスタマイズ

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

<Warning>
  現在、Auth0 の開発は Universal Login に注力されており、クラシックログインは更新されていません。ログインページをカスタマイズするには、Auth0 では [Advanced Customizations for Universal Login](/docs/ja-jp/customize/login-pages/advanced-customizations) を推奨しています。
</Warning>

`languageDictionary` オプションを指定すると、特定の状況で表示されるエラーメッセージをカスタマイズできます。カスタマイズ可能な `languageDictionary` フィールドの完全な一覧は、GitHubリポジトリの [Lock の English Dictionary ファイル](https://github.com/auth0/lock/blob/master/src/i18n/en.js) で確認できます。以下は、カスタマイズしたエラーメッセージの例です。

export const codeExample = `// languageDictionary オプションでカスタマイズしたエラーメッセージの例
var options = {
  languageDictionary: {
    error: {
      login: {
        "lock.invalid_email_password": "無効な資格情報に関するカスタムメッセージ",
        "lock.network": "ネットワーク エラーが発生したことを示し、ユーザーに接続の確認を促すカスタムメッセージ",
        "lock.unauthorized": "権限の問題に関するカスタムメッセージ",
        "too_many_attempts": "ユーザーのログイン失敗回数が多すぎることを示すカスタムメッセージ。"
      },
      signUp: {
        "invalid_password": "パスワードが無効であることを示すカスタムメッセージ",
        "user_exists": "ユーザーがすでに存在することを示すカスタムメッセージ"
      }
    }
  }
};

// Auth0Lock を初期化します
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  options
);`;

<AuthCodeBlock children={codeExample} language="javascript" />

<div id="custom-errors-in-rules">
  ## ルールでのカスタムエラー
</div>

[ルール](/docs/ja-jp/customize/rules) またはカスタムデータベーススクリプトからカスタムエラーコードを返す場合、カスタムエラーは次の方法で処理できます。

* `error` と `error_mesage` のクエリ文字列パラメーターを読み取って、アプリケーションのリダイレクトURLで処理する。
* ユーザーをカスタムエラーメッセージ付きでホストページにリダイレクトし、そのメッセージを [フラッシュメッセージ](/docs/ja-jp/libraries/lock/lock-api-reference) で表示する。

<div id="learn-more">
  ## 詳しくはこちら
</div>

* [Lock for Web](/docs/ja-jp/libraries/lock)